Commit 8db7924cdad4dca7bee78188069364513706a880

Authored by Aresn
Committed by GitHub
2 parents 27c86e34 d24f5082

Merge pull request #1573 from rijn/1191

Support trueValue and falseValue
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 }
... ...