update Dropdown
update Dropdown
This commit is contained in:
parent
5557dd66f5
commit
6b71ba9418
3 changed files with 63 additions and 11 deletions
|
@ -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');
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -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');
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -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>
|
||||||
|
|
Loading…
Add table
Reference in a new issue