Support trueValue and falseValue for radio
This commit is contained in:
parent
a81253ecd4
commit
d24f508248
2 changed files with 25 additions and 9 deletions
|
@ -1,11 +1,13 @@
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
|
<Radio true-value="true" false-value="false" v-model="testValue">test</Radio> {{ testValue }}
|
||||||
<Radio-group v-model="date.sex">
|
<Radio-group v-model="date.sex">
|
||||||
<div v-if="show">
|
<div v-if="show">
|
||||||
<Radio label="male"></Radio>
|
<Radio label="male" true-value="true" false-value="false"></Radio>
|
||||||
<Radio label="female"></Radio>
|
<Radio label="female" true-value="true" false-value="false"></Radio>
|
||||||
</div>
|
</div>
|
||||||
</Radio-group>
|
</Radio-group>
|
||||||
|
{{ date }}
|
||||||
<Button @click="handleChange">change</Button>
|
<Button @click="handleChange">change</Button>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
@ -16,7 +18,8 @@
|
||||||
date: {
|
date: {
|
||||||
sex: 'male'
|
sex: 'male'
|
||||||
},
|
},
|
||||||
show: false
|
show: false,
|
||||||
|
testValue: null
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
|
|
@ -22,7 +22,15 @@
|
||||||
mixins: [ Emitter ],
|
mixins: [ Emitter ],
|
||||||
props: {
|
props: {
|
||||||
value: {
|
value: {
|
||||||
type: Boolean,
|
type: [String, Number, Boolean],
|
||||||
|
default: false
|
||||||
|
},
|
||||||
|
trueValue: {
|
||||||
|
type: [String, Number, Boolean],
|
||||||
|
default: true
|
||||||
|
},
|
||||||
|
falseValue: {
|
||||||
|
type: [String, Number, Boolean],
|
||||||
default: false
|
default: false
|
||||||
},
|
},
|
||||||
label: {
|
label: {
|
||||||
|
@ -83,7 +91,9 @@
|
||||||
|
|
||||||
const checked = event.target.checked;
|
const checked = event.target.checked;
|
||||||
this.currentValue = checked;
|
this.currentValue = checked;
|
||||||
this.$emit('input', checked);
|
|
||||||
|
let value = checked ? this.trueValue : this.falseValue;
|
||||||
|
this.$emit('input', value);
|
||||||
|
|
||||||
if (this.group && this.label !== undefined) {
|
if (this.group && this.label !== undefined) {
|
||||||
this.parent.change({
|
this.parent.change({
|
||||||
|
@ -92,16 +102,19 @@
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
if (!this.group) {
|
if (!this.group) {
|
||||||
this.$emit('on-change', checked);
|
this.$emit('on-change', value);
|
||||||
this.dispatch('FormItem', 'on-form-change', checked);
|
this.dispatch('FormItem', 'on-form-change', value);
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
updateValue () {
|
updateValue () {
|
||||||
this.currentValue = this.value;
|
this.currentValue = this.value === this.trueValue;
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
watch: {
|
watch: {
|
||||||
value () {
|
value (val) {
|
||||||
|
if (val !== this.trueValue && val !== this.falseValue) {
|
||||||
|
throw 'Value should be trueValue or falseValue.';
|
||||||
|
}
|
||||||
this.updateValue();
|
this.updateValue();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
Loading…
Add table
Reference in a new issue