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: { methods: {
handleClick () { handleClick () {
if (this.disabled) return;
this.$dispatch('on-menu-item-select', this.key); 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 { } else {
item.active = item.key === this.activeKey; item.active = item.key === this.activeKey;
} }

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

@ -1,10 +1,10 @@
<template> <template>
<li :class="classes" @mouseenter="handleMouseenter" @mouseleave="handleMouseleave"> <li :class="classes" @mouseenter="handleMouseenter" @mouseleave="handleMouseleave">
<div :class="[prefixCls + '-title']" v-el:reference> <div :class="[prefixCls + '-submenu-title']" v-el:reference @click="handleClick">
<span><slot name="title"></slot></span> <slot name="title"></slot>
<Icon type="ios-arrow-down"></Icon> <Icon type="ios-arrow-down" :class="[prefixCls + '-submenu-title-icon']"></Icon>
</div> </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> <Drop v-else v-show="opened" placement="bottom" transition="slide-up" v-ref:drop><slot></slot></Drop>
</li> </li>
</template> </template>
@ -20,6 +20,10 @@
key: { key: {
type: [String, Number], type: [String, Number],
required: true required: true
},
disabled: {
type: Boolean,
default: false
} }
}, },
data () { data () {
@ -35,28 +39,47 @@
`${prefixCls}-submenu`, `${prefixCls}-submenu`,
{ {
[`${prefixCls}-item-active`]: this.active, [`${prefixCls}-item-active`]: this.active,
[`${prefixCls}-opened`]: this.opened [`${prefixCls}-opened`]: this.opened,
[`${prefixCls}-submenu-disabled`]: this.disabled
} }
] ]
}, },
mode () { mode () {
return this.$parent.mode; return this.$parent.mode;
},
accordion () {
return this.$parent.accordion;
} }
}, },
methods: { methods: {
handleMouseenter () { handleMouseenter () {
if (this.disabled) return;
if (this.mode === 'vertical') return; if (this.mode === 'vertical') return;
clearTimeout(this.timeout); clearTimeout(this.timeout);
this.timeout = setTimeout(() => { this.timeout = setTimeout(() => {
this.opened = true; this.opened = true;
}, 250); }, 250);
}, },
handleMouseleave () { handleMouseleave () {
if (this.disabled) return;
if (this.mode === 'vertical') return; if (this.mode === 'vertical') return;
clearTimeout(this.timeout); clearTimeout(this.timeout);
this.timeout = setTimeout(() => { this.timeout = setTimeout(() => {
this.opened = false; this.opened = false;
}, 150); }, 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: { watch: {

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

@ -41,6 +41,7 @@
top: 0; top: 0;
bottom: 0; bottom: 0;
right: 0; right: 0;
z-index: 1;
} }
} }
} }
@ -64,23 +65,14 @@
z-index: 1; z-index: 1;
cursor: pointer; cursor: pointer;
transition: all @transition-time @ease-in-out; 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 &-item,
&-horizontal &-submenu &-horizontal &-submenu
{ {
@ -88,7 +80,7 @@
padding: 0 20px; padding: 0 20px;
position: relative; position: relative;
cursor: pointer; cursor: pointer;
z-index: 1; z-index: 3;
transition: all @transition-time @ease-in-out; transition: all @transition-time @ease-in-out;
} }
@ -96,19 +88,22 @@
height: inherit; height: inherit;
line-height: inherit; line-height: inherit;
border-bottom: 2px solid transparent; border-bottom: 2px solid transparent;
color: @text-color;
&-active, &:hover{ &-active, &:hover{
color: @primary-color; color: @primary-color;
border-bottom: 2px solid @primary-color; border-bottom: 2px solid @primary-color;
} }
} }
&-dark&-horizontal &-item{ &-dark&-horizontal &-item, &-dark&-horizontal &-submenu{
color: @subsidiary-color;
&-active, &:hover{ &-active, &:hover{
color: #fff; color: #fff;
} }
} }
&-primary&-horizontal &-item{ &-primary&-horizontal &-item, &-primary&-horizontal &-submenu{
color: #fff;
&-active, &:hover{ &-active, &:hover{
background: @link-active-color; background: @link-active-color;
} }
@ -128,11 +123,57 @@
line-height: normal; line-height: normal;
&-title { &-title {
padding-left: 8px; padding-left: 8px;
font-size: 12px; font-size: @font-size-small;
color: @legend-color; color: @legend-color;
height: 30px; height: 30px;
line-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); .select-item(@menu-prefix-cls, @menu-dropdown-item-prefix-cls);

69
test/routers/menu.vue
View file

@ -1,14 +1,12 @@
<template> <template>
<div> <div>
<i-button @click="toggleMode">调整方向</i-button> <Menu mode="horizontal" active-key="1">
<Menu :mode="mode" active-key="1">
<Menu-item key="1"> <Menu-item key="1">
<Icon type="ionic"></Icon> <Icon type="ionic"></Icon><span>导航一</span>
<span>导航一</span>
</Menu-item> </Menu-item>
<Menu-item key="2">导航二</Menu-item> <Menu-item key="2">导航二</Menu-item>
<Submenu key="3"> <Submenu key="3">
<span slot="title">导航三</span> <template slot="title"><Icon type="ionic"></Icon>导航三</template>
<Menu-group title="集合1"> <Menu-group title="集合1">
<Menu-item key="3-1">导航三 - 一</Menu-item> <Menu-item key="3-1">导航三 - 一</Menu-item>
<Menu-item key="3-2">导航三 - 二</Menu-item> <Menu-item key="3-2">导航三 - 二</Menu-item>
@ -21,6 +19,65 @@
<Menu-item key="4">导航四</Menu-item> <Menu-item key="4">导航四</Menu-item>
</Menu> </Menu>
<br><br> <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 mode="horizontal" theme="dark" active-key="1">-->
<!--<Menu-item key="1">--> <!--<Menu-item key="1">-->
<!--<Icon type="ionic"></Icon>--> <!--<Icon type="ionic"></Icon>-->
@ -57,7 +114,7 @@
props: {}, props: {},
data () { data () {
return { return {
mode: 'horizontal' mode: 'vertical'
} }
}, },
computed: {}, computed: {},