chenhaodong / 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 38 handleClick () {
39 39 const $parent = this.$parent.$parent;
40 40 const hasChildren = this.$parent && this.$parent.$options.name === 'Dropdown';
  41 +
41 42 if (this.disabled) {
42 43 this.$nextTick(() => {
43 44 $parent.visible = true;
... ...
src/components/dropdown/dropdown.vue
  Show/Hide comments   View file @407eabd
1 1 <template>
2 2 <div
3 3 :class="[prefixCls]"
4   - @click="handleClick"
  4 + v-clickoutside="handleClose"
5 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 12 </div>
11 13 </template>
12 14 <script>
... ... @@ -34,6 +36,11 @@
34 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 44 data () {
38 45 return {
39 46 prefixCls: prefixCls,
... ... @@ -92,14 +99,20 @@
92 99 events: {
93 100 'on-click' (key) {
94 101 const $parent = this.hasParent();
95   - if ($parent ) $parent.$emit('on-click', key)
  102 + if ($parent ) $parent.$emit('on-click', key);
96 103 },
97 104 'on-hover-click' () {
98   - this.$nextTick(() => {
99   - this.visible = false;
100   - });
101 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 117 'on-haschild-click' () {
105 118 this.$nextTick(() => {
... ...
test/routers/dropdown.vue
  Show/Hide comments   View file @407eabd
1 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 104 </template>
77 105 <script>
78 106 export default {
... ...