other / mew-iview

Commit ca60058bf6800d5ee45a1de125adb8e118273ebd

Authored by Aresn
Committed by GitHub
2 parents 1a6046f0 b3b4134d

Merge pull request #3303 from lison16/fixed-menu 

fixed https://github.com/iview/iview/issues/3298
Showing 2 changed files with 79 additions and 51 deletions   Show diff stats
Inline Side-by-side
examples/routers/menu.vue
  Show/Hide comments   View file @ca60058
1 <template> 1 <template>
2 - <Menu active-name="1-2" :open-names="['1']" theme="dark">  
3 - <Submenu name="1">  
4 - <template slot="title">  
5 - <Icon type="ios-analytics"></Icon>  
6 - Navigation One  
7 - </template>  
8 - <MenuGroup title="Item 1">  
9 - <MenuItem name="1-1">Option 1</MenuItem>  
10 - <MenuItem name="1-2">Option 2</MenuItem>  
11 - </MenuGroup>  
12 - <MenuGroup title="Item 2">  
13 - <MenuItem name="1-3">Option 3</MenuItem>  
14 - <MenuItem name="1-4">Option 4</MenuItem>  
15 - </MenuGroup>  
16 - </Submenu>  
17 - <Submenu name="2">  
18 - <template slot="title">  
19 - <Icon type="ios-filing"></Icon>  
20 - Navigation Two  
21 - </template>  
22 - <MenuItem name="2-1">Option 5</MenuItem>  
23 - <MenuItem name="2-2">Option 6</MenuItem>  
24 - <Submenu name="3">  
25 - <template slot="title">Submenu</template>  
26 - <MenuItem name="3-1">Option 7</MenuItem>  
27 - <MenuItem name="3-2">Option 8</MenuItem> 2 + <div>
  3 + <Menu ref="menu" active-name="1-2" :open-names="openNames" theme="dark" accordion @on-open-change="handleOpenChange">
  4 + <Submenu name="1">
  5 + <template slot="title">
  6 + <Icon type="ios-analytics"></Icon>
  7 + Navigation One
  8 + </template>
  9 + <MenuGroup title="Item 1">
  10 + <MenuItem name="1-1">Option 1</MenuItem>
  11 + <MenuItem name="1-2">Option 2</MenuItem>
  12 + </MenuGroup>
  13 + <MenuGroup title="Item 2">
  14 + <MenuItem name="1-3">Option 3</MenuItem>
  15 + <MenuItem name="1-4">Option 4</MenuItem>
  16 + </MenuGroup>
28 </Submenu> 17 </Submenu>
29 - </Submenu>  
30 - <Submenu name="4">  
31 - <template slot="title">  
32 - <Icon type="ios-gear"></Icon>  
33 - Navigation Three  
34 - </template>  
35 - <MenuItem name="4-1">Option 9</MenuItem>  
36 - <MenuItem name="4-2">Option 10</MenuItem>  
37 - <MenuItem name="4-3">Option 11</MenuItem>  
38 - <MenuItem name="4-4">Option 12</MenuItem>  
39 - </Submenu>  
40 - </Menu> 18 + <Submenu name="2">
  19 + <template slot="title">
  20 + <Icon type="ios-filing"></Icon>
  21 + Navigation Two
  22 + </template>
  23 + <MenuItem name="2-1">Option 5</MenuItem>
  24 + <MenuItem name="2-2">Option 6</MenuItem>
  25 + <Submenu name="3">
  26 + <template slot="title">Submenu</template>
  27 + <MenuItem name="3-1">Option 7</MenuItem>
  28 + <MenuItem name="3-2">Option 8</MenuItem>
  29 + </Submenu>
  30 + <Submenu name="4">
  31 + <template slot="title">Submenu</template>
  32 + <MenuItem name="4-1">Option 7</MenuItem>
  33 + <MenuItem name="4-2">Option 8</MenuItem>
  34 + </Submenu>
  35 + </Submenu>
  36 + <Submenu name="5">
  37 + <template slot="title">
  38 + <Icon type="ios-gear"></Icon>
  39 + Navigation Three
  40 + </template>
  41 + <MenuItem name="5-1">Option 9</MenuItem>
  42 + <MenuItem name="5-2">Option 10</MenuItem>
  43 + <MenuItem name="5-3">Option 11</MenuItem>
  44 + <MenuItem name="5-4">Option 12</MenuItem>
  45 + </Submenu>
  46 + </Menu>
  47 + <Button @click="setOpenNames">ไฟฎๆ”นๅฑ•ๅผ€ๆ•ฐ็ป„</Button>
  48 + </div>
