other / mew-iview

Commit 407eabd5c3d8472dde4b6431feef2be8a2ab50ef

Authored by 梁灏
1 parent 6b71ba94

update Dropdown 

update Dropdown
Showing 3 changed files with 126 additions and 84 deletions   Show diff stats
Inline Side-by-side
src/components/dropdown/dropdown-item.vue
  Show/Hide comments   View file @407eabd
@@ -38,6 +38,7 @@ @@ -38,6 +38,7 @@
38 handleClick () { 38 handleClick () {
39 const $parent = this.$parent.$parent; 39 const $parent = this.$parent.$parent;
40 const hasChildren = this.$parent && this.$parent.$options.name === 'Dropdown'; 40 const hasChildren = this.$parent && this.$parent.$options.name === 'Dropdown';
  41 +
41 if (this.disabled) { 42 if (this.disabled) {
42 this.$nextTick(() => { 43 this.$nextTick(() => {
43 $parent.visible = true; 44 $parent.visible = true;
src/components/dropdown/dropdown.vue
  Show/Hide comments   View file @407eabd
1 <template> 1 <template>
2 <div 2 <div
3 :class="[prefixCls]" 3 :class="[prefixCls]"
4 - @click="handleClick" 4 + v-clickoutside="handleClose"
5 @mouseenter="handleMouseenter" 5 @mouseenter="handleMouseenter"
6 - @mouseleave="handleMouseleave"  
7 - v-clickoutside="handleClose">  
8 - <div :class="[prefixCls-rel]" v-el:reference><slot></slot></div>  
9 - <Drop v-show="visible" :placement="placement" transition="slide-up" v-ref:drop><slot name="list"></slot></Drop> 6 + @mouseleave="handleMouseleave">
  7 + <div
  8 + :class="[prefixCls-rel]"
  9 + v-el:reference
  10 + @click="handleClick"><slot></slot></div>
  11 + <Drop v-show="visible" :placement="placement" :transition="transition" v-ref:drop><slot name="list"></slot></Drop>
10 </div> 12 </div>
11 </template> 13 </template>
12 <script> 14 <script>
@@ -34,6 +36,11 @@ @@ -34,6 +36,11 @@
34 default: 'bottom' 36 default: 'bottom'
35 } 37 }
36 }, 38 },
  39 + computed: {
  40 + transition () {
  41 + return ['bottom-start', 'bottom', 'bottom-end'].indexOf(this.placement) > -1 ? 'slide-up' : 'fade';
  42 + }
  43 + },
37 data () { 44 data () {
38 return { 45 return {
39 prefixCls: prefixCls, 46 prefixCls: prefixCls,
@@ -92,14 +99,20 @@ @@ -92,14 +99,20 @@
92 events: { 99 events: {
93 'on-click' (key) { 100 'on-click' (key) {
94 const $parent = this.hasParent(); 101 const $parent = this.hasParent();
95 - if ($parent ) $parent.$emit('on-click', key) 102 + if ($parent ) $parent.$emit('on-click', key);
96 }, 103 },
97 'on-hover-click' () { 104 'on-hover-click' () {
98 - this.$nextTick(() => {  
99 - this.visible = false;  
100 - });  
101 const $parent = this.hasParent(); 105 const $parent = this.hasParent();
102 - if ($parent) $parent.$emit('on-hover-click'); 106 + if ($parent) {
  107 + this.$nextTick(() => {
  108 + this.visible = false;
  109 + });
  110 + $parent.$emit('on-hover-click');
  111 + } else {
  112 + this.$nextTick(() => {
  113 + this.visible = false;
  114 + });
  115 + }
103 }, 116 },
104 'on-haschild-click' () { 117 'on-haschild-click' () {
105 this.$nextTick(() => { 118 this.$nextTick(() => {
test/routers/dropdown.vue
  Show/Hide comments   View file @407eabd
1 <template> 1 <template>
2 - <Dropdown trigger="hover" @on-click="click" style="margin-left: 20px">  
3 - <a href="javascript:void(0)">  
4 - hover 触发  
5 - <Icon type="arrow-down-b"></Icon>  
6 - </a>  
7 - <Dropdown-menu slot="list">  
8 - <Dropdown-item>驴打滚</Dropdown-item>  
9 - <Dropdown placement="right-start">  
10 - <Dropdown-item>  
11 - 炸酱面  
12 - <Icon type="arrow-right-b"></Icon>  
13 - </Dropdown-item>  
14 - <Dropdown-menu slot="list">  
15 - <Dropdown-item>驴打滚</Dropdown-item>  
16 - <Dropdown-item>炸酱面</Dropdown-item>  
17 - <Dropdown-item>豆汁儿</Dropdown-item>  
18 - <Dropdown placement="right-start">  
19 - <Dropdown-item>  
20 - 冰糖葫芦  
21 - <Icon type="arrow-right-b"></Icon>  
22 - </Dropdown-item>  
23 - <Dropdown-menu slot="list">  
24 - <Dropdown-item>驴打滚</Dropdown-item>  
25 - <Dropdown-item key="123">炸酱面</Dropdown-item>  
26 - <Dropdown-item>豆汁儿</Dropdown-item>  
27 - <Dropdown-item>冰糖葫芦</Dropdown-item>  
28 - <Dropdown-item>北京烤鸭</Dropdown-item>  
29 - </Dropdown-menu>  
30 - </Dropdown>  
31 - <Dropdown-item>北京烤鸭</Dropdown-item>  
32 - </Dropdown-menu>  
33 - </Dropdown>  
34 - <Dropdown-item>豆汁儿</Dropdown-item>  
35 - <Dropdown-item>冰糖葫芦</Dropdown-item>  
36 - <Dropdown-item>北京烤鸭</Dropdown-item>  
37 - </Dropdown-menu>  
38 - </Dropdown>  
39 - <Dropdown trigger="click" @on-click="click" style="margin-left: 20px">  
40 - <a href="javascript:void(0)">  
41 - click 触发  
42 - <Icon type="arrow-down-b"></Icon>  
43 - </a>  
44 - <Dropdown-menu slot="list">  
45 - <Dropdown-item>驴打滚</Dropdown-item>  
46 - <Dropdown placement="right-start">  
47 - <Dropdown-item>  
48 - 炸酱面  
49 - <Icon type="arrow-right-b"></Icon>  
50 - </Dropdown-item>  
51 - <Dropdown-menu slot="list">  
52 - <Dropdown-item>驴打滚</Dropdown-item>  
53 - <Dropdown-item>炸酱面</Dropdown-item>  
54 - <Dropdown-item>豆汁儿</Dropdown-item>  
55 - <Dropdown placement="right-start">  
56 - <Dropdown-item>  
57 - 冰糖葫芦  
58 - <Icon type="arrow-right-b"></Icon>  
59 - </Dropdown-item>  
60 - <Dropdown-menu slot="list">  
61 - <Dropdown-item>驴打滚</Dropdown-item>  
62 - <Dropdown-item key="123">炸酱面</Dropdown-item>  
63 - <Dropdown-item>豆汁儿</Dropdown-item>  
64 - <Dropdown-item>冰糖葫芦</Dropdown-item>  
65 - <Dropdown-item>北京烤鸭</Dropdown-item>  
66 - </Dropdown-menu>  
67 - </Dropdown>  
68 - <Dropdown-item>北京烤鸭</Dropdown-item>  
69 - </Dropdown-menu>  
70 - </Dropdown>  
71 - <Dropdown-item>豆汁儿</Dropdown-item>  
72 - <Dropdown-item>冰糖葫芦</Dropdown-item>  
73 - <Dropdown-item>北京烤鸭</Dropdown-item>  
74 - </Dropdown-menu>  
75 - </Dropdown> 2 + <Card>
  3 + <Dropdown>
  4 + <a href="javascript:void(0)">
  5 + hover 触发
  6 + <Icon type="arrow-down-b"></Icon>
  7 + </a>
  8 + <Dropdown-menu slot="list">
  9 + <Dropdown-item>驴打滚</Dropdown-item>
  10 + <Dropdown-item>炸酱面</Dropdown-item>
  11 + <Dropdown-item>豆汁儿</Dropdown-item>
  12 + <Dropdown-item>冰糖葫芦</Dropdown-item>
  13 + <Dropdown-item>北京烤鸭</Dropdown-item>
  14 + </Dropdown-menu>
  15 + </Dropdown>
  16 + <Dropdown trigger="click" style="margin-left: 20px">
  17 + <a href="javascript:void(0)">
  18 + click 触发
  19 + <Icon type="arrow-down-b"></Icon>
  20 + </a>
  21 + <Dropdown-menu slot="list">
  22 + <Dropdown-item>驴打滚</Dropdown-item>
  23 + <Dropdown-item>炸酱面</Dropdown-item>
  24 + <Dropdown-item>豆汁儿</Dropdown-item>
  25 + <Dropdown-item>冰糖葫芦</Dropdown-item>
  26 + <Dropdown-item>北京烤鸭</Dropdown-item>
  27 + </Dropdown-menu>
  28 + </Dropdown>
  29 + <Dropdown trigger="hover" @on-click="click" style="margin-left: 20px">
  30 + <a href="javascript:void(0)">
  31 + hover 触发
  32 + <Icon type="arrow-down-b"></Icon>
  33 + </a>
  34 + <Dropdown-menu slot="list">
  35 + <Dropdown-item>驴打滚</Dropdown-item>
  36 + <Dropdown placement="right-start">
  37 + <Dropdown-item>
  38 + 炸酱面
  39 + <Icon type="arrow-right-b"></Icon>
  40 + </Dropdown-item>
  41 + <Dropdown-menu slot="list">
  42 + <Dropdown-item>驴打滚</Dropdown-item>
  43 + <Dropdown-item>炸酱面</Dropdown-item>
  44 + <Dropdown-item>豆汁儿</Dropdown-item>
  45 + <Dropdown placement="right-start">
  46 + <Dropdown-item>
  47 + 冰糖葫芦
  48 + <Icon type="arrow-right-b"></Icon>
  49 + </Dropdown-item>
  50 + <Dropdown-menu slot="list">
  51 + <Dropdown-item>驴打滚</Dropdown-item>
  52 + <Dropdown-item key="123">炸酱面</Dropdown-item>
  53 + <Dropdown-item>豆汁儿</Dropdown-item>
  54 + <Dropdown-item>冰糖葫芦</Dropdown-item>
  55 + <Dropdown-item>北京烤鸭</Dropdown-item>
  56 + </Dropdown-menu>
  57 + </Dropdown>
  58 + <Dropdown-item>北京烤鸭</Dropdown-item>
  59 + </Dropdown-menu>
  60 + </Dropdown>
  61 + <Dropdown-item>豆汁儿</Dropdown-item>
  62 + <Dropdown-item>冰糖葫芦</Dropdown-item>
  63 + <Dropdown-item>北京烤鸭</Dropdown-item>
  64 + </Dropdown-menu>
  65 + </Dropdown>
  66 + <Dropdown trigger="click" @on-click="click" style="margin-left: 20px">
  67 + <a href="javascript:void(0)">
  68 + click 触发
  69 + <Icon type="arrow-down-b"></Icon>
  70 + </a>
  71 + <Dropdown-menu slot="list">
  72 + <Dropdown-item>驴打滚</Dropdown-item>
  73 + <Dropdown placement="right-start">
  74 + <Dropdown-item>
  75 + 炸酱面
  76 + <Icon type="arrow-right-b"></Icon>
  77 + </Dropdown-item>
  78 + <Dropdown-menu slot="list">
  79 + <Dropdown-item>驴打滚</Dropdown-item>
  80 + <Dropdown-item>炸酱面</Dropdown-item>
  81 + <Dropdown-item>豆汁儿</Dropdown-item>
  82 + <Dropdown placement="right-start">
  83 + <Dropdown-item>
  84 + 冰糖葫芦
  85 + <Icon type="arrow-right-b"></Icon>
  86 + </Dropdown-item>
  87 + <Dropdown-menu slot="list">
  88 + <Dropdown-item>驴打滚</Dropdown-item>
  89 + <Dropdown-item key="123">炸酱面</Dropdown-item>
  90 + <Dropdown-item>豆汁儿</Dropdown-item>
  91 + <Dropdown-item>冰糖葫芦</Dropdown-item>
  92 + <Dropdown-item>北京烤鸭</Dropdown-item>
  93 + </Dropdown-menu>
  94 + </Dropdown>
  95 + <Dropdown-item>北京烤鸭</Dropdown-item>
  96 + </Dropdown-menu>
  97 + </Dropdown>
  98 + <Dropdown-item>豆汁儿</Dropdown-item>
  99 + <Dropdown-item>冰糖葫芦</Dropdown-item>
  100 + <Dropdown-item>北京烤鸭</Dropdown-item>
  101 + </Dropdown-menu>
  102 + </Dropdown>
  103 + </Card>
76 </template> 104 </template>
77 <script> 105 <script>
78 export default { 106 export default {