drip-public/iview
5
0
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
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: {