Commit 6b71ba941828309b9cd64692bf64a70d45187e06
1 parent
5557dd66
update Dropdown
update Dropdown
Showing
3 changed files
with
63 additions
and
11 deletions
Show diff stats
src/components/dropdown/dropdown-item.vue
... | ... | @@ -37,13 +37,15 @@ |
37 | 37 | methods: { |
38 | 38 | handleClick () { |
39 | 39 | const $parent = this.$parent.$parent; |
40 | + const hasChildren = this.$parent && this.$parent.$options.name === 'Dropdown'; | |
40 | 41 | if (this.disabled) { |
41 | 42 | this.$nextTick(() => { |
42 | 43 | $parent.visible = true; |
43 | 44 | }); |
45 | + } else if (hasChildren) { | |
46 | + this.$parent.$emit('on-haschild-click'); | |
44 | 47 | } else { |
45 | - if ($parent.trigger === 'hover') { | |
46 | - $parent.visible = false; | |
48 | + if ($parent && $parent.$options.name === 'Dropdown') { | |
47 | 49 | $parent.$emit('on-hover-click'); |
48 | 50 | } |
49 | 51 | } | ... | ... |
src/components/dropdown/dropdown.vue
... | ... | @@ -70,6 +70,14 @@ |
70 | 70 | return false; |
71 | 71 | } |
72 | 72 | this.visible = false; |
73 | + }, | |
74 | + hasParent () { | |
75 | + const $parent = this.$parent.$parent; | |
76 | + if ($parent && $parent.$options.name === 'Dropdown') { | |
77 | + return $parent; | |
78 | + } else { | |
79 | + return false; | |
80 | + } | |
73 | 81 | } |
74 | 82 | }, |
75 | 83 | watch: { |
... | ... | @@ -83,17 +91,22 @@ |
83 | 91 | }, |
84 | 92 | events: { |
85 | 93 | 'on-click' (key) { |
86 | - const $parent = this.$parent.$parent; | |
87 | - if ($parent && $parent.$options.name === 'Dropdown') { | |
88 | - $parent.$emit('on-click', key); | |
89 | - } | |
94 | + const $parent = this.hasParent(); | |
95 | + if ($parent ) $parent.$emit('on-click', key) | |
90 | 96 | }, |
91 | 97 | 'on-hover-click' () { |
92 | - const $parent = this.$parent.$parent; | |
93 | - if ($parent && $parent.$options.name === 'Dropdown') { | |
94 | - $parent.visible = false; | |
95 | - $parent.$emit('on-hover-click'); | |
96 | - } | |
98 | + this.$nextTick(() => { | |
99 | + this.visible = false; | |
100 | + }); | |
101 | + const $parent = this.hasParent(); | |
102 | + if ($parent) $parent.$emit('on-hover-click'); | |
103 | + }, | |
104 | + 'on-haschild-click' () { | |
105 | + this.$nextTick(() => { | |
106 | + this.visible = true; | |
107 | + }); | |
108 | + const $parent = this.hasParent(); | |
109 | + if ($parent) $parent.$emit('on-haschild-click'); | |
97 | 110 | } |
98 | 111 | } |
99 | 112 | } | ... | ... |
test/routers/dropdown.vue
1 | 1 | <template> |
2 | 2 | <Dropdown trigger="hover" @on-click="click" style="margin-left: 20px"> |
3 | 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)"> | |
4 | 41 | click 触发 |
5 | 42 | <Icon type="arrow-down-b"></Icon> |
6 | 43 | </a> | ... | ... |