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 | } | ... | ... |