41 </template> 49 </template>
42 <script> 50 <script>
43 export default { 51 export default {
44 - 52 + data () {
  53 + return {
  54 + openNames: ['1']
  55 + };
  56 + },
  57 + methods: {
  58 + handleOpenChange (name) {
  59 + console.log(name)
  60 + },
  61 + setOpenNames () {
  62 + this.openNames = ['2', '3'];
  63 + this.$nextTick(() => {
  64 + this.$refs.menu.updateOpened();
  65 + })
  66 + }
  67 + }
45 } 68 }
46 </script> 69 </script>
src/components/menu/menu.vue
  Show/Hide comments   View file @ca60058
@@ -43,7 +43,8 @@ @@ -43,7 +43,8 @@
43 }, 43 },
44 data () { 44 data () {
45 return { 45 return {
46 - currentActiveName: this.activeName 46 + currentActiveName: this.activeName,
  47 + openedNames: []
47 }; 48 };
48 }, 49 },
49 computed: { 50 computed: {
@@ -76,36 +77,40 @@ @@ -76,36 +77,40 @@
76 this.broadcast('MenuItem', 'on-update-active-name', this.currentActiveName); 77 this.broadcast('MenuItem', 'on-update-active-name', this.currentActiveName);
77 }, 78 },
78 updateOpenKeys (name) { 79 updateOpenKeys (name) {
79 - const index = this.openNames.indexOf(name);  
80 - if (index > -1) {  
81 - this.openNames.splice(index, 1); 80 + let names = [...this.openedNames];
  81 + const index = names.indexOf(name);
  82 + if (index >= 0) {
  83 + names.splice(index, 1);
82 } else { 84 } else {
83 - this.openNames.push(name);  
84 if (this.accordion) { 85 if (this.accordion) {
85 - let currentSubmenu = {}; 86 + let currentSubmenu = null;
86 findComponentsDownward(this, 'Submenu').forEach(item => { 87 findComponentsDownward(this, 'Submenu').forEach(item => {
87 if (item.name === name) currentSubmenu = item; 88 if (item.name === name) currentSubmenu = item;
88 }); 89 });
89 findBrothersComponents(currentSubmenu, 'Submenu').forEach(item => { 90 findBrothersComponents(currentSubmenu, 'Submenu').forEach(item => {
90 - let index = this.openNames.indexOf(item.name);  
91 - this.openNames.splice(index, index >= 0 ? 1 : 0); 91 + let i = names.indexOf(item.name);
  92 + if (i >= 0) names.splice(i, 1);
92 }); 93 });
93 - this.openNames.push(name); 94 + names.push(name);
94 } 95 }
95 } 96 }
  97 + this.openedNames = names;
  98 + this.$emit('on-open-change', this.openedNames);
96 }, 99 },
97 updateOpened () { 100 updateOpened () {
98 const items = findComponentsDownward(this, 'Submenu'); 101 const items = findComponentsDownward(this, 'Submenu');
99 102
100 if (items.length) { 103 if (items.length) {
101 items.forEach(item => { 104 items.forEach(item => {
102 - if (this.openNames.indexOf(item.name) > -1) item.opened = true; 105 + if (this.openedNames.indexOf(item.name) > -1) item.opened = true;
  106 + else item.opened = false;
103 }); 107 });
104 } 108 }
105 } 109 }
106 }, 110 },
107 mounted () { 111 mounted () {
108 this.updateActiveName(); 112 this.updateActiveName();
  113 + this.openedNames = [...this.openNames];
109 this.updateOpened(); 114 this.updateOpened();
110 this.$on('on-menu-item-select', (name) => { 115 this.$on('on-menu-item-select', (name) => {
111 this.currentActiveName = name; 116 this.currentActiveName = name;
@@ -113,8 +118,8 @@ @@ -113,8 +118,8 @@
113 }); 118 });
114 }, 119 },
115 watch: { 120 watch: {
116 - openNames () {  
117 - this.$emit('on-open-change', this.openNames); 121 + openNames (names) {
  122 + this.openedNames = names;
118 }, 123 },
119 activeName (val) { 124 activeName (val) {
120 this.currentActiveName = val; 125 this.currentActiveName = val;