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 | } | ... | ... |