From 3e4bab965551fd54537576fff6d7ae8deeb11daa Mon Sep 17 00:00:00 2001
From: 梁灏 <admin@aresn.com>
Date: Tue, 18 Jul 2017 17:58:45 +0800
Subject: [PATCH] Dropdown add transfer prop
---
examples/components/test.vue | 16 +++++++++++++---
examples/routers/dropdown.vue | 81 +++++++++++++++++++++++----------------------------------------------------------
src/components/dropdown/dropdown.vue | 27 ++++++++++++++++++++-------
3 files changed, 56 insertions(+), 68 deletions(-)
diff --git a/examples/components/test.vue b/examples/components/test.vue
index f2da902..6451c2a 100644
--- a/examples/components/test.vue
+++ b/examples/components/test.vue
@@ -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 {
diff --git a/examples/routers/dropdown.vue b/examples/routers/dropdown.vue
index 832f72b..7d44f49 100644
--- a/examples/routers/dropdown.vue
+++ b/examples/routers/dropdown.vue
@@ -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>
diff --git a/src/components/dropdown/dropdown.vue b/src/components/dropdown/dropdown.vue
index 5e331d8..9bb22f2 100644
--- a/src/components/dropdown/dropdown.vue
+++ b/src/components/dropdown/dropdown.vue
@@ -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;
}
- clearTimeout(this.timeout);
- this.timeout = setTimeout(() => {
- this.currentVisible = false;
- }, 150);
+ if (this.timeout) {
+ clearTimeout(this.timeout);
+ this.timeout = setTimeout(() => {
+ this.currentVisible = false;
+ }, 150);
+ }
},
handleClose () {
if (this.trigger === 'custom') return false;
--
libgit2 0.21.4