Commit f9d87766cac1d5b921371046d8983e36a9290db0
1 parent
fc3ffbe0
update Menu
update Menu
Showing
3 changed files
with
45 additions
and
46 deletions
Show diff stats
src/components/menu/menu.vue
| ... | ... | @@ -78,7 +78,7 @@ |
| 78 | 78 | groupItem.active = false; |
| 79 | 79 | } |
| 80 | 80 | }) |
| 81 | - } else { | |
| 81 | + } else if (subitem.$options.name === 'MenuItem') { | |
| 82 | 82 | if (subitem.key === this.activeKey) { |
| 83 | 83 | subitem.active = true; |
| 84 | 84 | subitem.$parent.active = true; |
| ... | ... | @@ -91,7 +91,7 @@ |
| 91 | 91 | item.$children.forEach(groupItem => { |
| 92 | 92 | groupItem.active = groupItem.key === this.activeKey; |
| 93 | 93 | }) |
| 94 | - } else { | |
| 94 | + } else if (item.$options.name === 'MenuItem') { | |
| 95 | 95 | item.active = item.key === this.activeKey; |
| 96 | 96 | } |
| 97 | 97 | }) | ... | ... |
src/styles/components/menu.less
| ... | ... | @@ -121,11 +121,11 @@ |
| 121 | 121 | &-item-group{ |
| 122 | 122 | line-height: normal; |
| 123 | 123 | &-title { |
| 124 | + height: 30px; | |
| 125 | + line-height: 30px; | |
| 124 | 126 | padding-left: 8px; |
| 125 | 127 | font-size: @font-size-small; |
| 126 | 128 | color: @legend-color; |
| 127 | - height: 48px; | |
| 128 | - line-height: 48px; | |
| 129 | 129 | } |
| 130 | 130 | |
| 131 | 131 | & > ul{ |
| ... | ... | @@ -166,6 +166,8 @@ |
| 166 | 166 | } |
| 167 | 167 | &-vertical &-item-group{ |
| 168 | 168 | &-title{ |
| 169 | + height: 48px; | |
| 170 | + line-height: 48px; | |
| 169 | 171 | font-size: @font-size-base; |
| 170 | 172 | padding-left: 28px; |
| 171 | 173 | } |
| ... | ... | @@ -223,4 +225,9 @@ |
| 223 | 225 | } |
| 224 | 226 | } |
| 225 | 227 | } |
| 226 | -.select-item(@menu-prefix-cls, @menu-dropdown-item-prefix-cls); | |
| 227 | 228 | \ No newline at end of file |
| 229 | +.select-item(@menu-prefix-cls, @menu-dropdown-item-prefix-cls); | |
| 230 | + | |
| 231 | +.@{menu-dropdown-item-prefix-cls} { | |
| 232 | + padding: 7px 16px 8px; | |
| 233 | + font-size: @font-size-base !important; | |
| 234 | +} | |
| 228 | 235 | \ No newline at end of file | ... | ... |
test/routers/menu.vue
| 1 | 1 | <template> |
| 2 | - <Row> | |
| 3 | - <i-col span="8"> | |
| 4 | - <Menu :theme="theme2"> | |
| 5 | - <Submenu key="1"> | |
| 6 | - <template slot="title"> | |
| 7 | - <Icon type="ios-paper"></Icon> | |
| 8 | - 内容管理 | |
| 9 | - </template> | |
| 10 | - <Menu-item key="1-1">文章管理</Menu-item> | |
| 11 | - <Menu-item key="1-2">评论管理</Menu-item> | |
| 12 | - <Menu-item key="1-3">举报管理</Menu-item> | |
| 13 | - </Submenu> | |
| 14 | - <Submenu key="2"> | |
| 15 | - <template slot="title"> | |
| 16 | - <Icon type="ios-people"></Icon> | |
| 17 | - 用户管理 | |
| 18 | - </template> | |
| 19 | - <Menu-item key="2-1">新增用户</Menu-item> | |
| 20 | - <Menu-item key="2-2">活跃用户</Menu-item> | |
| 21 | - </Submenu> | |
| 22 | - <Submenu key="3"> | |
| 23 | - <template slot="title"> | |
| 24 | - <Icon type="stats-bars"></Icon> | |
| 25 | - 统计分析 | |
| 26 | - </template> | |
| 27 | - <Menu-group title="使用"> | |
| 28 | - <Menu-item key="3-1">新增和启动</Menu-item> | |
| 29 | - <Menu-item key="3-2">活跃分析</Menu-item> | |
| 30 | - <Menu-item key="3-3">时段分析</Menu-item> | |
| 31 | - </Menu-group> | |
| 32 | - <Menu-group title="留存"> | |
| 33 | - <Menu-item key="3-4">用户留存</Menu-item> | |
| 34 | - <Menu-item key="3-5">流失用户</Menu-item> | |
| 35 | - </Menu-group> | |
| 36 | - </Submenu> | |
| 37 | - </Menu> | |
| 38 | - </i-col> | |
| 39 | - | |
| 40 | - </Row> | |
| 2 | + <Menu mode="horizontal" :theme="theme1" active-key="1"> | |
| 3 | + <i-button>test</i-button> | |
| 4 | + <Menu-item key="1"> | |
| 5 | + <Icon type="ios-paper"></Icon> | |
| 6 | + 内容管理 | |
| 7 | + </Menu-item> | |
| 8 | + <Menu-item key="2"> | |
| 9 | + <Icon type="ios-people"></Icon> | |
| 10 | + 用户管理 | |
| 11 | + </Menu-item> | |
| 12 | + <Submenu key="3"> | |
| 13 | + <template slot="title"> | |
| 14 | + <Icon type="stats-bars"></Icon> | |
| 15 | + 统计分析 | |
| 16 | + </template> | |
| 17 | + <Menu-group title="使用"> | |
| 18 | + <Menu-item key="3-1">新增和启动</Menu-item> | |
| 19 | + <Menu-item key="3-2">活跃分析</Menu-item> | |
| 20 | + <Menu-item key="3-3">时段分析</Menu-item> | |
| 21 | + </Menu-group> | |
| 22 | + <Menu-group title="留存"> | |
| 23 | + <Menu-item key="3-4">用户留存</Menu-item> | |
| 24 | + <Menu-item key="3-5">流失用户</Menu-item> | |
| 25 | + </Menu-group> | |
| 26 | + </Submenu> | |
| 27 | + <Menu-item key="4"> | |
| 28 | + <Icon type="settings"></Icon> | |
| 29 | + 综合设置 | |
| 30 | + </Menu-item> | |
| 31 | + </Menu> | |
| 41 | 32 | <br> |
| 42 | 33 | <p>切换主题</p> |
| 43 | - <Radio-group :model.sync="theme2"> | |
| 34 | + <Radio-group :model.sync="theme1"> | |
| 44 | 35 | <Radio value="light"></Radio> |
| 45 | 36 | <Radio value="dark"></Radio> |
| 37 | + <Radio value="primary"></Radio> | |
| 46 | 38 | </Radio-group> |
| 47 | 39 | </template> |
| 48 | 40 | <script> |
| 49 | 41 | export default { |
| 50 | 42 | data () { |
| 51 | 43 | return { |
| 52 | - theme2: 'light' | |
| 44 | + theme1: 'light' | |
| 53 | 45 | } |
| 54 | 46 | } |
| 55 | 47 | } | ... | ... |