fix(sidebar): 首页在左侧菜单缩小模式下，选择菜单，样式出错 (#389)

Author: vanoneang

src/assets/style/realize/element-variable.scss

@@ -410,45 +410,6 @@ thead tr {
         top: 23px;
       }
     }
-
-    &.third {
-
-      // 3级
-      .el-menu-item {
-        position: relative;
-
-        &:before {
-          content: "";
-          width: 4px;
-          height: 4px;
-          border-radius: 50%;
-          border: 1px solid $submenu-title;
-          position: absolute;
-          left: 65px;
-          top: 23px;
-        }
-      }
-
-      .el-menu-item-group__title {
-        padding: 0;
-      }
-
-      .el-menu-item.is-active {
-        position: relative;
-
-        &:before {
-          content: "";
-          width: 6px;
-          height: 6px;
-          border-radius: 50%;
-          border: none;
-          background: $theme;
-          position: absolute;
-          left: 65px;
-          top: 23px;
-        }
-      }
-    }
   }
 }
 
@@ -457,8 +418,9 @@ thead tr {
   border-right: 1px solid #1d2a60;
 }
 
-.el-menu--vertical .abc {
-  left: 70px !important;
+.el-menu--vertical > .el-menu--popup {
+  max-height: 100vh;
+  overflow-y: auto;
 }
 
 .el-menu--vertical >>> .icon-erjizhibiao {

src/component/layout/sidebar/menu-content.vue

@@ -1,27 +1,25 @@
 <template>
-  <el-submenu
-    v-if="item.children && item.children.length > 0"
-    class="sub-menu-content"
-    :index="item.path"
-    popper-class="abc"
-  >
+  <el-submenu v-if="item.children && item.children.length > 0" :index="item.path" popper-append-to-body>
     <template #title>
-      <menu-content :icon="item.icon" :title="item.title" />
+      <i v-if="!filterIcon(item.icon)" :class="item.icon"></i>
+      <img v-else :src="item.icon" class="img-icon" />
+      <span>{{ item.title }}</span>
     </template>
     <menu-tree v-for="child in item.children" :key="child.path" :item="child" />
   </el-submenu>
 
-  <el-menu-item v-else class="sub-menu-content" :index="item.path" @click="navigateTo(item.path)">
-    <menu-content :icon="item.icon" :title="item.title" />
+  <el-menu-item v-else :index="item.path" @click="navigateTo(item.path)">
+    <i v-if="!filterIcon(item.icon)" :class="item.icon"></i>
+    <img v-else :src="item.icon" class="img-icon" />
+    <template #title
+      ><span class="title">{{ item.title }}</span></template
+    >
   </el-menu-item>
 </template>
 
 <script>
-import MenuContent from './menu-content'
-
 export default {
   name: 'MenuTree',
-  components: { MenuContent },
   props: {
     item: {
       type: Object,
@@ -33,12 +31,31 @@ export default {
     navigateTo(path) {
       this.$router.push({ path })
     },
+    filterIcon(icon) {
+      return icon.indexOf('/') !== -1
+    },
   },
 }
 </script>
 
 <style lang="scss" scoped>
-.sub-menu-content {
+.img-icon {
+  width: 16px;
+  height: 16px;
+  margin-right: 10px;
+  margin-left: 5px;
+  display: inline-block;
+  transform: translateY(21px);
+}
+.iconfont {
+  margin-right: 10px;
+  margin-left: 5px;
+  color: $submenu-title;
+  height: $menuItem-height;
+}
+.title {
+  display: inline-block;
+  width: 110px;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;

src/component/layout/sidebar/menu-tree.vue

@@ -1,5 +1,5 @@
 const Config = {
-  sidebarLevel: 3, // 侧边栏层级限制, 3 表示三级, 可设置 2 和 3
+  sidebarLevel: 3, // 侧边栏层级（无限级）限制, 默认为 3 级，可根据需求自行扩充
   openAutoJumpOut: true, // 是否开启无操作跳出
   defaultRoute: '/about', // 默认打开的路由
   showSidebarSearch: true, // 默认打开侧边栏搜索