chenhaodong / mew-iview

Commit e549c92b1dc3bc63cb3ca45be1ae278ebf80a8b4

Authored by zhigang.li
1 parent cbff5e36

fixed https://github.com/iview/iview/issues/3733

Showing 2 changed files with 77 additions and 11 deletions   Show diff stats
Inline Side-by-side
examples/routers/menu.vue
  Show/Hide comments   View file @e549c92
@@ -50,8 +50,53 @@ @@ -50,8 +50,53 @@
50 <menu-item v-else :name="`${item.name}`" :key="`menu-${item.name}`">{{ item.name }}</menu-item> 50 <menu-item v-else :name="`${item.name}`" :key="`menu-${item.name}`">{{ item.name }}</menu-item>
51 </template> 51 </template>
52 </Menu> 52 </Menu>
53 - <Button @click="setOpenNames">修改展开数组</Button>  
54 <Button @click="addNewItem">添加菜单项</Button> --> 53 <Button @click="addNewItem">添加菜单项</Button> -->
  54 + <Button @click="changeActive">修改激活项</Button>
  55 + <Button @click="setOpenNames">修改展开数组</Button>
  56 + <Menu mode="horizontal" theme="light" :active-name="activeName" @on-open-change="hc">
  57 + <MenuItem name="1">
  58 + <Icon type="ios-paper"></Icon>
  59 + 内容管理
  60 + </MenuItem>
  61 + <MenuItem name="2">
  62 + <Icon type="ios-people"></Icon>
  63 + 用户管理
  64 + </MenuItem>
  65 + <Submenu name="3">
  66 + <template slot="title">
  67 + <Icon type="stats-bars"></Icon>
  68 + 统计分析
  69 + </template>
  70 + <MenuGroup title="使用">
  71 + <MenuItem name="3-1">新增和启动</MenuItem>
  72 + <MenuItem name="3-2">活跃分析</MenuItem>
  73 + <MenuItem name="3-3">时段分析</MenuItem>
  74 + </MenuGroup>
  75 + <MenuGroup title="留存">
  76 + <MenuItem name="3-4">用户留存</MenuItem>
  77 + <MenuItem name="3-5">流失用户</MenuItem>
  78 + </MenuGroup>
  79 + </Submenu>
  80 + <Submenu name="4">
  81 + <template slot="title">
  82 + <Icon type="stats-bars"></Icon>
  83 + 统计分析2
  84 + </template>
  85 + <MenuGroup title="使用2">
  86 + <MenuItem name="4-1">新增和启动2</MenuItem>
  87 + <MenuItem name="4-2">活跃分析2</MenuItem>
  88 + <MenuItem name="4-3">时段分析2</MenuItem>
  89 + </MenuGroup>
  90 + <MenuGroup title="留存2">
  91 + <MenuItem name="4-4">用户留存2</MenuItem>
  92 + <MenuItem name="4-5">流失用户2</MenuItem>
  93 + </MenuGroup>
  94 + </Submenu>
  95 + <MenuItem name="5">
  96 + <Icon type="settings"></Icon>
  97 + 综合设置
  98 + </MenuItem>
  99 + </Menu>
55 </div> 100 </div>
56 </template> 101 </template>
57 <script> 102 <script>
@@ -129,7 +174,8 @@ import custemMenuItem from &#39;./custem-menu-item.vue&#39; @@ -129,7 +174,8 @@ import custemMenuItem from &#39;./custem-menu-item.vue&#39;
129 } 174 }
130 ] 175 ]
131 } 176 }
132 - ] 177 + ],
  178 + activeName: '1'
133 }; 179 };
134 }, 180 },
135 methods: { 181 methods: {
@@ -151,6 +197,12 @@ import custemMenuItem from &#39;./custem-menu-item.vue&#39; @@ -151,6 +197,12 @@ import custemMenuItem from &#39;./custem-menu-item.vue&#39;
151 } 197 }
152 ] 198 ]
153 }) 199 })
  200 + },
  201 + changeActive () {
  202 + this.activeName = String(Number(this.activeName) + 1)
  203 + },
  204 + hc (data) {
  205 + console.log(data);
154 } 206 }
155 } 207 }
156 } 208 }
src/components/menu/menu.vue
  Show/Hide comments   View file @e549c92
@@ -80,23 +80,37 @@ @@ -80,23 +80,37 @@
80 let names = [...this.openedNames]; 80 let names = [...this.openedNames];
81 const index = names.indexOf(name); 81 const index = names.indexOf(name);
82 if (index >= 0) { 82 if (index >= 0) {
83 - names.splice(index, 1); 83 + let currentSubmenu = null;
  84 + findComponentsDownward(this, 'Submenu').forEach(item => {
  85 + if (item.name === name) {
  86 + currentSubmenu = item;
  87 + item.opened = false;
  88 + }
  89 + });
  90 + findComponentsDownward(currentSubmenu, 'Submenu').forEach(item => {
  91 + item.opened = false;
  92 + });
84 } else { 93 } else {
85 - if (this.accordion) { 94 + if (this.mode === 'horizontal' && this.accordion) {
86 let currentSubmenu = null; 95 let currentSubmenu = null;
87 - names = [];  
88 findComponentsDownward(this, 'Submenu').forEach(item => { 96 findComponentsDownward(this, 'Submenu').forEach(item => {
89 - if (item.name === name) currentSubmenu = item; 97 + if (item.name === name) {
  98 + currentSubmenu = item;
  99 + item.opened = true;
  100 + }
90 }); 101 });
91 findComponentsUpward(currentSubmenu, 'Submenu').forEach(item => { 102 findComponentsUpward(currentSubmenu, 'Submenu').forEach(item => {
92 - names.push(item.name); 103 + item.opened = true;
  104 + });
  105 + } else {
  106 + findComponentsDownward(this, 'Submenu').forEach(item => {
  107 + if (item.name === name) item.opened = true;
93 }); 108 });
94 } 109 }
95 - names.push(name);  
96 } 110 }
97 - this.openedNames = names;  
98 - this.updateOpened();  
99 - this.$emit('on-open-change', this.openedNames); 111 + let openedNames = findComponentsDownward(this, 'Submenu').filter(item => item.opened).map(item => item.name);
  112 + this.openedNames = [...openedNames];
  113 + this.$emit('on-open-change', openedNames);
100 }, 114 },
101 updateOpened () { 115 updateOpened () {
102 const items = findComponentsDownward(this, 'Submenu'); 116 const items = findComponentsDownward(this, 'Submenu');