左侧菜单优化

web/src/view/layout/aside/index.vue

@@ -1,26 +1,28 @@
 <template>
   <div>
-    <el-scrollbar style="height:calc(100vh)">
-      <el-menu
-        class="el-menu-vertical"
-        :collapse="isCollapse"
-        :collapse-transition="true"
-        :default-active="active"
-        @select="selectMenuItem"
-        active-text-color="#fff"
-        text-color="rgb(191, 203, 217)"
-        unique-opened
-      >
-        <template v-for="item in asyncRouters[0].children">
-          <aside-component :key="item.name" :routerInfo="item" v-if="!item.hidden" />
-        </template>
-      </el-menu>
+    <el-scrollbar style="height:calc(100vh - 64px)">
+      <transition :duration="{ enter: 800, leave: 100 }" mode="out-in" name="el-fade-in-linear">
+        <el-menu
+          :collapse="isCollapse"
+          :collapse-transition="true"
+          :default-active="active"
+          @select="selectMenuItem"
+          active-text-color="#fff"
+          class="el-menu-vertical"
+          text-color="rgb(191, 203, 217)"
+          unique-opened
+        >
+          <template v-for="item in asyncRouters[0].children">
+            <aside-component :key="item.name" :routerInfo="item" v-if="!item.hidden" />
+          </template>
+        </el-menu>
+      </transition>
     </el-scrollbar>
   </div>
 </template>
 
 <script>
-import { mapGetters,mapMutations } from 'vuex'
+import { mapGetters, mapMutations } from 'vuex'
 import AsideComponent from '@/view/layout/aside/asideComponent'
 export default {
   name: 'Aside',
@@ -31,7 +33,7 @@ export default {
     }
   },
   methods: {
-    ...mapMutations("history",["addHistory"]),
+    ...mapMutations('history', ['addHistory']),
     selectMenuItem(index) {
       if (index === this.$route.name) return
       this.$router.push({ name: index })
@@ -39,7 +41,6 @@ export default {
   },
   computed: {
     ...mapGetters('router', ['asyncRouters'])
-
   },
   components: {
     AsideComponent
@@ -47,17 +48,16 @@ export default {
   created() {
     this.active = this.$route.name
     let screenWidth = document.body.clientWidth
-     if(screenWidth<1000){
-       this.isCollapse = !this.isCollapse
-      }
+    if (screenWidth < 1000) {
+      this.isCollapse = !this.isCollapse
+    }
 
-     this.$bus.on('collapse', (item) => {
+    this.$bus.on('collapse', item => {
       this.isCollapse = item
     })
-
   },
-  watch:{
-    $route(){
+  watch: {
+    $route() {
       this.active = this.$route.name
     }
   },

web/src/view/layout/index.vue

@@ -319,8 +319,15 @@ $mainHight: 100vh;
       &:not(.el-menu--collapse) {
         width: 220px;
       }
+      
     }
-
+.el-menu--collapse{
+        li{
+          .el-tooltip,.el-submenu__title{
+            padding:0px 15px !important;
+          }
+        }
+      }
     &::-webkit-scrollbar {
       display: none;
     }