Commit 99cde29d04ff755379ba1337bb725f205f48340a
1 parent
3f281d6c
update Checkbox
update Checkbox
Showing
3 changed files
with
31 additions
and
21 deletions
Show diff stats
examples/routers/checkbox.vue
| ... | ... | @@ -27,9 +27,17 @@ |
| 27 | 27 | <div @click="c">修改1</div> |
| 28 | 28 | {{ fruit }} |
| 29 | 29 | <Checkbox-group v-model="fruit"> |
| 30 | - <Checkbox label="香蕉"></Checkbox> | |
| 31 | - <Checkbox label="苹果"></Checkbox> | |
| 32 | - <Checkbox label="西瓜"></Checkbox> | |
| 30 | + <Row> | |
| 31 | + <i-col span="8"> | |
| 32 | + <Checkbox label="香蕉"></Checkbox> | |
| 33 | + </i-col> | |
| 34 | + <i-col span="8"> | |
| 35 | + <Checkbox label="苹果"></Checkbox> | |
| 36 | + </i-col> | |
| 37 | + <i-col span="8"> | |
| 38 | + <Checkbox label="西瓜"></Checkbox> | |
| 39 | + </i-col> | |
| 40 | + </Row> | |
| 33 | 41 | </Checkbox-group> |
| 34 | 42 | <br><br> |
| 35 | 43 | <div style="border-bottom: 1px solid #e9e9e9;padding-bottom:6px;margin-bottom:6px;"> | ... | ... |
src/components/checkbox/checkbox-group.vue
| ... | ... | @@ -4,6 +4,7 @@ |
| 4 | 4 | </div> |
| 5 | 5 | </template> |
| 6 | 6 | <script> |
| 7 | + import { findComponentsDownward } from '../../utils/assist'; | |
| 7 | 8 | import Emitter from '../../mixins/emitter'; |
| 8 | 9 | const prefixCls = 'ivu-checkbox-group'; |
| 9 | 10 | |
| ... | ... | @@ -20,7 +21,8 @@ |
| 20 | 21 | }, |
| 21 | 22 | data () { |
| 22 | 23 | return { |
| 23 | - currentValue: this.value | |
| 24 | + currentValue: this.value, | |
| 25 | + childrens: [] | |
| 24 | 26 | }; |
| 25 | 27 | }, |
| 26 | 28 | computed: { |
| ... | ... | @@ -34,15 +36,18 @@ |
| 34 | 36 | methods: { |
| 35 | 37 | updateModel (update) { |
| 36 | 38 | const value = this.value; |
| 39 | + this.childrens = findComponentsDownward(this, 'Checkbox'); | |
| 37 | 40 | |
| 38 | - this.$children.forEach((child) => { | |
| 39 | - child.model = value; | |
| 41 | + if (this.childrens) { | |
| 42 | + this.childrens.forEach(child => { | |
| 43 | + child.model = value; | |
| 40 | 44 | |
| 41 | - if (update) { | |
| 42 | - child.currentValue = value.indexOf(child.label) >= 0; | |
| 43 | - child.group = true; | |
| 44 | - } | |
| 45 | - }); | |
| 45 | + if (update) { | |
| 46 | + child.currentValue = value.indexOf(child.label) >= 0; | |
| 47 | + child.group = true; | |
| 48 | + } | |
| 49 | + }); | |
| 50 | + } | |
| 46 | 51 | }, |
| 47 | 52 | change (data) { |
| 48 | 53 | this.currentValue = data; | ... | ... |
src/components/checkbox/checkbox.vue
| ... | ... | @@ -22,6 +22,7 @@ |
| 22 | 22 | </label> |
| 23 | 23 | </template> |
| 24 | 24 | <script> |
| 25 | + import { findComponentUpward } from '../../utils/assist'; | |
| 25 | 26 | import Emitter from '../../mixins/emitter'; |
| 26 | 27 | |
| 27 | 28 | const prefixCls = 'ivu-checkbox'; |
| ... | ... | @@ -51,7 +52,8 @@ |
| 51 | 52 | model: [], |
| 52 | 53 | currentValue: this.value, |
| 53 | 54 | group: false, |
| 54 | - showSlot: true | |
| 55 | + showSlot: true, | |
| 56 | + parent: findComponentUpward(this, 'CheckboxGroup') | |
| 55 | 57 | }; |
| 56 | 58 | }, |
| 57 | 59 | computed: { |
| ... | ... | @@ -83,16 +85,11 @@ |
| 83 | 85 | } |
| 84 | 86 | }, |
| 85 | 87 | mounted () { |
| 86 | - // todo 使用 while向上查找 | |
| 87 | - if (this.$parent && this.$parent.$options.name === 'CheckboxGroup') this.group = true; | |
| 88 | + this.parent = findComponentUpward(this, 'CheckboxGroup'); | |
| 89 | + if (this.parent) this.group = true; | |
| 88 | 90 | if (!this.group) { |
| 89 | 91 | this.updateModel(); |
| 90 | -// if (this.$refs.slot && this.$refs.slot.innerHTML === '') { | |
| 91 | -// this.showSlot = false; | |
| 92 | -// } | |
| 93 | - if (this.$slots.default === undefined) { | |
| 94 | - this.showSlot = false; | |
| 95 | - } | |
| 92 | + this.showSlot = this.$slots.default === undefined; | |
| 96 | 93 | } |
| 97 | 94 | }, |
| 98 | 95 | methods: { |
| ... | ... | @@ -106,7 +103,7 @@ |
| 106 | 103 | this.$emit('input', checked); |
| 107 | 104 | |
| 108 | 105 | if (this.group) { |
| 109 | - this.$parent.change(this.model); | |
| 106 | + this.parent.change(this.model); | |
| 110 | 107 | } else { |
| 111 | 108 | this.$emit('on-change', checked); |
| 112 | 109 | this.dispatch('FormItem', 'on-form-change', checked); | ... | ... |