Commit 8db7924cdad4dca7bee78188069364513706a880
Committed by
GitHub
Merge pull request #1573 from rijn/1191
Support trueValue and falseValue
Showing
4 changed files
with
56 additions
and
17 deletions
Show diff stats
examples/routers/checkbox.vue
| 1 | 1 | <template> |
| 2 | 2 | <div> |
| 3 | + <div> | |
| 4 | + <Checkbox true-value="true" false-value="false" v-model="testValue1">test string</Checkbox> | |
| 5 | + {{ testValue1 }} | |
| 6 | + </div> | |
| 7 | + <div> | |
| 8 | + <Checkbox :true-value="0" :false-value="1" v-model="testValue2">test number</Checkbox> | |
| 9 | + {{ testValue2 }} | |
| 10 | + </div> | |
| 3 | 11 | <Checkbox-group v-model="fruit"> |
| 4 | - <Checkbox v-for="item in tags" :label="item.label" :key="item"></Checkbox> | |
| 12 | + <Checkbox v-for="item in tags" :label="item.label" :key="item.label" true-value="true"></Checkbox> | |
| 5 | 13 | </Checkbox-group> |
| 6 | 14 | <div>{{ fruit }}</div> |
| 7 | 15 | </div> |
| ... | ... | @@ -12,7 +20,9 @@ |
| 12 | 20 | return { |
| 13 | 21 | social: ['facebook', 'github'], |
| 14 | 22 | fruit: ['苹果'], |
| 15 | - tags: [] | |
| 23 | + tags: [], | |
| 24 | + testValue1: null, | |
| 25 | + testValue2: null | |
| 16 | 26 | } |
| 17 | 27 | }, |
| 18 | 28 | mounted () { | ... | ... |
examples/routers/radio.vue
| 1 | 1 | <template> |
| 2 | 2 | <div> |
| 3 | + <Radio true-value="true" false-value="false" v-model="testValue">test</Radio> {{ testValue }} | |
| 3 | 4 | <Radio-group v-model="date.sex"> |
| 4 | 5 | <div v-if="show"> |
| 5 | - <Radio label="male"></Radio> | |
| 6 | - <Radio label="female"></Radio> | |
| 6 | + <Radio label="male" true-value="true" false-value="false"></Radio> | |
| 7 | + <Radio label="female" true-value="true" false-value="false"></Radio> | |
| 7 | 8 | </div> |
| 8 | 9 | </Radio-group> |
| 10 | + {{ date }} | |
| 9 | 11 | <Button @click="handleChange">change</Button> |
| 10 | 12 | </div> |
| 11 | 13 | </template> |
| ... | ... | @@ -16,7 +18,8 @@ |
| 16 | 18 | date: { |
| 17 | 19 | sex: 'male' |
| 18 | 20 | }, |
| 19 | - show: false | |
| 21 | + show: false, | |
| 22 | + testValue: null | |
| 20 | 23 | } |
| 21 | 24 | }, |
| 22 | 25 | methods: { | ... | ... |
src/components/checkbox/checkbox.vue
| ... | ... | @@ -36,7 +36,15 @@ |
| 36 | 36 | default: false |
| 37 | 37 | }, |
| 38 | 38 | value: { |
| 39 | - type: Boolean, | |
| 39 | + type: [String, Number, Boolean], | |
| 40 | + default: false | |
| 41 | + }, | |
| 42 | + trueValue: { | |
| 43 | + type: [String, Number, Boolean], | |
| 44 | + default: true | |
| 45 | + }, | |
| 46 | + falseValue: { | |
| 47 | + type: [String, Number, Boolean], | |
| 40 | 48 | default: false |
| 41 | 49 | }, |
| 42 | 50 | label: { |
| ... | ... | @@ -102,21 +110,26 @@ |
| 102 | 110 | |
| 103 | 111 | const checked = event.target.checked; |
| 104 | 112 | this.currentValue = checked; |
| 105 | - this.$emit('input', checked); | |
| 113 | + | |
| 114 | + let value = checked ? this.trueValue : this.falseValue; | |
| 115 | + this.$emit('input', value); | |
| 106 | 116 | |
| 107 | 117 | if (this.group) { |
| 108 | 118 | this.parent.change(this.model); |
| 109 | 119 | } else { |
| 110 | - this.$emit('on-change', checked); | |
| 111 | - this.dispatch('FormItem', 'on-form-change', checked); | |
| 120 | + this.$emit('on-change', value); | |
| 121 | + this.dispatch('FormItem', 'on-form-change', value); | |
| 112 | 122 | } |
| 113 | 123 | }, |
| 114 | 124 | updateModel () { |
| 115 | - this.currentValue = this.value; | |
| 125 | + this.currentValue = this.value === this.trueValue; | |
| 116 | 126 | } |
| 117 | 127 | }, |
| 118 | 128 | watch: { |
| 119 | - value () { | |
| 129 | + value (val) { | |
| 130 | + if (val !== this.trueValue && val !== this.falseValue) { | |
| 131 | + throw 'Value should be trueValue or falseValue.'; | |
| 132 | + } | |
| 120 | 133 | this.updateModel(); |
| 121 | 134 | } |
| 122 | 135 | } | ... | ... |
src/components/radio/radio.vue
| ... | ... | @@ -22,7 +22,15 @@ |
| 22 | 22 | mixins: [ Emitter ], |
| 23 | 23 | props: { |
| 24 | 24 | value: { |
| 25 | - type: Boolean, | |
| 25 | + type: [String, Number, Boolean], | |
| 26 | + default: false | |
| 27 | + }, | |
| 28 | + trueValue: { | |
| 29 | + type: [String, Number, Boolean], | |
| 30 | + default: true | |
| 31 | + }, | |
| 32 | + falseValue: { | |
| 33 | + type: [String, Number, Boolean], | |
| 26 | 34 | default: false |
| 27 | 35 | }, |
| 28 | 36 | label: { |
| ... | ... | @@ -83,7 +91,9 @@ |
| 83 | 91 | |
| 84 | 92 | const checked = event.target.checked; |
| 85 | 93 | this.currentValue = checked; |
| 86 | - this.$emit('input', checked); | |
| 94 | + | |
| 95 | + let value = checked ? this.trueValue : this.falseValue; | |
| 96 | + this.$emit('input', value); | |
| 87 | 97 | |
| 88 | 98 | if (this.group && this.label !== undefined) { |
| 89 | 99 | this.parent.change({ |
| ... | ... | @@ -92,16 +102,19 @@ |
| 92 | 102 | }); |
| 93 | 103 | } |
| 94 | 104 | if (!this.group) { |
| 95 | - this.$emit('on-change', checked); | |
| 96 | - this.dispatch('FormItem', 'on-form-change', checked); | |
| 105 | + this.$emit('on-change', value); | |
| 106 | + this.dispatch('FormItem', 'on-form-change', value); | |
| 97 | 107 | } |
| 98 | 108 | }, |
| 99 | 109 | updateValue () { |
| 100 | - this.currentValue = this.value; | |
| 110 | + this.currentValue = this.value === this.trueValue; | |
| 101 | 111 | } |
| 102 | 112 | }, |
| 103 | 113 | watch: { |
| 104 | - value () { | |
| 114 | + value (val) { | |
| 115 | + if (val !== this.trueValue && val !== this.falseValue) { | |
| 116 | + throw 'Value should be trueValue or falseValue.'; | |
| 117 | + } | |
| 105 | 118 | this.updateValue(); |
| 106 | 119 | } |
| 107 | 120 | } | ... | ... |