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 50 <menu-item v-else :name="`${item.name}`" :key="`menu-${item.name}`">{{ item.name }}</menu-item>
51 51 </template>
52 52 </Menu>
53   - <Button @click="setOpenNames">修改展开数组</Button>
54 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 100 </div>
56 101 </template>
57 102 <script>
... ... @@ -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 181 methods: {
... ... @@ -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 80 let names = [...this.openedNames];
81 81 const index = names.indexOf(name);
82 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 93 } else {
85   - if (this.accordion) {
  94 + if (this.mode === 'horizontal' && this.accordion) {
86 95 let currentSubmenu = null;
87   - names = [];
88 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 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 115 updateOpened () {
102 116 const items = findComponentsDownward(this, 'Submenu');
... ...