other / 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 <template> 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 </template> 15 </template>
6 <script> 16 <script>
7 export default { 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 <template> 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 </template> 24 </template>
35 <script> 25 <script>
36 export default { 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 </script> 29 </script>
src/components/dropdown/dropdown.vue
  Show/Hide comments   View file @3e4bab9
@@ -6,20 +6,27 @@ @@ -6,20 +6,27 @@
6 @mouseleave="handleMouseleave"> 6 @mouseleave="handleMouseleave">
7 <div :class="[prefixCls + '-rel']" ref="reference" @click="handleClick"><slot></slot></div> 7 <div :class="[prefixCls + '-rel']" ref="reference" @click="handleClick"><slot></slot></div>
8 <transition :name="transition"> 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 </transition> 16 </transition>
11 </div> 17 </div>
12 </template> 18 </template>
13 <script> 19 <script>
14 import Drop from '../select/dropdown.vue'; 20 import Drop from '../select/dropdown.vue';
15 import clickoutside from '../../directives/clickoutside'; 21 import clickoutside from '../../directives/clickoutside';
  22 + import TransferDom from '../../directives/transfer-dom';
16 import { oneOf, findComponentUpward } from '../../utils/assist'; 23 import { oneOf, findComponentUpward } from '../../utils/assist';
17 24
18 const prefixCls = 'ivu-dropdown'; 25 const prefixCls = 'ivu-dropdown';
19 26
20 export default { 27 export default {
21 name: 'Dropdown', 28 name: 'Dropdown',
22 - directives: { clickoutside }, 29 + directives: { clickoutside, TransferDom },
23 components: { Drop }, 30 components: { Drop },
24 props: { 31 props: {
25 trigger: { 32 trigger: {
@@ -37,6 +44,10 @@ @@ -37,6 +44,10 @@
37 visible: { 44 visible: {
38 type: Boolean, 45 type: Boolean,
39 default: false 46 default: false
  47 + },
  48 + transfer: {
  49 + type: Boolean,
  50 + default: false
40 } 51 }
41 }, 52 },
42 computed: { 53 computed: {
@@ -76,7 +87,7 @@ @@ -76,7 +87,7 @@
76 if (this.trigger !== 'hover') { 87 if (this.trigger !== 'hover') {
77 return false; 88 return false;
78 } 89 }
79 - clearTimeout(this.timeout); 90 + if (this.timeout) clearTimeout(this.timeout);
80 this.timeout = setTimeout(() => { 91 this.timeout = setTimeout(() => {
81 this.currentVisible = true; 92 this.currentVisible = true;
82 }, 250); 93 }, 250);
@@ -86,10 +97,12 @@ @@ -86,10 +97,12 @@
86 if (this.trigger !== 'hover') { 97 if (this.trigger !== 'hover') {
87 return false; 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 handleClose () { 107 handleClose () {
95 if (this.trigger === 'custom') return false; 108 if (this.trigger === 'custom') return false;