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,7 +78,7 @@ | ||
| 78 | groupItem.active = false; | 78 | groupItem.active = false; |
| 79 | } | 79 | } |
| 80 | }) | 80 | }) |
| 81 | - } else { | 81 | + } else if (subitem.$options.name === 'MenuItem') { |
| 82 | if (subitem.key === this.activeKey) { | 82 | if (subitem.key === this.activeKey) { |
| 83 | subitem.active = true; | 83 | subitem.active = true; |
| 84 | subitem.$parent.active = true; | 84 | subitem.$parent.active = true; |
| @@ -91,7 +91,7 @@ | @@ -91,7 +91,7 @@ | ||
| 91 | item.$children.forEach(groupItem => { | 91 | item.$children.forEach(groupItem => { |
| 92 | groupItem.active = groupItem.key === this.activeKey; | 92 | groupItem.active = groupItem.key === this.activeKey; |
| 93 | }) | 93 | }) |
| 94 | - } else { | 94 | + } else if (item.$options.name === 'MenuItem') { |
| 95 | item.active = item.key === this.activeKey; | 95 | item.active = item.key === this.activeKey; |
| 96 | } | 96 | } |
| 97 | }) | 97 | }) |
src/styles/components/menu.less
| @@ -121,11 +121,11 @@ | @@ -121,11 +121,11 @@ | ||
| 121 | &-item-group{ | 121 | &-item-group{ |
| 122 | line-height: normal; | 122 | line-height: normal; |
| 123 | &-title { | 123 | &-title { |
| 124 | + height: 30px; | ||
| 125 | + line-height: 30px; | ||
| 124 | padding-left: 8px; | 126 | padding-left: 8px; |
| 125 | font-size: @font-size-small; | 127 | font-size: @font-size-small; |
| 126 | color: @legend-color; | 128 | color: @legend-color; |
| 127 | - height: 48px; | ||
| 128 | - line-height: 48px; | ||
| 129 | } | 129 | } |
| 130 | 130 | ||
| 131 | & > ul{ | 131 | & > ul{ |
| @@ -166,6 +166,8 @@ | @@ -166,6 +166,8 @@ | ||
| 166 | } | 166 | } |
| 167 | &-vertical &-item-group{ | 167 | &-vertical &-item-group{ |
| 168 | &-title{ | 168 | &-title{ |
| 169 | + height: 48px; | ||
| 170 | + line-height: 48px; | ||
| 169 | font-size: @font-size-base; | 171 | font-size: @font-size-base; |
| 170 | padding-left: 28px; | 172 | padding-left: 28px; |
| 171 | } | 173 | } |
| @@ -223,4 +225,9 @@ | @@ -223,4 +225,9 @@ | ||
| 223 | } | 225 | } |
| 224 | } | 226 | } |
| 225 | } | 227 | } |
| 226 | -.select-item(@menu-prefix-cls, @menu-dropdown-item-prefix-cls); | ||
| 227 | \ No newline at end of file | 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 | \ No newline at end of file | 235 | \ No newline at end of file |
test/routers/menu.vue
| 1 | <template> | 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 | <br> | 32 | <br> |
| 42 | <p>切换主题</p> | 33 | <p>切换主题</p> |
| 43 | - <Radio-group :model.sync="theme2"> | 34 | + <Radio-group :model.sync="theme1"> |
| 44 | <Radio value="light"></Radio> | 35 | <Radio value="light"></Radio> |
| 45 | <Radio value="dark"></Radio> | 36 | <Radio value="dark"></Radio> |
| 37 | + <Radio value="primary"></Radio> | ||
| 46 | </Radio-group> | 38 | </Radio-group> |
| 47 | </template> | 39 | </template> |
| 48 | <script> | 40 | <script> |
| 49 | export default { | 41 | export default { |
| 50 | data () { | 42 | data () { |
| 51 | return { | 43 | return { |
| 52 | - theme2: 'light' | 44 | + theme1: 'light' |
| 53 | } | 45 | } |
| 54 | } | 46 | } |
| 55 | } | 47 | } |