diff --git a/src/components/menu/menu-item.vue b/src/components/menu/menu-item.vue
index ee02e15..92eecda 100644
--- a/src/components/menu/menu-item.vue
+++ b/src/components/menu/menu-item.vue
@@ -35,6 +35,7 @@
},
methods: {
handleClick () {
+ if (this.disabled) return;
this.$dispatch('on-menu-item-select', this.key);
}
}
diff --git a/src/components/menu/menu.vue b/src/components/menu/menu.vue
index c49f232..ec747f7 100644
--- a/src/components/menu/menu.vue
+++ b/src/components/menu/menu.vue
@@ -73,6 +73,10 @@
}
}
})
+ } else if (item.$options.name === 'MenuGroup') {
+ item.$children.forEach(groupItem => {
+ groupItem.active = groupItem.key === this.activeKey;
+ })
} else {
item.active = item.key === this.activeKey;
}
diff --git a/src/components/menu/submenu.vue b/src/components/menu/submenu.vue
index 4f10b91..5a47e3b 100644
--- a/src/components/menu/submenu.vue
+++ b/src/components/menu/submenu.vue
@@ -1,10 +1,10 @@
<template>
<li :class="classes" @mouseenter="handleMouseenter" @mouseleave="handleMouseleave">
- <div :class="[prefixCls + '-title']" v-el:reference>
- <span><slot name="title"></slot></span>
- <Icon type="ios-arrow-down"></Icon>
+ <div :class="[prefixCls + '-submenu-title']" v-el:reference @click="handleClick">
+ <slot name="title"></slot>
+ <Icon type="ios-arrow-down" :class="[prefixCls + '-submenu-title-icon']"></Icon>
</div>
- <ul :class="[prefixCls]" v-if="mode === 'vertical'"></ul>
+ <ul :class="[prefixCls]" v-if="mode === 'vertical'" v-show="opened"><slot></slot></ul>
<Drop v-else v-show="opened" placement="bottom" transition="slide-up" v-ref:drop><slot></slot></Drop>
</li>
</template>
@@ -20,6 +20,10 @@
key: {
type: [String, Number],
required: true
+ },
+ disabled: {
+ type: Boolean,
+ default: false
}
},
data () {
@@ -35,28 +39,47 @@
`${prefixCls}-submenu`,
{
[`${prefixCls}-item-active`]: this.active,
- [`${prefixCls}-opened`]: this.opened
+ [`${prefixCls}-opened`]: this.opened,
+ [`${prefixCls}-submenu-disabled`]: this.disabled
}
]
},
mode () {
return this.$parent.mode;
+ },
+ accordion () {
+ return this.$parent.accordion;
}
},
methods: {
handleMouseenter () {
+ if (this.disabled) return;
if (this.mode === 'vertical') return;
+
clearTimeout(this.timeout);
this.timeout = setTimeout(() => {
this.opened = true;
}, 250);
},
handleMouseleave () {
+ if (this.disabled) return;
if (this.mode === 'vertical') return;
+
clearTimeout(this.timeout);
this.timeout = setTimeout(() => {
this.opened = false;
}, 150);
+ },
+ handleClick () {
+ if (this.disabled) return;
+ if (this.mode === 'horizontal') return;
+ const opened = this.opened;
+ if (this.accordion) {
+ this.$parent.$children.forEach(item => {
+ if (item.$options.name === 'Submenu') item.opened = false;
+ });
+ }
+ this.opened = !opened;
}
},
watch: {
diff --git a/src/styles/components/menu.less b/src/styles/components/menu.less
index df4c69f..ed2886e 100644
--- a/src/styles/components/menu.less
+++ b/src/styles/components/menu.less
@@ -41,6 +41,7 @@
top: 0;
bottom: 0;
right: 0;
+ z-index: 1;
}
}
}
@@ -64,23 +65,14 @@
z-index: 1;
cursor: pointer;
transition: all @transition-time @ease-in-out;
-
- .@{menu-prefix-cls}-light &{
- color: @text-color;
- }
- .@{menu-prefix-cls}-dark &{
- color: @subsidiary-color;
- &-active, &:hover{
- color: #fff;
- }
- }
- .@{menu-prefix-cls}-primary &{
- color: #fff;
- &-active, &:hover{
- background: @link-active-color;
- }
- }
}
+ &-item > i{
+ margin-right: 6px;
+ }
+ &-submenu-title > i, &-submenu-title span > i{
+ margin-right: 8px;
+ }
+
&-horizontal &-item,
&-horizontal &-submenu
{
@@ -88,7 +80,7 @@
padding: 0 20px;
position: relative;
cursor: pointer;
- z-index: 1;
+ z-index: 3;
transition: all @transition-time @ease-in-out;
}
@@ -96,19 +88,22 @@
height: inherit;
line-height: inherit;
border-bottom: 2px solid transparent;
+ color: @text-color;
&-active, &:hover{
color: @primary-color;
border-bottom: 2px solid @primary-color;
}
}
- &-dark&-horizontal &-item{
+ &-dark&-horizontal &-item, &-dark&-horizontal &-submenu{
+ color: @subsidiary-color;
&-active, &:hover{
color: #fff;
}
}
- &-primary&-horizontal &-item{
+ &-primary&-horizontal &-item, &-primary&-horizontal &-submenu{
+ color: #fff;
&-active, &:hover{
background: @link-active-color;
}
@@ -128,11 +123,57 @@
line-height: normal;
&-title {
padding-left: 8px;
- font-size: 12px;
+ font-size: @font-size-small;
color: @legend-color;
height: 30px;
line-height: 30px;
}
}
+
+ // vertical
+ &-vertical &-item,
+ &-vertical &-submenu-title
+ {
+ padding: 14px 24px;
+ position: relative;
+ cursor: pointer;
+ z-index: 1;
+ transition: all @transition-time @ease-in-out;
+
+ &:hover{
+ background: @background-color-select-hover;
+ }
+ }
+
+ &-vertical &-submenu-title-icon{
+ float: right;
+ position: relative;
+ top: 4px;
+ }
+ &-submenu-title-icon {
+ transition: transform @transition-time @ease-in-out;
+ }
+ &-opened &-submenu-title-icon{
+ transform: rotate(180deg);
+ }
+
+ &-vertical &-submenu &-item{
+ padding-left: 43px;
+ }
+ &-vertical &-item-group{
+ &-title{
+ font-size: @font-size-base;
+ padding-left: 28px;
+ }
+ }
+
+ &-light&-vertical &-item{
+ border-right: 2px solid transparent;
+ &-active:not(.@{menu-prefix-cls}-submenu){
+ color: @primary-color;
+ border-right: 2px solid @primary-color;
+ z-index: 2;
+ }
+ }
}
.select-item(@menu-prefix-cls, @menu-dropdown-item-prefix-cls);
\ No newline at end of file
diff --git a/test/routers/menu.vue b/test/routers/menu.vue
index cf73813..f9986fb 100644
--- a/test/routers/menu.vue
+++ b/test/routers/menu.vue
@@ -1,14 +1,12 @@
<template>
<div>
- <i-button @click="toggleMode">调整方向</i-button>
- <Menu :mode="mode" active-key="1">
+ <Menu mode="horizontal" active-key="1">
<Menu-item key="1">
- <Icon type="ionic"></Icon>
- <span>导航一</span>
+ <Icon type="ionic"></Icon><span>导航一</span>
</Menu-item>
<Menu-item key="2">导航二</Menu-item>
<Submenu key="3">
- <span slot="title">导航三</span>
+ <template slot="title"><Icon type="ionic"></Icon>导航三</template>
<Menu-group title="集合1">
<Menu-item key="3-1">导航三 - 一</Menu-item>
<Menu-item key="3-2">导航三 - 二</Menu-item>
@@ -21,6 +19,65 @@
<Menu-item key="4">导航四</Menu-item>
</Menu>
<br><br>
+ <Menu :mode="mode" active-key="1" accordion>
+ <Menu-item key="1">
+ <Icon type="ionic"></Icon>
+ <span>导航一</span>
+ </Menu-item>
+ <Menu-group title="集合1">
+ <Menu-item key="2">
+ <Icon type="ionic"></Icon>
+ 导航二
+ </Menu-item>
+ <Menu-item key="3">导航三</Menu-item>
+ </Menu-group>
+ <Menu-group title="集合2">
+ <Menu-item key="4">导航四</Menu-item>
+ <Menu-item key="5">导航五</Menu-item>
+ </Menu-group>
+ <Submenu key="6">
+ <template slot="title"><Icon type="ionic"></Icon>导航六</template>
+ <Menu-group title="集合1">
+ <Menu-item key="3-1">导航三 - 一</Menu-item>
+ <Menu-item key="3-2">导航三 - 二</Menu-item>
+ </Menu-group>
+ <Menu-group title="集合2">
+ <Menu-item key="3-3">导航三 - 三</Menu-item>
+ <Menu-item key="3-4">导航三 - 四</Menu-item>
+ </Menu-group>
+ </Submenu>
+ <Submenu key="7">
+ <template slot="title"><Icon type="ionic"></Icon>导航七</template>
+ <Menu-group title="集合1">
+ <Menu-item key="7-1">导航三 - 一</Menu-item>
+ <Menu-item key="7-2">导航三 - 二</Menu-item>
+ </Menu-group>
+ <Menu-group title="集合2">
+ <Menu-item key="7-3">导航三 - 三</Menu-item>
+ <Menu-item key="7-4">导航三 - 四</Menu-item>
+ </Menu-group>
+ </Submenu>
+ </Menu>
+ <!--<Menu :mode="mode" active-key="1">-->
+ <!--<Menu-item key="1">-->
+ <!--<Icon type="ionic"></Icon>-->
+ <!--<span>导航一</span>-->
+ <!--</Menu-item>-->
+ <!--<Menu-item key="2">导航二</Menu-item>-->
+ <!--<Submenu key="3">-->
+ <!--<template slot="title"><Icon type="ionic"></Icon><span>导航三</span></template>-->
+ <!--<Menu-group title="集合1">-->
+ <!--<Menu-item key="3-1">导航三 - 一</Menu-item>-->
+ <!--<Menu-item key="3-2">导航三 - 二</Menu-item>-->
+ <!--</Menu-group>-->
+ <!--<Menu-group title="集合2">-->
+ <!--<Menu-item key="3-3">导航三 - 三</Menu-item>-->
+ <!--<Menu-item key="3-4">导航三 - 四</Menu-item>-->
+ <!--</Menu-group>-->
+ <!--</Submenu>-->
+ <!--<Menu-item key="4">导航四</Menu-item>-->
+ <!--</Menu>-->
+ <!--<br><br>-->
<!--<Menu mode="horizontal" theme="dark" active-key="1">-->
<!--<Menu-item key="1">-->
<!--<Icon type="ionic"></Icon>-->
@@ -57,7 +114,7 @@
props: {},
data () {
return {
- mode: 'horizontal'
+ mode: 'vertical'
}
},
computed: {},
--
libgit2 0.21.4