tj

src/layout/header-aside/components/components/menu-item/index copy.vue

+<template>
+  <el-menu-item :index="menu.url || menu.path || uniqueId">
+    <!-- <i v-if="menu.icon" :class="`iconfont icon-${menu.icon}`"></i> -->
+    <i v-if="menu.icon && menu.icon == 'home'" class="base_home">
+      <img src="../../../imgs/home.png" width="16" style="margin-top: -5px" />
+    </i>
+    <d2-icon-svg v-else-if="menu.iconSvg" :name="menu.iconSvg" />
+    <span v-else>&emsp;</span>
+    <span slot="title">{{ menu.title || menu.name || '未命名菜单' }}</span>
+  </el-menu-item>
+</template>
+
+<script>
+import { uniqueId } from 'lodash'
+export default {
+  name: 'd2-layout-header-aside-menu-item',
+  props: {
+    menu: {
+      type: Object,
+      required: false,
+      default: () => {}
+    }
+  },
+  data() {
+    return {
+      uniqueId: uniqueId('d2-menu-empty-')
+    }
+  }
+}
+</script>
+<style>
+.el-menu-item:hover .base_home img {
+  content: url(../../../imgs/home2.png);
+}
+</style>

src/layout/header-aside/components/components/menu-item/index.vue

 <template>
   <el-menu-item :index="menu.url || menu.path || uniqueId">
-    <!-- <i v-if="menu.icon" :class="`iconfont icon-${menu.icon}`"></i> -->
-    <i v-if="menu.icon && menu.icon == 'home'" class="base_home">
+    <i v-if="menu.icon" :class="`iconfont icon-${menu.icon}`"></i>
+    <!-- <i v-if="menu.icon && menu.icon == 'home'" class="base_home">
       <img src="../../../imgs/home.png" width="16" style="margin-top: -5px" />
-    </i>
+    </i> -->
     <d2-icon-svg v-else-if="menu.iconSvg" :name="menu.iconSvg" />
     <span v-else>&emsp;</span>
     <span slot="title">{{ menu.title || menu.name || '未命名菜单' }}</span>
@@ -29,7 +29,7 @@ export default {
 }
 </script>
 <style>
-.el-menu-item:hover .base_home img {
+/* .el-menu-item:hover .base_home img {
   content: url(../../../imgs/home2.png);
-}
+} */
 </style>

src/layout/header-aside/components/components/menu-sub/index copy.vue

+<template>
+  <el-submenu :index="menu.path || menu.id || uniqueId">
+    <template slot="title">
+      <i v-if="menu.icon && menu.icon == 'shebei'" class="base_shebei">
+        <img
+          src="../../../imgs/shebei.png"
+          width="14"
+          style="margin-top: -5px"
+        />
+      </i>
+      <i v-if="menu.icon && menu.icon == 'tongji'" class="base_tongji">
+        <img
+          src="../../../imgs/tongji.png"
+          width="14"
+          style="margin-top: -5px"
+        />
+      </i>
+      <i v-if="menu.icon && menu.icon == 'fenxi'" class="base_fenxi">
+        <img
+          src="../../../imgs/fenxi.png"
+          width="14"
+          style="margin-top: -5px"
+        />
+      </i>
+      <i v-if="menu.icon && menu.icon == 'xitong'" class="base_xitong">
+        <img
+          src="../../../imgs/xitong.png"
+          width="14"
+          style="margin-top: -5px"
+        />
+      </i>
+      <d2-icon-svg v-else-if="menu.iconSvg" :name="menu.iconSvg" />
+      <span v-else>&emsp;</span>
+      <span slot="title">{{ menu.name }}</span>
+    </template>
+
+    <template v-for="(child, childIndex) in menu.list">
+      <d2-layout-header-aside-menu-item
+        v-if="child.list.length == 0"
+        :menu="child"
+        :key="childIndex"
+      />
+      <d2-layout-header-aside-menu-sub
+        v-else
+        :menu="{ ...child }"
+        :key="childIndex"
+      />
+    </template>
+  </el-submenu>
+</template>
+
+<script>
+import { uniqueId } from 'lodash'
+// 组件
+import d2LayoutMainMenuItem from '../menu-item'
+
+export default {
+  name: 'd2-layout-header-aside-menu-sub',
+  components: {
+    'd2-layout-header-aside-menu-item': d2LayoutMainMenuItem
+  },
+  props: {
+    menu: {
+      type: Object,
+      required: false,
+      default: () => {}
+    }
+  },
+  data() {
+    return {
+      uniqueId: uniqueId('d2-menu-empty-')
+    }
+  }
+}
+</script>
+
+<style>
+.el-submenu:hover .el-submenu__title .base_shebei img {
+  content: url(../../../imgs/shebei2.png);
+}
+.el-submenu:hover .el-submenu__title .base_tongji img {
+  content: url(../../../imgs/tongji2.png);
+}
+.el-submenu:hover .el-submenu__title .base_fenxi img {
+  content: url(../../../imgs/fenxi2.png);
+}
+.el-submenu:hover .el-submenu__title .base_xitong img {
+  content: url(../../../imgs/xitong2.png);
+}
+/* .el-submenu:hover .el-submenu__title img {
+  content: url(../../../imgs/xitong2.png);
+} */
+</style>

src/layout/header-aside/components/components/menu-sub/index.vue

 <template>
   <el-submenu :index="menu.path || menu.id || uniqueId">
     <template slot="title">
-      <i v-if="menu.icon && menu.icon == 'shebei'" class="base_shebei">
-        <img
-          src="../../../imgs/shebei.png"
-          width="14"
-          style="margin-top: -5px"
-        />
-      </i>
-      <i v-if="menu.icon && menu.icon == 'tongji'" class="base_tongji">
-        <img
-          src="../../../imgs/tongji.png"
-          width="14"
-          style="margin-top: -5px"
-        />
-      </i>
-      <i v-if="menu.icon && menu.icon == 'fenxi'" class="base_fenxi">
-        <img
-          src="../../../imgs/fenxi.png"
-          width="14"
-          style="margin-top: -5px"
-        />
-      </i>
-      <i v-if="menu.icon && menu.icon == 'xitong'" class="base_xitong">
-        <img
-          src="../../../imgs/xitong.png"
-          width="14"
-          style="margin-top: -5px"
-        />
-      </i>
+      <i v-if="menu.icon" :class="`iconfont icon-${menu.icon}`"></i>
       <d2-icon-svg v-else-if="menu.iconSvg" :name="menu.iconSvg" />
       <span v-else>&emsp;</span>
       <span slot="title">{{ menu.name }}</span>
@@ -75,7 +48,7 @@ export default {
 </script>
 
 <style>
-.el-submenu:hover .el-submenu__title .base_shebei img {
+/* .el-submenu:hover .el-submenu__title .base_shebei img {
   content: url(../../../imgs/shebei2.png);
 }
 .el-submenu:hover .el-submenu__title .base_tongji img {
@@ -86,8 +59,5 @@ export default {
 }
 .el-submenu:hover .el-submenu__title .base_xitong img {
   content: url(../../../imgs/xitong2.png);
-}
-/* .el-submenu:hover .el-submenu__title img {
-  content: url(../../../imgs/xitong2.png);
 } */
 </style>