other / mew-iview

Commit a81253ecd4486b68311db31e47ca0aeaceacbe6f

Authored by Rijn
1 parent f3c6cd68

Update checkbox to support trueValue and falseValue

Showing 2 changed files with 31 additions and 8 deletions   Show diff stats
Inline Side-by-side
examples/routers/checkbox.vue
  Show/Hide comments   View file @a81253e
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 () {
... ...
src/components/checkbox/checkbox.vue
  Show/Hide comments   View file @a81253e
... ... @@ -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 }
... ...