二级侧边栏多级显示

src/components/home/ContainerAside.vue

@@ -1,9 +1,10 @@
 <script>
+import {requireImg} from "@/utils/requireImg";
 
 export default {
   data() {
     return {
-      title: '',
+      selectedKeys: [],
       highLight: {backgroundColor: '#e9f6fd'},
       routers: [],
       menuList: [],
@@ -12,49 +13,37 @@ export default {
   },
   mounted() {
     let app = this;
-    // let ele = document.getElementsByClassName('home-page')[0];
-    // this.$util.eleResizeListener(ele, function () {
-    //   let height = ele.clientHeight;
-    //   app.height = height+'px'
-    // })
-
     this.routers = this.$router.options.routes;
-    this.$nextTick(()=>{
+    this.$nextTick(() => {
       app.getCurrMenuList()
     })
 
   },
   methods: {
+    requireImg,
     getCurrMenuList() {
       let arr = this.$route.matched;
-      let route = this.routers;
-      let num = arr.length-1;
-      if (arr.length===2) {
-        num = 2
-      }
-      for (let i = 0; i < num; i++) {
-        let obj = route.find((e) => (e.name == arr[i].name));
+      let route = this.routers[0].children;
+      if (arr.length>1) {
+        let obj = route.find((e) => (e.path == arr[1].path));
         route = obj.children;
-        this.title = obj.meta.breadcrumb;
       }
       this.menuList = JSON.parse(JSON.stringify(route))
-      if (this.menuList.length>0 && arr.length<=2) {
-        this.handleClick(this.menuList[0])
-      } else {
-        for (let obj of this.menuList) {
-          obj.selected = false;
-          if (obj.path == this.$route.path) {
-            obj.selected = true;
-          }
+      this.selectedKeys = [];
+      if (arr.length>2) {
+        for (let i = 0; i < arr.length; i++) {
+          this.selectedKeys.push(arr[i].path)
+        }
+      } else if (arr.length===2) {
+        if (this.menuList.length>0 && !this.menuList[0].children) {
+          this.handleClick(this.menuList[0]);
+          this.selectedKeys.push(this.menuList[0].path)
         }
       }
     },
     handleClick(item) {
-      for (let obj of this.menuList) {
-        obj.selected = false;
-      }
-      item.selected = true;
-      this.$router.push(item.path)
+      let path = item.path?item.path:item.key
+      this.$router.push({path: path})
       this.$forceUpdate()
     }
   }
@@ -63,43 +52,82 @@ export default {
 
 <template>
   <div class="containerAside" :style="{height: '100%'}">
-    <div class="containerAside-title">
-      {{ title }}
-    </div>
-    <div class="containerAside-item" :style="item.selected?highLight:{}" v-for="item in menuList" :key="item.name" @click="handleClick(item)">
-      {{ item.meta.breadcrumb }}
-    </div>
+    <a-menu
+        style="width: 100%;padding-top: 8px;height: 100%"
+        mode="inline"
+        theme="dark"
+        v-model:selectedKeys="selectedKeys"
+        @click="handleClick"
+    >
+      <template v-for="item in menuList">
+        <a-menu-item  class="menuItem" :key="item.path" :route="item.key" v-if="!item.children">
+        <span class="anticon" style="vertical-align: text-top">
+          <a-avatar class="function-avatar" shape="square" :size="20" :src="requireImg(item.icon)"></a-avatar>
+        </span>
+          <span >
+            {{ item.meta.breadcrumb }}
+          </span>
+        </a-menu-item>
+
+        <a-sub-menu :key="item.name" v-else>
+          <template #title>
+            <span class="anticon" style="vertical-align: text-top">
+          <a-avatar class="function-avatar" shape="square" :size="20" :src="requireImg(item.icon)"></a-avatar>
+        </span>
+            <span>{{ item.meta.breadcrumb }}</span>
+          </template>
+          <a-menu-item v-for="subItem in item.children" :key="subItem.path" :route="subItem.path">
+            <span class="anticon" style="vertical-align: text-top">
+          <a-avatar class="function-avatar" shape="square" :size="20" :src="requireImg(item.icon)"></a-avatar>
+        </span>
+            <span>{{ subItem.meta.breadcrumb }}</span>
+          </a-menu-item>
+        </a-sub-menu>
+      </template>
+
+    </a-menu>
   </div>
 </template>
 
 <style lang="less" scoped>
+@menu-dark-bg: #ffffff;
+@menu-dark-submenu-bg: #ffffff;
+@menu-dark-color: #808080;
+@menu-dark-arrow-color: #808080;
+@menu-dark-highlight-color: #808080;
+@menu-dark-item-active-bg: #e5f4ff;
+@menu-dark-selected-item-icon-color: #808080;
+@menu-dark-selected-item-text-color: #808080;
 .containerAside {
-  width: 220px;
+  width: 170px;
   height: 100%;
   border-right: 1px solid #eeeeee;
   display: inline-block;
   vertical-align: top;
-  .containerAside-title {
-    text-align: center;
-    height: 60px;
-    line-height: 60px;
-    width: 100%;
-    background-color: #d8d8d8;
-    cursor: default;
+
+  .menuItem {
+    margin: 15px 0;
+  }
+  /deep/ .ant-menu-sub {
+    box-shadow: none !important;
+    background-color: white;
+    margin: 0 !important;
+  }
+  /deep/ .ant-menu-item-selected {
+    color: @menu-dark-selected-item-text-color !important;
   }
-  .containerAside-item {
-    text-align: center;
-    line-height: 50px;
-    height: 50px;
-    width: 100%;
-    margin: 8px 0;
-    cursor: pointer;
+  /deep/ .ant-menu-dark .ant-menu-submenu-title:hover {
+    color: @menu-dark-selected-item-text-color;
   }
-  .containerAside-item:hover {
-    background-color: #eeeeee;
+  .ant-menu-inline-collapsed > .ant-menu-item {
+    padding: 0 !important;
+    margin-left: 0 !important;
+    padding-left: 33% !important;
   }
-  .containerAside-item .selected {
-    background-color: #e9f6fd;
+  /deep/ .ant-menu-inline-collapsed > .ant-menu-item-group > .ant-menu-item-group-list > .ant-menu-item {
+    padding: 0 !important;
+    margin-left: 0 !important;
+    padding-left: 33% !important;
   }
 }
 </style>

src/components/home/HomeAside.vue

@@ -8,6 +8,8 @@ export default {
   },
   data() {
     return {
+      selectedKey: [],
+      iconVerticalAlign: '',
       asideStyle: {},
       menuList,
     }
@@ -33,33 +35,35 @@ export default {
   methods: {
     requireImg,
     suitHeight(val) {
+      this.getCurrRoute()
       this.$nextTick(() => {
+        let height = document.getElementsByClassName('home')[0].clientHeight
+        this.asideStyle = { height: `${height - 60}px` }
+        if (val)
+          this.asideStyle.width = '60px'
         if (this.collapse) {
           document.getElementsByClassName("aside-collapse")[0].style.textAlign = 'center'
           document.getElementsByClassName("aside-collapse")[0].style.marginLeft = '0'
+          this.iconVerticalAlign = '';
         } else {
           document.getElementsByClassName("aside-collapse")[0].style.textAlign = ''
           document.getElementsByClassName("aside-collapse")[0].style.marginLeft = '5%'
+          this.iconVerticalAlign = 'text-top';
         }
-        let height = document.getElementsByClassName('home')[0].clientHeight
-        this.asideStyle = { height: `${height - 60}px` }
-        if (val)
-          this.asideStyle.width = '60px'
       })
     },
-    handleSelected(item) {
-      if (item.key=='nav') {
-        this.$router.push({name: 'nav'})
-      } else {
-        if (item && item.key!=='') {
-          let obj = this.menuList[item.key]
-          this.$router.push({path: obj.router})
-        } else {
-          this.$router.push({name: 'empty'})
+    getCurrRoute() {
+      this.$nextTick(()=>{
+        if (this.$route.matched.length>1) {
+          this.selectedKey = [this.$route.matched[1].path+'']
         }
-      }
+        this.$forceUpdate()
+      })
 
     },
+    handleSelected(item) {
+      this.$router.push({path: item.key})
+    },
   },
 }
 </script>
@@ -70,12 +74,13 @@ export default {
       class="menu"
       theme="dark"
       :style="asideStyle"
-      :default-selected-keys="['1']"
+      v-model:selectedKeys="selectedKey"
       mode="inline"
       @select="handleSelected"
     >
       <a-menu-item-group key="g1">
         <template slot="title">
+          <div style="height: 12px"></div>
           <div class="aside-collapse" style="color: white; cursor: pointer;margin-left: 5%" @click="toggleCollapse">
             <a-icon style="font-size: 18px;vertical-align: text-top" type="menu-fold" v-if="!collapse" />
             <a-icon style="font-size: 18px;vertical-align: text-top;" type="menu-unfold" v-if="collapse" />
@@ -83,12 +88,11 @@ export default {
           </div>
         </template>
       </a-menu-item-group>
-      <!--<a-menu-item :disabled="false">123</a-menu-item>-->
-      <a-menu-item v-for="(item,index) in menuList" :key="index" :route="item.key">
-        <span class="anticon" style="vertical-align: middle">
+      <a-menu-item v-for="item in menuList" :key="item.router" >
+        <span class="anticon" :style="{verticalAlign: iconVerticalAlign}">
           <a-avatar class="function-avatar" shape="square" :size="20" :src="requireImg(item.icon)"></a-avatar>
         </span>
-        <span style="vertical-align: sub">
+        <span >
             {{ item.name }}
           </span>
       </a-menu-item>

src/data/json/menuList.json

@@ -121,7 +121,7 @@
   },
   {
     "name": "智慧安防",
-    "router": "",
+    "router": "/security",
     "icon": "aside/security.png",
     "children": [
       {
@@ -143,7 +143,7 @@
   },
   {
     "name": "智慧场景",
-    "router": "",
+    "router": "/scene",
     "icon": "aside/scene.png",
     "children": [
       {
@@ -165,7 +165,7 @@
   },
   {
     "name": "数据报表",
-    "router": "",
+    "router": "/report",
     "icon": "aside/report.png",
     "children": [
       {
@@ -182,7 +182,7 @@
   },
   {
     "name": "权限下达",
-    "router": "",
+    "router": "/auth",
     "icon": "aside/auth.png",
     "children": [
       {

src/style/common.css

@@ -1,5 +1,5 @@
 .pageContainer-body {
-  width: calc(100% - 220px);
+  width: calc(100% - 175px);
   height: 100%;
   display: inline-block;
 

src/views/HomeView.vue

@@ -9,7 +9,7 @@
         <a-layout-sider
           v-model="collapse"
           :trigger="null"
-          width="200"
+          width="160"
           style="background: #fff"
           :collapsible="true"
           :collapsed-width="60"
@@ -52,6 +52,9 @@ export default {
   },
   mounted() {
     this.suitHeight();
+    if (this.$route.matched.length===1) {
+      this.$router.push({path: '/dashboard'})
+    }
   },
   methods: {
     suitHeight() {