Commit a8a03995fa9ca9bef6dcca82335730cb95f40025
1 parent
55dbf62d
update #1102
Showing
2 changed files
with
43 additions
and
44 deletions
Show diff stats
examples/routers/menu.vue
| 1 | <template> | 1 | <template> |
| 2 | <div> | 2 | <div> |
| 3 | - <Row> | ||
| 4 | - <i-col span="8"> | ||
| 5 | - <Menu :theme="theme2"> | ||
| 6 | - <Submenu name="1"> | ||
| 7 | - <template slot="title"> | ||
| 8 | - <Icon type="ios-paper"></Icon> | ||
| 9 | - 内容管理 | ||
| 10 | - </template> | ||
| 11 | - <Menu-item name="1-1">文章管理</Menu-item> | ||
| 12 | - <Menu-item name="1-2">评论管理</Menu-item> | ||
| 13 | - <Menu-item name="1-3">举报管理</Menu-item> | ||
| 14 | - </Submenu> | ||
| 15 | - <Submenu name="2"> | ||
| 16 | - <template slot="title"> | ||
| 17 | - <Icon type="ios-people"></Icon> | ||
| 18 | - 用户管理 | ||
| 19 | - </template> | ||
| 20 | - <Menu-item name="2-1">新增用户</Menu-item> | ||
| 21 | - <Menu-item name="2-2">活跃用户</Menu-item> | ||
| 22 | - </Submenu> | ||
| 23 | - <Submenu name="3"> | ||
| 24 | - <template slot="title"> | ||
| 25 | - <Icon type="stats-bars"></Icon> | ||
| 26 | - 统计分析 | ||
| 27 | - </template> | ||
| 28 | - <Menu-group title="使用"> | ||
| 29 | - <Menu-item name="3-1">新增和启动</Menu-item> | ||
| 30 | - <Menu-item name="3-2">活跃分析</Menu-item> | ||
| 31 | - <Menu-item name="3-3">时段分析</Menu-item> | ||
| 32 | - </Menu-group> | ||
| 33 | - <Menu-group title="留存"> | ||
| 34 | - <Menu-item name="3-4">用户留存</Menu-item> | ||
| 35 | - <Menu-item name="3-5">流失用户</Menu-item> | ||
| 36 | - </Menu-group> | ||
| 37 | - </Submenu> | ||
| 38 | - </Menu> | ||
| 39 | - </i-col> | ||
| 40 | - </Row> | ||
| 41 | - <br> | ||
| 42 | - <p>切换主题</p> | ||
| 43 | - <Radio-group v-model="theme2"> | ||
| 44 | - <Radio label="light"></Radio> | ||
| 45 | - <Radio label="dark"></Radio> | ||
| 46 | - </Radio-group> | 3 | + <Menu :theme="theme2" accordion @on-open-change="handleChange"> |
| 4 | + <Submenu name="1"> | ||
| 5 | + <template slot="title"> | ||
| 6 | + <Icon type="ios-paper"></Icon> | ||
| 7 | + 内容管理 | ||
| 8 | + </template> | ||
| 9 | + <Menu-item name="1-1">文章管理</Menu-item> | ||
| 10 | + <Menu-item name="1-2">评论管理</Menu-item> | ||
| 11 | + <Menu-item name="1-3">举报管理</Menu-item> | ||
| 12 | + </Submenu> | ||
| 13 | + <Submenu name="2"> | ||
| 14 | + <template slot="title"> | ||
| 15 | + <Icon type="ios-people"></Icon> | ||
| 16 | + 用户管理 | ||
| 17 | + </template> | ||
| 18 | + <Menu-item name="2-1">新增用户</Menu-item> | ||
| 19 | + <Menu-item name="2-2">活跃用户</Menu-item> | ||
| 20 | + </Submenu> | ||
| 21 | + <Submenu name="3"> | ||
| 22 | + <template slot="title"> | ||
| 23 | + <Icon type="stats-bars"></Icon> | ||
| 24 | + 统计分析 | ||
| 25 | + </template> | ||
| 26 | + <Menu-group title="使用"> | ||
| 27 | + <Menu-item name="3-1">新增和启动</Menu-item> | ||
| 28 | + <Menu-item name="3-2">活跃分析</Menu-item> | ||
| 29 | + <Menu-item name="3-3">时段分析</Menu-item> | ||
| 30 | + </Menu-group> | ||
| 31 | + <Menu-group title="留存"> | ||
| 32 | + <Menu-item name="3-4">用户留存</Menu-item> | ||
| 33 | + <Menu-item name="3-5">流失用户</Menu-item> | ||
| 34 | + </Menu-group> | ||
| 35 | + </Submenu> | ||
| 36 | + </Menu> | ||
| 47 | </div> | 37 | </div> |
| 48 | </template> | 38 | </template> |
| 49 | <script> | 39 | <script> |
| @@ -52,6 +42,11 @@ | @@ -52,6 +42,11 @@ | ||
| 52 | return { | 42 | return { |
| 53 | theme2: 'light' | 43 | theme2: 'light' |
| 54 | } | 44 | } |
| 45 | + }, | ||
| 46 | + methods: { | ||
| 47 | + handleChange (val) { | ||
| 48 | + console.log(val); | ||
| 49 | + } | ||
| 55 | } | 50 | } |
| 56 | } | 51 | } |
| 57 | </script> | 52 | </script> |
src/components/menu/menu.vue
| @@ -81,6 +81,10 @@ | @@ -81,6 +81,10 @@ | ||
| 81 | this.openNames.splice(index, 1); | 81 | this.openNames.splice(index, 1); |
| 82 | } else { | 82 | } else { |
| 83 | this.openNames.push(name); | 83 | this.openNames.push(name); |
| 84 | + if (this.accordion) { | ||
| 85 | + this.openNames.splice(0, this.openNames.length); | ||
| 86 | + this.openNames.push(name); | ||
| 87 | + } | ||
| 84 | } | 88 | } |
| 85 | }, | 89 | }, |
| 86 | updateOpened () { | 90 | updateOpened () { |