Dropdown add transfer prop
But not support Nested Usage
This commit is contained in:
parent
fcf3cace8e
commit
3e4bab9655
3 changed files with 56 additions and 68 deletions
|
@ -1,7 +1,17 @@
|
|||
<template>
|
||||
<Poptip trigger="hover" title="提示标题" :transfer="true" placement="left" content="提示内容">
|
||||
<Button>hover 激活</Button>
|
||||
</Poptip>
|
||||
<Dropdown transfer>
|
||||
<a href="javascript:void(0)">
|
||||
下拉菜单
|
||||
<Icon type="arrow-down-b"></Icon>
|
||||
</a>
|
||||
<Dropdown-menu slot="list">
|
||||
<Dropdown-item>驴打滚</Dropdown-item>
|
||||
<Dropdown-item>炸酱面</Dropdown-item>
|
||||
<Dropdown-item disabled>豆汁儿</Dropdown-item>
|
||||
<Dropdown-item>冰糖葫芦</Dropdown-item>
|
||||
<Dropdown-item divided>北京烤鸭</Dropdown-item>
|
||||
</Dropdown-menu>
|
||||
</Dropdown>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
|
|
|
@ -1,64 +1,29 @@
|
|||
<!--<template>-->
|
||||
<!--<Row>-->
|
||||
<!--<i-col span="8">-->
|
||||
<!--<Card>-->
|
||||
<!--<Dropdown @on-click="handleClick">-->
|
||||
<!--<a href="javascript:void(0)">-->
|
||||
<!--下拉菜单-->
|
||||
<!--<Icon type="arrow-down-b"></Icon>-->
|
||||
<!--</a>-->
|
||||
<!--<Dropdown-menu slot="list">-->
|
||||
<!--<Dropdown-item name="1">驴打滚</Dropdown-item>-->
|
||||
<!--<Dropdown-item name="2">炸酱面</Dropdown-item>-->
|
||||
<!--<Dropdown-item name="3" disabled>豆汁儿</Dropdown-item>-->
|
||||
<!--<Dropdown-item name="4">冰糖葫芦</Dropdown-item>-->
|
||||
<!--<Dropdown-item name="5" divided>北京烤鸭</Dropdown-item>-->
|
||||
<!--</Dropdown-menu>-->
|
||||
<!--</Dropdown>-->
|
||||
<!--</Card>-->
|
||||
<!--</i-col>-->
|
||||
<!--</Row>-->
|
||||
<!--</template>-->
|
||||
<!--<script>-->
|
||||
<!--export default {-->
|
||||
<!--methods: {-->
|
||||
<!--handleClick (val) {-->
|
||||
<!--console.log(val)-->
|
||||
<!--}-->
|
||||
<!--}-->
|
||||
<!--}-->
|
||||
<!--</script>-->
|
||||
|
||||
<template>
|
||||
<Table border :context="self" :columns="columns7" :data="data6"></Table>
|
||||
<Dropdown transfer>
|
||||
<a href="javascript:void(0)">
|
||||
北京小吃
|
||||
<Icon type="arrow-down-b"></Icon>
|
||||
</a>
|
||||
<Dropdown-menu slot="list">
|
||||
<Dropdown-item>驴打滚</Dropdown-item>
|
||||
<Dropdown-item>炸酱面</Dropdown-item>
|
||||
<Dropdown-item>豆汁儿</Dropdown-item>
|
||||
<Dropdown placement="right-start" transfer>
|
||||
<Dropdown-item>
|
||||
北京烤鸭
|
||||
<Icon type="ios-arrow-right"></Icon>
|
||||
</Dropdown-item>
|
||||
<Dropdown-menu slot="list">
|
||||
<Dropdown-item>挂炉烤鸭</Dropdown-item>
|
||||
<Dropdown-item>焖炉烤鸭</Dropdown-item>
|
||||
</Dropdown-menu>
|
||||
</Dropdown>
|
||||
<Dropdown-item>冰糖葫芦</Dropdown-item>
|
||||
</Dropdown-menu>
|
||||
</Dropdown>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
self: this,
|
||||
columns7: [
|
||||
{
|
||||
title: '姓名',
|
||||
key: 'name',
|
||||
render (row, column, index) {
|
||||
return `<Dropdown @on-click="change"><a href="javascript:void(0)">下拉菜单<Icon type="arrow-down-b"></Icon></a><Dropdown-menu slot="list"><Dropdown-item name="1">驴打滚</Dropdown-item><Dropdown-item name="2">炸酱面</Dropdown-item><Dropdown-item disabled name="3">豆汁儿</Dropdown-item><Dropdown-item>冰糖葫芦</Dropdown-item><Dropdown-item divided>北京烤鸭</Dropdown-item></Dropdown-menu></Dropdown>`;
|
||||
}
|
||||
}
|
||||
],
|
||||
data6: [
|
||||
{
|
||||
name: '王小明',
|
||||
age: 18,
|
||||
address: '北京市朝阳区芍药居'
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
change (s) {
|
||||
console.log(s)
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
|
|
|
@ -6,20 +6,27 @@
|
|||
@mouseleave="handleMouseleave">
|
||||
<div :class="[prefixCls + '-rel']" ref="reference" @click="handleClick"><slot></slot></div>
|
||||
<transition :name="transition">
|
||||
<Drop v-show="currentVisible" :placement="placement" ref="drop"><slot name="list"></slot></Drop>
|
||||
<Drop
|
||||
v-show="currentVisible"
|
||||
:placement="placement"
|
||||
ref="drop"
|
||||
@mouseenter.native="handleMouseenter"
|
||||
@mouseleave.native="handleMouseleave"
|
||||
v-transfer-dom:forbidden="transfer"><slot name="list"></slot></Drop>
|
||||
</transition>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import Drop from '../select/dropdown.vue';
|
||||
import clickoutside from '../../directives/clickoutside';
|
||||
import TransferDom from '../../directives/transfer-dom';
|
||||
import { oneOf, findComponentUpward } from '../../utils/assist';
|
||||
|
||||
const prefixCls = 'ivu-dropdown';
|
||||
|
||||
export default {
|
||||
name: 'Dropdown',
|
||||
directives: { clickoutside },
|
||||
directives: { clickoutside, TransferDom },
|
||||
components: { Drop },
|
||||
props: {
|
||||
trigger: {
|
||||
|
@ -37,6 +44,10 @@
|
|||
visible: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
transfer: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
|
@ -76,7 +87,7 @@
|
|||
if (this.trigger !== 'hover') {
|
||||
return false;
|
||||
}
|
||||
clearTimeout(this.timeout);
|
||||
if (this.timeout) clearTimeout(this.timeout);
|
||||
this.timeout = setTimeout(() => {
|
||||
this.currentVisible = true;
|
||||
}, 250);
|
||||
|
@ -86,10 +97,12 @@
|
|||
if (this.trigger !== 'hover') {
|
||||
return false;
|
||||
}
|
||||
if (this.timeout) {
|
||||
clearTimeout(this.timeout);
|
||||
this.timeout = setTimeout(() => {
|
||||
this.currentVisible = false;
|
||||
}, 150);
|
||||
}
|
||||
},
|
||||
handleClose () {
|
||||
if (this.trigger === 'custom') return false;
|
||||
|
|
Loading…
Add table
Reference in a new issue