drip-public/iview
6
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

update Menu

Browse source 
update Menu
This commit is contained in:
梁灏 2016-12-08 11:55:38 +08:00
parent e05d728978
commit 0acdae1983
5 changed files with 157 additions and 31 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
src/components/menu/menu-item.vue
View file

@ -35,6 +35,7 @@
},
methods: {
handleClick () {
if (this.disabled) return;
this.$dispatch('on-menu-item-select', this.key);
}
}

4
src/components/menu/menu.vue
View file

@ -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;
}

33
src/components/menu/submenu.vue
View file

@ -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: {

81
src/styles/components/menu.less
View file

@ -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);

69
test/routers/menu.vue
View file

@ -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: {},