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,13 +37,15 @@ | ||
| 37 | methods: { | 37 | methods: { |
| 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 | if (this.disabled) { | 41 | if (this.disabled) { |
| 41 | this.$nextTick(() => { | 42 | this.$nextTick(() => { |
| 42 | $parent.visible = true; | 43 | $parent.visible = true; |
| 43 | }); | 44 | }); |
| 45 | + } else if (hasChildren) { | ||
| 46 | + this.$parent.$emit('on-haschild-click'); | ||
| 44 | } else { | 47 | } else { |
| 45 | - if ($parent.trigger === 'hover') { | ||
| 46 | - $parent.visible = false; | 48 | + if ($parent && $parent.$options.name === 'Dropdown') { |
| 47 | $parent.$emit('on-hover-click'); | 49 | $parent.$emit('on-hover-click'); |
| 48 | } | 50 | } |
| 49 | } | 51 | } |
src/components/dropdown/dropdown.vue
| @@ -70,6 +70,14 @@ | @@ -70,6 +70,14 @@ | ||
| 70 | return false; | 70 | return false; |
| 71 | } | 71 | } |
| 72 | this.visible = false; | 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 | watch: { | 83 | watch: { |
| @@ -83,17 +91,22 @@ | @@ -83,17 +91,22 @@ | ||
| 83 | }, | 91 | }, |
| 84 | events: { | 92 | events: { |
| 85 | 'on-click' (key) { | 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 | 'on-hover-click' () { | 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 | <template> | 1 | <template> |
| 2 | <Dropdown trigger="hover" @on-click="click" style="margin-left: 20px"> | 2 | <Dropdown trigger="hover" @on-click="click" style="margin-left: 20px"> |
| 3 | <a href="javascript:void(0)"> | 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 | click 触发 | 41 | click 触发 |
| 5 | <Icon type="arrow-down-b"></Icon> | 42 | <Icon type="arrow-down-b"></Icon> |
| 6 | </a> | 43 | </a> |