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

update Dropdown

Browse source 
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
Show stats Download patch file Download diff file Expand all files Collapse all files

6
src/components/dropdown/dropdown-item.vue
View file

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

31
src/components/dropdown/dropdown.vue
View file

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

37
test/routers/dropdown.vue
View file

@ -1,5 +1,42 @@
<template>
<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)">
click 触发
<Icon type="arrow-down-b"></Icon>