update Menu

update Menu

src/components/menu/menu.vue

@@ -24,7 +24,10 @@
                 type: [String, Number]
             },
             openKeys: {
-                type: Array
+                type: Array,
+                default () {
+                    return []
+                }
             },
             accordion: {
                 type: Boolean,
@@ -81,6 +84,14 @@
                         item.active = item.key === this.activeKey;
                     }
                 })
+            },
+            updateOpenKeys (key) {
+                const index = this.openKeys.indexOf(key);
+                if (index > -1) {
+                    this.openKeys.splice(index, 1);
+                } else {
+                    this.openKeys.push(key);
+                }
             }
         },
         compiled () {
@@ -92,6 +103,11 @@
                 this.updateActiveKey();
                 this.$emit('on-select', key);
             }
+        },
+        watch: {
+            openKeys () {
+                this.$emit('on-open-change', this.openKeys);
+            }
         }
     }
 </script>

src/components/menu/submenu.vue

@@ -58,6 +58,7 @@
 
                 clearTimeout(this.timeout);
                 this.timeout = setTimeout(() => {
+                    this.$parent.updateOpenKeys(this.key);
                     this.opened = true;
                 }, 250);
             },
@@ -67,6 +68,7 @@
 
                 clearTimeout(this.timeout);
                 this.timeout = setTimeout(() => {
+                    this.$parent.updateOpenKeys(this.key);
                     this.opened = false;
                 }, 150);
             },
@@ -80,6 +82,7 @@
                     });
                 }
                 this.opened = !opened;
+                this.$parent.updateOpenKeys(this.key);
             }
         },
         watch: {

test/routers/menu.vue

@@ -19,7 +19,7 @@
             <Menu-item key="4">导航四</Menu-item>
         </Menu>
         <br><br>
-        <Menu :mode="mode" active-key="1" accordion>
+        <Menu :mode="mode" active-key="1" @on-open-change="change">
             <Menu-item key="1">
                 <Icon type="ionic"></Icon>
                 <span>导航一</span>
@@ -121,6 +121,9 @@
         methods: {
             toggleMode () {
                 this.mode = this.mode === 'horizontal' ? 'vertical' : 'horizontal';
+            },
+            change (d) {
+                console.log(d)
             }
         }
     }