chenhaodong / mew-iview

Commit 3e4bab965551fd54537576fff6d7ae8deeb11daa

Authored by 梁灏
1 parent fcf3cace

Dropdown add transfer prop 

But not support Nested Usage
Showing 3 changed files with 56 additions and 68 deletions   Show diff stats
Inline Side-by-side
examples/components/test.vue
  Show/Hide comments   View file @3e4bab9
1 1 <template>
2   - <Poptip trigger="hover" title="提示标题" :transfer="true" placement="left" content="提示内容">
3   - <Button>hover 激活</Button>
4   - </Poptip>
  2 + <Dropdown transfer>
  3 + <a href="javascript:void(0)">
  4 + 下拉菜单
  5 + <Icon type="arrow-down-b"></Icon>
  6 + </a>
  7 + <Dropdown-menu slot="list">
  8 + <Dropdown-item>驴打滚</Dropdown-item>
  9 + <Dropdown-item>炸酱面</Dropdown-item>
  10 + <Dropdown-item disabled>豆汁儿</Dropdown-item>
  11 + <Dropdown-item>冰糖葫芦</Dropdown-item>
  12 + <Dropdown-item divided>北京烤鸭</Dropdown-item>
  13 + </Dropdown-menu>
  14 + </Dropdown>
5 15 </template>
6 16 <script>
7 17 export default {
... ...
examples/routers/dropdown.vue
  Show/Hide comments   View file @3e4bab9
1   -<!--<template>-->
2   - <!--<Row>-->
3   - <!--<i-col span="8">-->
4   - <!--<Card>-->
5   - <!--<Dropdown @on-click="handleClick">-->
6   - <!--<a href="javascript:void(0)">-->
7   - <!--下拉菜单-->
8   - <!--<Icon type="arrow-down-b"></Icon>-->
9   - <!--</a>-->
10   - <!--<Dropdown-menu slot="list">-->
11   - <!--<Dropdown-item name="1">驴打滚</Dropdown-item>-->
12   - <!--<Dropdown-item name="2">炸酱面</Dropdown-item>-->
13   - <!--<Dropdown-item name="3" disabled>豆汁儿</Dropdown-item>-->
14   - <!--<Dropdown-item name="4">冰糖葫芦</Dropdown-item>-->
15   - <!--<Dropdown-item name="5" divided>北京烤鸭</Dropdown-item>-->
16   - <!--</Dropdown-menu>-->
17   - <!--</Dropdown>-->
18   - <!--</Card>-->
19   - <!--</i-col>-->
20   - <!--</Row>-->
21   -<!--</template>-->
22   -<!--<script>-->
23   - <!--export default {-->
24   - <!--methods: {-->
25   - <!--handleClick (val) {-->
26   - <!--console.log(val)-->
27   - <!--}-->
28   - <!--}-->
29   - <!--}-->
30   -<!--</script>-->
31   -
32 1 <template>
33   - <Table border :context="self" :columns="columns7" :data="data6"></Table>
  2 + <Dropdown transfer>
  3 + <a href="javascript:void(0)">
  4 + 北京小吃
  5 + <Icon type="arrow-down-b"></Icon>
  6 + </a>
  7 + <Dropdown-menu slot="list">
  8 + <Dropdown-item>驴打滚</Dropdown-item>
  9 + <Dropdown-item>炸酱面</Dropdown-item>
  10 + <Dropdown-item>豆汁儿</Dropdown-item>
  11 + <Dropdown placement="right-start" transfer>
  12 + <Dropdown-item>
  13 + 北京烤鸭
  14 + <Icon type="ios-arrow-right"></Icon>
  15 + </Dropdown-item>
  16 + <Dropdown-menu slot="list">
  17 + <Dropdown-item>挂炉烤鸭</Dropdown-item>
  18 + <Dropdown-item>焖炉烤鸭</Dropdown-item>
  19 + </Dropdown-menu>
  20 + </Dropdown>
  21 + <Dropdown-item>冰糖葫芦</Dropdown-item>
  22 + </Dropdown-menu>
  23 + </Dropdown>
34 24 </template>
35 25 <script>
36 26 export default {
37   - data () {
38   - return {
39   - self: this,
40   - columns7: [
41   - {
42   - title: '姓名',
43   - key: 'name',
44   - render (row, column, index) {
45   - 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>`;
46   - }
47   - }
48   - ],
49   - data6: [
50   - {
51   - name: '王小明',
52   - age: 18,
53   - address: '北京市朝阳区芍药居'
54   - }
55   - ]
56   - }
57   - },
58   - methods: {
59   - change (s) {
60   - console.log(s)
61   - }
62   - }
  27 +
63 28 }
64 29 </script>
... ...
src/components/dropdown/dropdown.vue
  Show/Hide comments   View file @3e4bab9
... ... @@ -6,20 +6,27 @@
6 6 @mouseleave="handleMouseleave">
7 7 <div :class="[prefixCls + '-rel']" ref="reference" @click="handleClick"><slot></slot></div>
8 8 <transition :name="transition">
9   - <Drop v-show="currentVisible" :placement="placement" ref="drop"><slot name="list"></slot></Drop>
  9 + <Drop
  10 + v-show="currentVisible"
  11 + :placement="placement"
  12 + ref="drop"
  13 + @mouseenter.native="handleMouseenter"
  14 + @mouseleave.native="handleMouseleave"
  15 + v-transfer-dom:forbidden="transfer"><slot name="list"></slot></Drop>
10 16 </transition>
11 17 </div>
12 18 </template>
13 19 <script>
14 20 import Drop from '../select/dropdown.vue';
15 21 import clickoutside from '../../directives/clickoutside';
  22 + import TransferDom from '../../directives/transfer-dom';
16 23 import { oneOf, findComponentUpward } from '../../utils/assist';
17 24  
18 25 const prefixCls = 'ivu-dropdown';
19 26  
20 27 export default {
21 28 name: 'Dropdown',
22   - directives: { clickoutside },
  29 + directives: { clickoutside, TransferDom },
23 30 components: { Drop },
24 31 props: {
25 32 trigger: {
... ... @@ -37,6 +44,10 @@
37 44 visible: {
38 45 type: Boolean,
39 46 default: false
  47 + },
  48 + transfer: {
  49 + type: Boolean,
  50 + default: false
40 51 }
41 52 },
42 53 computed: {
... ... @@ -76,7 +87,7 @@
76 87 if (this.trigger !== 'hover') {
77 88 return false;
78 89 }
79   - clearTimeout(this.timeout);
  90 + if (this.timeout) clearTimeout(this.timeout);
80 91 this.timeout = setTimeout(() => {
81 92 this.currentVisible = true;
82 93 }, 250);
... ... @@ -86,10 +97,12 @@
86 97 if (this.trigger !== 'hover') {
87 98 return false;
88 99 }
89   - clearTimeout(this.timeout);
90   - this.timeout = setTimeout(() => {
91   - this.currentVisible = false;
92   - }, 150);
  100 + if (this.timeout) {
  101 + clearTimeout(this.timeout);
  102 + this.timeout = setTimeout(() => {
  103 + this.currentVisible = false;
  104 + }, 150);
  105 + }
93 106 },
94 107 handleClose () {
95 108 if (this.trigger === 'custom') return false;
... ...