update Dropdown
update Dropdown
This commit is contained in:
梁灏
parent
6b71ba9418
commit
407eabd5c3
3 changed files with 126 additions and 84 deletions
|
|
@ -38,6 +38,7 @@
|
|||
handleClick () {
|
||||
const $parent = this.$parent.$parent;
|
||||
const hasChildren = this.$parent && this.$parent.$options.name === 'Dropdown';
|
||||
|
||||
if (this.disabled) {
|
||||
this.$nextTick(() => {
|
||||
$parent.visible = true;
|
||||
|
|
|
|||
|
|
@ -1,12 +1,14 @@
|
|||
<template>
|
||||
<div
|
||||
:class="[prefixCls]"
|
||||
@click="handleClick"
|
||||
v-clickoutside="handleClose"
|
||||
@mouseenter="handleMouseenter"
|
||||
@mouseleave="handleMouseleave"
|
||||
v-clickoutside="handleClose">
|
||||
<div :class="[prefixCls-rel]" v-el:reference><slot></slot></div>
|
||||
<Drop v-show="visible" :placement="placement" transition="slide-up" v-ref:drop><slot name="list"></slot></Drop>
|
||||
@mouseleave="handleMouseleave">
|
||||
<div
|
||||
:class="[prefixCls-rel]"
|
||||
v-el:reference
|
||||
@click="handleClick"><slot></slot></div>
|
||||
<Drop v-show="visible" :placement="placement" :transition="transition" v-ref:drop><slot name="list"></slot></Drop>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
|
|
@ -34,6 +36,11 @@
|
|||
default: 'bottom'
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
transition () {
|
||||
return ['bottom-start', 'bottom', 'bottom-end'].indexOf(this.placement) > -1 ? 'slide-up' : 'fade';
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
prefixCls: prefixCls,
|
||||
|
|
@ -92,14 +99,20 @@
|
|||
events: {
|
||||
'on-click' (key) {
|
||||
const $parent = this.hasParent();
|
||||
if ($parent ) $parent.$emit('on-click', key)
|
||||
if ($parent ) $parent.$emit('on-click', key);
|
||||
},
|
||||
'on-hover-click' () {
|
||||
this.$nextTick(() => {
|
||||
this.visible = false;
|
||||
});
|
||||
const $parent = this.hasParent();
|
||||
if ($parent) $parent.$emit('on-hover-click');
|
||||
if ($parent) {
|
||||
this.$nextTick(() => {
|
||||
this.visible = false;
|
||||
});
|
||||
$parent.$emit('on-hover-click');
|
||||
} else {
|
||||
this.$nextTick(() => {
|
||||
this.visible = false;
|
||||
});
|
||||
}
|
||||
},
|
||||
'on-haschild-click' () {
|
||||
this.$nextTick(() => {
|
||||
|
|
|
|||
|
|
@ -1,78 +1,106 @@
|
|||
<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>
|
||||
</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>
|
||||
<Card>
|
||||
<Dropdown>
|
||||
<a href="javascript:void(0)">
|
||||
hover 触发
|
||||
<Icon type="arrow-down-b"></Icon>
|
||||
</a>
|
||||
<Dropdown-menu slot="list">
|
||||
<Dropdown-item>驴打滚</Dropdown-item>
|
||||
<Dropdown-item>炸酱面</Dropdown-item>
|
||||
<Dropdown-item>豆汁儿</Dropdown-item>
|
||||
<Dropdown-item>冰糖葫芦</Dropdown-item>
|
||||
<Dropdown-item>北京烤鸭</Dropdown-item>
|
||||
</Dropdown-menu>
|
||||
</Dropdown>
|
||||
<Dropdown trigger="click" style="margin-left: 20px">
|
||||
<a href="javascript:void(0)">
|
||||
click 触发
|
||||
<Icon type="arrow-down-b"></Icon>
|
||||
</a>
|
||||
<Dropdown-menu slot="list">
|
||||
<Dropdown-item>驴打滚</Dropdown-item>
|
||||
<Dropdown-item>炸酱面</Dropdown-item>
|
||||
<Dropdown-item>豆汁儿</Dropdown-item>
|
||||
<Dropdown-item>冰糖葫芦</Dropdown-item>
|
||||
<Dropdown-item>北京烤鸭</Dropdown-item>
|
||||
</Dropdown-menu>
|
||||
</Dropdown>
|
||||
<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>
|
||||
</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>
|
||||
</Card>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue