[Vue]ElementUI 菜单组件封装

基于ElementUI的项目,由于原本的navbar是写死的,所以自己封装菜单组件,让他能够不限子菜单层级渲染

目录:
[Vue]ElementUI 菜单组件封装_第1张图片

  1. 数据结构
menuList: [
 {
   id: 0,
   type: "item",
   index: "home",
   lable: "首页",
   icon: "el-icon-circle-plus-outline",
   route: {
     type: "inner",
     path: { name: "GainIframe", params: { id: "2" } }
   }
 },
 {
   id: 1,
   type: "submenu",
   index: "news",
   lable: "系统管理",
   icon: "el-icon-circle-plus-outline",
   childs: [
     {
       id: 2,
       type: "item",
       index: "addMenu",
       lable: "菜单管理",
       icon: "el-icon-circle-plus-outline",
       route: {
         type: "inner",
         path: { name: "AddNews" }
       }
     },
     {
       id: 3,
       type: "submenu",
       index: "rolesList",
       lable: "角色管理",
       icon: "el-icon-circle-plus-outline",
       route: {
         type: "inner",
         path: { name: "GainIframe", params: { id: "2" } }
       },
       childs: [
         {
           id: 4,
           type: "item",
           index: "submenu",
           lable: "用户管理",
           icon: "el-icon-circle-plus-outline",
           route: {
             type: "inner",
             path: { name: "GainIframe", params: { id: "2" } }
           }
         }
       ]
     }
   ]
 },
 {
   id: 5,
   type: "submenu",
   index: "news",
   lable: "新闻",
   icon: "el-icon-circle-plus-outline",
   childs: [
     {
       id: 6,
       type: "item",
       index: "addNews",
       lable: "发布新闻",
       icon: "el-icon-circle-plus-outline",
       route: {
         type: "inner",
         path: { name: "AddNews" }
       }
     },
     {
       id: 7,
       type: "submenu",
       index: "newsList",
       lable: "新闻列表",
       icon: "el-icon-circle-plus-outline",
       route: {
         type: "inner",
         path: { name: "NewsList" }
       },
       childs: [
         {
           id: 8,
           type: "submenu",
           index: "NewsAdd",
           lable: "新闻添加",
           icon: "el-icon-circle-plus-outline",
           route: {
             type: "inner",
             path: { name: "NewsList" }
           },
           childs: [
             {
               id: 9,
               type: "submenu",
               index: "addNews",
               lable: "发布新闻",
               icon: "el-icon-circle-plus-outline",
               route: {
                 type: "inner",
                 path: { name: "AddNews" }
               },
               childs: [
                 {
                   id: 10,
                   type: "item",
                   index: "NewsPush",
                   lable: "新闻发布",
                   icon: "el-icon-circle-plus-outline",
                   route: {
                     type: "inner",
                     path: { name: "AddNews" }
                   }
                 }
               ]
             }
           ]
         }
       ]
     }
   ]
 }
]
  1. MenuGroup.vue



  1. subMenu.vue
 
 

  1. MenuItem.vue

 

  1. Menu.vue

 

  1. 效果:
    [Vue]ElementUI 菜单组件封装_第2张图片

你可能感兴趣的:(Vue)