update Menu

update Menu
This commit is contained in:
梁灏 2016-12-08 22:11:57 +08:00
parent fc3ffbe08d
commit f9d87766ca
3 changed files with 45 additions and 46 deletions

View file

@ -78,7 +78,7 @@
groupItem.active = false; groupItem.active = false;
} }
}) })
} else { } else if (subitem.$options.name === 'MenuItem') {
if (subitem.key === this.activeKey) { if (subitem.key === this.activeKey) {
subitem.active = true; subitem.active = true;
subitem.$parent.active = true; subitem.$parent.active = true;
@ -91,7 +91,7 @@
item.$children.forEach(groupItem => { item.$children.forEach(groupItem => {
groupItem.active = groupItem.key === this.activeKey; groupItem.active = groupItem.key === this.activeKey;
}) })
} else { } else if (item.$options.name === 'MenuItem') {
item.active = item.key === this.activeKey; item.active = item.key === this.activeKey;
} }
}) })

View file

@ -121,11 +121,11 @@
&-item-group{ &-item-group{
line-height: normal; line-height: normal;
&-title { &-title {
height: 30px;
line-height: 30px;
padding-left: 8px; padding-left: 8px;
font-size: @font-size-small; font-size: @font-size-small;
color: @legend-color; color: @legend-color;
height: 48px;
line-height: 48px;
} }
& > ul{ & > ul{
@ -166,6 +166,8 @@
} }
&-vertical &-item-group{ &-vertical &-item-group{
&-title{ &-title{
height: 48px;
line-height: 48px;
font-size: @font-size-base; font-size: @font-size-base;
padding-left: 28px; padding-left: 28px;
} }
@ -224,3 +226,8 @@
} }
} }
.select-item(@menu-prefix-cls, @menu-dropdown-item-prefix-cls); .select-item(@menu-prefix-cls, @menu-dropdown-item-prefix-cls);
.@{menu-dropdown-item-prefix-cls} {
padding: 7px 16px 8px;
font-size: @font-size-base !important;
}

View file

@ -1,24 +1,14 @@
<template> <template>
<Row> <Menu mode="horizontal" :theme="theme1" active-key="1">
<i-col span="8"> <i-button>test</i-button>
<Menu :theme="theme2"> <Menu-item key="1">
<Submenu key="1">
<template slot="title">
<Icon type="ios-paper"></Icon> <Icon type="ios-paper"></Icon>
内容管理 内容管理
</template> </Menu-item>
<Menu-item key="1-1">文章管理</Menu-item> <Menu-item key="2">
<Menu-item key="1-2">评论管理</Menu-item>
<Menu-item key="1-3">举报管理</Menu-item>
</Submenu>
<Submenu key="2">
<template slot="title">
<Icon type="ios-people"></Icon> <Icon type="ios-people"></Icon>
用户管理 用户管理
</template> </Menu-item>
<Menu-item key="2-1">新增用户</Menu-item>
<Menu-item key="2-2">活跃用户</Menu-item>
</Submenu>
<Submenu key="3"> <Submenu key="3">
<template slot="title"> <template slot="title">
<Icon type="stats-bars"></Icon> <Icon type="stats-bars"></Icon>
@ -34,22 +24,24 @@
<Menu-item key="3-5">流失用户</Menu-item> <Menu-item key="3-5">流失用户</Menu-item>
</Menu-group> </Menu-group>
</Submenu> </Submenu>
<Menu-item key="4">
<Icon type="settings"></Icon>
综合设置
</Menu-item>
</Menu> </Menu>
</i-col>
</Row>
<br> <br>
<p>切换主题</p> <p>切换主题</p>
<Radio-group :model.sync="theme2"> <Radio-group :model.sync="theme1">
<Radio value="light"></Radio> <Radio value="light"></Radio>
<Radio value="dark"></Radio> <Radio value="dark"></Radio>
<Radio value="primary"></Radio>
</Radio-group> </Radio-group>
</template> </template>
<script> <script>
export default { export default {
data () { data () {
return { return {
theme2: 'light' theme1: 'light'
} }
} }
} }