Commit f9d87766cac1d5b921371046d8983e36a9290db0

Authored by 梁灏
1 parent fc3ffbe0

update Menu

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