other / mew-iview

Commit ab673ebc6b7864127c0c5fa232fad73a21363cfa

Authored by 梁灏
1 parent 0acdae19

update Menu 

update Menu
Showing 3 changed files with 24 additions and 2 deletions   Show diff stats
Inline Side-by-side
src/components/menu/menu.vue
  Show/Hide comments   View file @ab673eb
... ... @@ -24,7 +24,10 @@
24 24 type: [String, Number]
25 25 },
26 26 openKeys: {
27   - type: Array
  27 + type: Array,
  28 + default () {
  29 + return []
  30 + }
28 31 },
29 32 accordion: {
30 33 type: Boolean,
... ... @@ -81,6 +84,14 @@
81 84 item.active = item.key === this.activeKey;
82 85 }
83 86 })
  87 + },
  88 + updateOpenKeys (key) {
  89 + const index = this.openKeys.indexOf(key);
  90 + if (index > -1) {
  91 + this.openKeys.splice(index, 1);
  92 + } else {
  93 + this.openKeys.push(key);
  94 + }
84 95 }
85 96 },
86 97 compiled () {
... ... @@ -92,6 +103,11 @@
92 103 this.updateActiveKey();
93 104 this.$emit('on-select', key);
94 105 }
  106 + },
  107 + watch: {
  108 + openKeys () {
  109 + this.$emit('on-open-change', this.openKeys);
  110 + }
95 111 }
96 112 }
97 113 </script>
98 114 \ No newline at end of file
... ...
src/components/menu/submenu.vue
  Show/Hide comments   View file @ab673eb
... ... @@ -58,6 +58,7 @@
58 58  
59 59 clearTimeout(this.timeout);
60 60 this.timeout = setTimeout(() => {
  61 + this.$parent.updateOpenKeys(this.key);
61 62 this.opened = true;
62 63 }, 250);
63 64 },
... ... @@ -67,6 +68,7 @@
67 68  
68 69 clearTimeout(this.timeout);
69 70 this.timeout = setTimeout(() => {
  71 + this.$parent.updateOpenKeys(this.key);
70 72 this.opened = false;
71 73 }, 150);
72 74 },
... ... @@ -80,6 +82,7 @@
80 82 });
81 83 }
82 84 this.opened = !opened;
  85 + this.$parent.updateOpenKeys(this.key);
83 86 }
84 87 },
85 88 watch: {
... ...
test/routers/menu.vue
  Show/Hide comments   View file @ab673eb
... ... @@ -19,7 +19,7 @@
19 19 <Menu-item key="4">导航四</Menu-item>
20 20 </Menu>
21 21 <br><br>
22   - <Menu :mode="mode" active-key="1" accordion>
  22 + <Menu :mode="mode" active-key="1" @on-open-change="change">
23 23 <Menu-item key="1">
24 24 <Icon type="ionic"></Icon>
25 25 <span>导航一</span>
... ... @@ -121,6 +121,9 @@
121 121 methods: {
122 122 toggleMode () {
123 123 this.mode = this.mode === 'horizontal' ? 'vertical' : 'horizontal';
  124 + },
  125 + change (d) {
  126 + console.log(d)
124 127 }
125 128 }
126 129 }
... ...