修复收缩菜单自定义图标不显示的bug

src/config/index.js

@@ -8,5 +8,5 @@ export default {
    *              如果不使用，则需要在路由中给需要在菜单中展示的路由设置meta: {title: 'xxx'}
    *              用来在菜单中显示文字
    */
-  useI18n: true
+  useI18n: false
 }

src/libs/util.js

@@ -32,19 +32,20 @@ const showThisMenuEle = (item, access) => {
 export const getMenuByRouter = (list, access) => {
   let res = []
   forEach(list, item => {
-    if (item.meta && !item.meta.hideInMenu) {
+    if (!item.meta || (item.meta && !item.meta.hideInMenu)) {
       let obj = {
         icon: (item.meta && item.meta.icon) || '',
         name: item.name,
         meta: item.meta
       }
-      if (hasChild(item) && showThisMenuEle(item, access)) {
+      if ((hasChild(item) || (item.meta && item.meta.showAlways)) && showThisMenuEle(item, access)) {
         obj.children = getMenuByRouter(item.children, access)
       }
-      if (item.meta.href) obj.href = item.meta.href
+      if (item.meta && item.meta.href) obj.href = item.meta.href
       if (showThisMenuEle(item, access)) res.push(obj)
     }
   })
+  console.log(res)
   return res
 }
 

src/router/routers.js

@@ -51,13 +51,28 @@ export default [
       icon: 'ios-book'
     }
   },
+  // {
+  //   path: '/directive',
+  //   name: 'directive',
+  //   meta: {
+  //     hide: true
+  //   },
+  //   component: Main,
+  //   children: [
+  //     {
+  //       path: '/directive_page',
+  //       name: 'directive_page',
+  //       meta: {
+  //         icon: 'ios-navigate',
+  //         title: '指令'
+  //       },
+  //       component: () => import('@/view/directive/directive.vue')
+  //     }
+  //   ]
+  // },
   {
     path: '/join',
     name: 'join',
-    meta: {
-      title: 'QQ群',
-      icon: '_qq'
-    },
     component: Main,
     children: [
       {
@@ -174,7 +189,7 @@ export default [
     component: Main,
     children: [
       {
-        path: '/directive_page',
+        path: 'directive_page',
         name: 'directive_page',
         meta: {
           icon: 'ios-navigate',
@@ -200,7 +215,7 @@ export default [
           icon: 'arrow-graph-up-right',
           title: '二级-1'
         },
-        component: () => import('@/view/multilevel/level-1.vue')
+        component: () => import('@/view/multilevel/level-2-1.vue')
       },
       {
         path: 'level_2_2',
@@ -208,6 +223,7 @@ export default [
         meta: {
           access: ['super_admin'],
           icon: 'arrow-graph-up-right',
+          showAlways: true,
           title: '二级-2'
         },
         component: parentView,
@@ -259,16 +275,25 @@ export default [
   {
     path: '/401',
     name: 'error_401',
+    meta: {
+      hideInMenu: true
+    },
     component: () => import('@/view/error-page/401.vue')
   },
   {
     path: '/500',
     name: 'error_500',
+    meta: {
+      hideInMenu: true
+    },
     component: () => import('@/view/error-page/500.vue')
   },
   {
     path: '*',
     name: 'error_404',
+    meta: {
+      hideInMenu: true
+    },
     component: () => import('@/view/error-page/404.vue')
   }
 ]

src/view/main/components/side-menu/collapsed-menu.vue

@@ -1,10 +1,10 @@
 <template>
   <Dropdown @on-click="handleClick" transer placement="right-start">
-    <a class="drop-menu-a" type="text" :style="{textAlign: !hideTitle ? 'left' : ''}"><Icon :size="rootIconSize" :color="textColor" :type="parentItem.icon"/><span class="menu-title" v-if="!hideTitle">{{ showTitle(parentItem) }}</span><Icon v-if="!hideTitle" :size="10" :color="textColor" type="chevron-right" style="float: right;margin-top: 4px;"/></a>
+    <a class="drop-menu-a" type="text" :style="{textAlign: !hideTitle ? 'left' : ''}"><common-icon :size="rootIconSize" :color="textColor" :type="parentItem.icon"/><span class="menu-title" v-if="!hideTitle">{{ showTitle(parentItem) }}</span><Icon v-if="!hideTitle" :size="10" :color="textColor" type="chevron-right" style="float: right;margin-top: 4px;"/></a>
     <DropdownMenu slot="list">
       <template v-for="child in children">
         <collapsed-menu v-if="showChildren(child)" :icon-size="iconSize" :parent-item="child" :key="`drop-${child.name}`"></collapsed-menu>
-        <DropdownItem v-else :key="`drop-${child.name}`" :name="child.name"><Icon :size="iconSize" :type="child.icon"/><span class="menu-title">{{ showTitle(child) }}</span></DropdownItem>
+        <DropdownItem v-else :key="`drop-${child.name}`" :name="child.name"><common-icon :size="iconSize" :type="child.icon"/><span class="menu-title">{{ showTitle(child) }}</span></DropdownItem>
       </template>
     </DropdownMenu>
   </Dropdown>
@@ -12,6 +12,7 @@
 <script>
 import mixin from './mixin'
 import itemMixin from './item-mixin'
+
 export default {
   name: 'CollapsedMenu',
   mixins: [ mixin, itemMixin ],

src/view/main/components/side-menu/mixin.js

@@ -8,7 +8,7 @@ export default {
       return this.$config.useI18n ? this.$t(item.name) : ((item.meta && item.meta.title) || item.name)
     },
     showChildren (item) {
-      return item.children && item.children.length > 1
+      return item.children && (item.children.length > 1 || (item.meta && item.meta.showAlways))
     },
     getNameOrHref (item, children0) {
       return item.href ? `isTurnByHref_${item.href}` : (children0 ? item.children[0].name : item.name)

src/view/main/components/side-menu/side-menu.vue

@@ -16,8 +16,8 @@
     <div class="menu-collapsed" v-show="collapsed" :list="menuList">
       <template v-for="item in menuList">
         <collapsed-menu v-if="item.children && item.children.length > 1" @on-click="handleSelect" hide-title :root-icon-size="rootIconSize" :icon-size="iconSize" :theme="theme" :parent-item="item" :key="`drop-menu-${item.name}`"></collapsed-menu>
-        <Tooltip v-else :content="item.meta.title || item.children[0].meta.title" placement="right" :key="`drop-menu-${item.name}`">
-          <a @click="handleSelect(getNameOrHref(item, true))" class="drop-menu-a" :style="{textAlign: 'center'}"><Icon :size="rootIconSize" :color="textColor" :type="item.icon || item.children[0].icon"/></a>
+        <Tooltip v-else :content="(item.meta && item.meta.title) || (item.children && item.children[0] && item.children[0].meta.title)" placement="right" :key="`drop-menu-${item.name}`">
+          <a @click="handleSelect(getNameOrHref(item, true))" class="drop-menu-a" :style="{textAlign: 'center'}"><common-icon :size="rootIconSize" :color="textColor" :type="item.icon || (item.children && item.children[0].icon)"/></a>
         </Tooltip>
       </template>
     </div>
@@ -101,7 +101,6 @@ export default {
     }
   },
   mounted () {
-    console.log(this.menuList)
     this.openedNames = getUnion(this.openedNames, this.getOpenedNamesByActiveName(name))
   }
 }

src/view/multilevel/level-2-1.vue

@@ -1,8 +1,8 @@
 <template>
-  <div>level-1</div>
+  <div>level-2-1</div>
 </template>
 <script>
 export default {
-  name: 'level_1'
+  name: 'level_2_1'
 }
 </script>