Commit c708835c0c80340d3dedbc35872d7591d55364f1
1 parent
9212149e
update Menu to support SSR
Showing
2 changed files
with
33 additions
and
24 deletions
Show diff stats
examples/routers/menu.vue
| 1 | <template> | 1 | <template> |
| 2 | <div> | 2 | <div> |
| 3 | - <Menu :theme="theme3" active-name="1"> | ||
| 4 | - <Menu-group title="内容管理"> | ||
| 5 | - <Menu-item name="1"> | ||
| 6 | - <Icon type="document-text"></Icon> | ||
| 7 | - 文章管理 | ||
| 8 | - </Menu-item> | ||
| 9 | - <Menu-item name="2"> | ||
| 10 | - <Icon type="chatbubbles"></Icon> | ||
| 11 | - 评论管理 | ||
| 12 | - </Menu-item> | ||
| 13 | - </Menu-group> | ||
| 14 | - <Menu-group title="统计分析"> | ||
| 15 | - <Menu-item name="3"> | ||
| 16 | - <Icon type="heart"></Icon> | ||
| 17 | - 用户留存 | ||
| 18 | - </Menu-item> | ||
| 19 | - <Menu-item name="4"> | ||
| 20 | - <Icon type="heart-broken"></Icon> | ||
| 21 | - 流失用户 | ||
| 22 | - </Menu-item> | ||
| 23 | - </Menu-group> | 3 | + <Menu mode="horizontal" :theme="theme1" active-name="1"> |
| 4 | + <Menu-item name="1"> | ||
| 5 | + <Icon type="ios-paper"></Icon> | ||
| 6 | + 内容管理 | ||
| 7 | + </Menu-item> | ||
| 8 | + <Menu-item name="2"> | ||
| 9 | + <Icon type="ios-people"></Icon> | ||
| 10 | + 用户管理 | ||
| 11 | + </Menu-item> | ||
| 12 | + <Submenu name="3"> | ||
| 13 | + <template slot="title"> | ||
| 14 | + <Icon type="stats-bars"></Icon> | ||
| 15 | + 统计分析 | ||
| 16 | + </template> | ||
| 17 | + <Menu-group title="使用"> | ||
| 18 | + <Menu-item name="3-1">新增和启动</Menu-item> | ||
| 19 | + <Menu-item name="3-2">活跃分析</Menu-item> | ||
| 20 | + <Menu-item name="3-3">时段分析</Menu-item> | ||
| 21 | + </Menu-group> | ||
| 22 | + <Menu-group title="留存"> | ||
| 23 | + <Menu-item name="3-4">用户留存</Menu-item> | ||
| 24 | + <Menu-item name="3-5">流失用户</Menu-item> | ||
| 25 | + </Menu-group> | ||
| 26 | + </Submenu> | ||
| 27 | + <Menu-item name="4"> | ||
| 28 | + <Icon type="settings"></Icon> | ||
| 29 | + 综合设置 | ||
| 30 | + </Menu-item> | ||
| 24 | </Menu> | 31 | </Menu> |
| 25 | <br> | 32 | <br> |
| 26 | <p>切换主题</p> | 33 | <p>切换主题</p> |
| 27 | - <Radio-group v-model="theme3"> | 34 | + <Radio-group v-model="theme1"> |
| 28 | <Radio label="light"></Radio> | 35 | <Radio label="light"></Radio> |
| 29 | <Radio label="dark"></Radio> | 36 | <Radio label="dark"></Radio> |
| 37 | + <Radio label="primary"></Radio> | ||
| 30 | </Radio-group> | 38 | </Radio-group> |
| 31 | </div> | 39 | </div> |
| 32 | </template> | 40 | </template> |
| @@ -34,7 +42,7 @@ | @@ -34,7 +42,7 @@ | ||
| 34 | export default { | 42 | export default { |
| 35 | data () { | 43 | data () { |
| 36 | return { | 44 | return { |
| 37 | - theme3: 'light' | 45 | + theme1: 'light' |
| 38 | } | 46 | } |
| 39 | } | 47 | } |
| 40 | } | 48 | } |
src/components/menu/submenu.vue
| @@ -12,7 +12,8 @@ | @@ -12,7 +12,8 @@ | ||
| 12 | v-show="opened" | 12 | v-show="opened" |
| 13 | placement="bottom" | 13 | placement="bottom" |
| 14 | ref="drop" | 14 | ref="drop" |
| 15 | - :style="dropStyle"><slot></slot></Drop> | 15 | + :style="dropStyle"><ul><slot></slot></ul> |
| 16 | + </Drop> | ||
| 16 | </transition> | 17 | </transition> |
| 17 | </li> | 18 | </li> |
| 18 | </template> | 19 | </template> |