update Dropdown

update Dropdown
This commit is contained in:
梁灏 2016-12-04 14:33:06 +08:00
parent 5557dd66f5
commit 6b71ba9418
3 changed files with 63 additions and 11 deletions

View file

@ -37,13 +37,15 @@
methods: { methods: {
handleClick () { handleClick () {
const $parent = this.$parent.$parent; const $parent = this.$parent.$parent;
const hasChildren = this.$parent && this.$parent.$options.name === 'Dropdown';
if (this.disabled) { if (this.disabled) {
this.$nextTick(() => { this.$nextTick(() => {
$parent.visible = true; $parent.visible = true;
}); });
} else if (hasChildren) {
this.$parent.$emit('on-haschild-click');
} else { } else {
if ($parent.trigger === 'hover') { if ($parent && $parent.$options.name === 'Dropdown') {
$parent.visible = false;
$parent.$emit('on-hover-click'); $parent.$emit('on-hover-click');
} }
} }

View file

@ -70,6 +70,14 @@
return false; return false;
} }
this.visible = false; this.visible = false;
},
hasParent () {
const $parent = this.$parent.$parent;
if ($parent && $parent.$options.name === 'Dropdown') {
return $parent;
} else {
return false;
}
} }
}, },
watch: { watch: {
@ -83,17 +91,22 @@
}, },
events: { events: {
'on-click' (key) { 'on-click' (key) {
const $parent = this.$parent.$parent; const $parent = this.hasParent();
if ($parent && $parent.$options.name === 'Dropdown') { if ($parent ) $parent.$emit('on-click', key)
$parent.$emit('on-click', key);
}
}, },
'on-hover-click' () { 'on-hover-click' () {
const $parent = this.$parent.$parent; this.$nextTick(() => {
if ($parent && $parent.$options.name === 'Dropdown') { this.visible = false;
$parent.visible = false; });
$parent.$emit('on-hover-click'); const $parent = this.hasParent();
} if ($parent) $parent.$emit('on-hover-click');
},
'on-haschild-click' () {
this.$nextTick(() => {
this.visible = true;
});
const $parent = this.hasParent();
if ($parent) $parent.$emit('on-haschild-click');
} }
} }
} }

View file

@ -1,5 +1,42 @@
<template> <template>
<Dropdown trigger="hover" @on-click="click" style="margin-left: 20px"> <Dropdown trigger="hover" @on-click="click" style="margin-left: 20px">
<a href="javascript:void(0)">
hover 触发
<Icon type="arrow-down-b"></Icon>
</a>
<Dropdown-menu slot="list">
<Dropdown-item>驴打滚</Dropdown-item>
<Dropdown placement="right-start">
<Dropdown-item>
炸酱面
<Icon type="arrow-right-b"></Icon>
</Dropdown-item>
<Dropdown-menu slot="list">
<Dropdown-item>驴打滚</Dropdown-item>
<Dropdown-item>炸酱面</Dropdown-item>
<Dropdown-item>豆汁儿</Dropdown-item>
<Dropdown placement="right-start">
<Dropdown-item>
冰糖葫芦
<Icon type="arrow-right-b"></Icon>
</Dropdown-item>
<Dropdown-menu slot="list">
<Dropdown-item>驴打滚</Dropdown-item>
<Dropdown-item key="123">炸酱面</Dropdown-item>
<Dropdown-item>豆汁儿</Dropdown-item>
<Dropdown-item>冰糖葫芦</Dropdown-item>
<Dropdown-item>北京烤鸭</Dropdown-item>
</Dropdown-menu>
</Dropdown>
<Dropdown-item>北京烤鸭</Dropdown-item>
</Dropdown-menu>
</Dropdown>
<Dropdown-item>豆汁儿</Dropdown-item>
<Dropdown-item>冰糖葫芦</Dropdown-item>
<Dropdown-item>北京烤鸭</Dropdown-item>
</Dropdown-menu>
</Dropdown>
<Dropdown trigger="click" @on-click="click" style="margin-left: 20px">
<a href="javascript:void(0)"> <a href="javascript:void(0)">
click 触发 click 触发
<Icon type="arrow-down-b"></Icon> <Icon type="arrow-down-b"></Icon>