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

Dropdown add transfer prop

Browse source 
But not support Nested Usage
This commit is contained in:
梁灏 2017-07-18 17:58:45 +08:00
parent fcf3cace8e
commit 3e4bab9655
3 changed files with 56 additions and 68 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
examples/components/test.vue
View file

@ -1,7 +1,17 @@
<template> <template>
<Poptip trigger="hover" title="提示标题" :transfer="true" placement="left" content="提示内容"> <Dropdown transfer>
<Button>hover 激活</Button> <a href="javascript:void(0)">
</Poptip> 下拉菜单
<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> </template>
<script> <script>
export default { export default {

81
examples/routers/dropdown.vue
View file

@ -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> <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> </template>
<script> <script>
export default { 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> </script>

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

@ -6,20 +6,27 @@
@mouseleave="handleMouseleave"> @mouseleave="handleMouseleave">
<div :class="[prefixCls + '-rel']" ref="reference" @click="handleClick"><slot></slot></div> <div :class="[prefixCls + '-rel']" ref="reference" @click="handleClick"><slot></slot></div>
<transition :name="transition"> <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> </transition>
</div> </div>
</template> </template>
<script> <script>
import Drop from '../select/dropdown.vue'; import Drop from '../select/dropdown.vue';
import clickoutside from '../../directives/clickoutside'; import clickoutside from '../../directives/clickoutside';
import TransferDom from '../../directives/transfer-dom';
import { oneOf, findComponentUpward } from '../../utils/assist'; import { oneOf, findComponentUpward } from '../../utils/assist';
const prefixCls = 'ivu-dropdown'; const prefixCls = 'ivu-dropdown';
export default { export default {
name: 'Dropdown', name: 'Dropdown',
directives: { clickoutside }, directives: { clickoutside, TransferDom },
components: { Drop }, components: { Drop },
props: { props: {
trigger: { trigger: {
@ -37,6 +44,10 @@
visible: { visible: {
type: Boolean, type: Boolean,
default: false default: false
},
transfer: {
type: Boolean,
default: false
} }
}, },
computed: { computed: {
@ -76,7 +87,7 @@
if (this.trigger !== 'hover') { if (this.trigger !== 'hover') {
return false; return false;
} }
clearTimeout(this.timeout); if (this.timeout) clearTimeout(this.timeout);
this.timeout = setTimeout(() => { this.timeout = setTimeout(() => {
this.currentVisible = true; this.currentVisible = true;
}, 250); }, 250);
@ -86,10 +97,12 @@
if (this.trigger !== 'hover') { if (this.trigger !== 'hover') {
return false; return false;
} }
if (this.timeout) {
clearTimeout(this.timeout); clearTimeout(this.timeout);
this.timeout = setTimeout(() => { this.timeout = setTimeout(() => {
this.currentVisible = false; this.currentVisible = false;
}, 150); }, 150);
}
}, },
handleClose () { handleClose () {
if (this.trigger === 'custom') return false; if (this.trigger === 'custom') return false;