Day08--导航菜单自渲染--组件递归
导航菜单自渲染–组件递归在 ‘@/views/layout/components’ 下新建 Menu.vue 用于导航菜单自渲染组件<!-- 左侧导航菜单自渲染 --><template><div class="menu"><!-- 遍历菜单数据 --><template v-for="menu in data"><!-- 如果没有
·
导航菜单自渲染–组件递归
-
在 ‘@/views/layout/components’ 下新建 Menu.vue 用于导航菜单自渲染组件
<!-- 左侧导航菜单自渲染 --> <template> <div class="menu"> <!-- 遍历菜单数据 --> <template v-for="menu in data"> <!-- 如果没有子菜单 --> <template v-if="!menu.children"> <el-menu-item :index="menu.path" :key="menu.id"> <!-- 如果有图标 --> <template v-if="menu.icon"> <!-- 当设置了icon属性 并且名称以 icon- 开头 --> <i :class="[menu.icon, {iconfont: menu.icon && menu.icon.startsWith('icon-')}]"></i> <span slot="title">{{menu.title}}</span> </template> <!-- 如果没有图标 --> <template v-else>{{menu.title}}</template> </el-menu-item> </template> <!-- 如果有子菜单 --> <template v-else> <el-submenu :index="menu.path" :key="menu.id"> <template slot="title"> <!-- 如果有图标 --> <template v-if="menu.icon"> <!-- 当设置了icon属性 并且名称以 icon- 开头 --> <i :class="[menu.icon, {iconfont: menu.icon && menu.icon.startsWith('icon-')}]"></i> <span>{{menu.title}}</span> </template> <!-- 如果没有图标 --> <template v-else>{{menu.title}}</template> </template> <!-- 递归 --> <Menu :data="menu.children"></Menu> </el-submenu> </template> </template> </div> </template> <script> export default { name: 'Menu', // 用于接收菜单数据 props: { data: [Array] } } </script> <style scoped> </style>
-
新建 ‘@/assets/json/menu.json’ 用于存放测试的菜单文件数据
[{ "name": "dashboard", "icon": " ", "path": "/dashboard", "title": "数据看板", "isMenu": true, "keepAlive": true, "component": "dashboard" }, { "name": "tools", "icon": " ", "path": "/tools", "title": "工具集", "isMenu": true, "redirect": "/tools/pdf2word", "children": [{ "name": "PdfTOWord", "path": "/tools/pdf2word", "title": "文字版PDF转Word", "isMenu": true, "component": "/tools/PdfTOWord" }, { "name": "PdfScanToPdf", "path": "/tools/pdfscan2pdf", "title": "扫描版PDF转PDF", "isMenu": true, "keepAlive": false, "component": "tools/PdfScanToPdf" }] }, { "name": "control", "icon": " ", "path": "/control", "title": "控制台", "redirect": "noRedirect", "isMenu": true, "children": [{ "name": "account", "path": "/control/account", "title": "账户管理", "isMenu": true, "component": "control/account" }] }, { "name": "store", "icon": " ", "path": "/store", "title": "市场", "redirect": "/store/appstore", "isMenu": true, "children": [{ "name": "AppStore", "path": "/store/appstore", "title": "应用市场", "isMenu": true, "component": "store/AppStore" }, { "name": "Plugs", "path": "/store/plugs", "title": "插件市场", "isMenu": true, "component": "store/Plugs" }] }, { "name": "community", "icon": " ", "path": "/community", "title": "社区", "isMenu": true, "redirect": "/community/docs", "children": [{ "name": "docs", "path": "/community/docs", "title": "文档", "isMenu": true, "children": [{ "name": "help", "path": "/community/docs/help", "title": "帮助文档", "isMenu": true, "component": "community/docs/Help" }] }] }]
-
在 Sidebar.vue 中引用 Menu.vue 菜单自渲染组件
<!-- 左侧边栏 --> <template> <div class="sidebar"> <el-menu default-active="2" class="left-menu" background-color="#304151" text-color="#bfcbd1" active-text-color="#409EFF"> <!-- 菜单自渲染组件 --> <Menu :data="menuData"></Menu> </el-menu> </div> </template> <script> // 引入Menu菜单自渲染组件 import Menu from './Menu' // 引入菜单数据 import menu from '@/assets/json/menu.json' export default { name: 'Sidebar', components: { Menu // 注册Menu菜单自渲染组件 }, // 菜单数据域 data () { return { menuData: [] } }, mounted () { // 初始化菜单数据 this.menuData = menu } } </script> <style scoped lang="stylus"> .left-menu boder none user-select none .menu overflow hidden </style>
-
npm run dev 运行项目,可以看到菜单根据 json 文件自动生成
项目仓库
更多推荐
已为社区贡献6条内容
所有评论(0)