Pārlūkot izejas kodu

perf: 优化 collapsed 为 true 的时候,左侧菜单栏会弹出来的问题

李培汉 5 gadi atpakaļ
vecāks
revīzija
dc8fd96bc6
2 mainītis faili ar 13 papildinājumiem un 2 dzēšanām
  1. 1 1
      src/layouts/BasicLayout.vue
  2. 12 1
      src/layouts/SiderMenu.vue

+ 1 - 1
src/layouts/BasicLayout.vue

@@ -13,7 +13,7 @@
           <logo></logo>
           <h1>Ant Design Pro</h1>
         </div>
-        <SiderMenu :theme="navTheme" />
+        <SiderMenu :theme="navTheme" :collapsed="collapsed" />
       </a-layout-sider>
       <a-layout>
         <a-layout-header style="background: #fff; padding: 0">

+ 12 - 1
src/layouts/SiderMenu.vue

@@ -33,6 +33,10 @@ export default {
     theme: {
       type: String,
       default: "dark"
+    },
+    collapsed: {
+      type: Boolean,
+      default: false
     }
   },
   components: {
@@ -42,6 +46,14 @@ export default {
     "$route.path": function(val) {
       this.selectedKeys = this.selectedKeysMap[val];
       this.openKeys = this.collapsed ? [] : this.openKeysMap[val];
+    },
+    collapsed(val) {
+      if (val) {
+        this.cacheOpenKeys = this.openKeys;
+        this.openKeys = [];
+      } else {
+        this.openKeys = this.cacheOpenKeys;
+      }
     }
   },
   data() {
@@ -49,7 +61,6 @@ export default {
     this.openKeysMap = {};
     const menuData = this.getMenuData(this.$router.options.routes);
     return {
-      collapsed: false,
       menuData,
       selectedKeys: this.selectedKeysMap[this.$route.path],
       openKeys: this.collapsed ? [] : this.openKeysMap[this.$route.path]