2016-09-09 14:29:19 +08:00
|
|
|
<template>
|
|
|
|
<div :class="classes">
|
|
|
|
<slot></slot>
|
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
<script>
|
|
|
|
import { oneOf } from '../../utils/assist';
|
|
|
|
|
|
|
|
const prefixCls = 'ivu-radio-group';
|
|
|
|
|
|
|
|
export default {
|
2017-03-02 17:40:19 +08:00
|
|
|
name: 'RadioGroup',
|
2016-09-09 14:29:19 +08:00
|
|
|
props: {
|
2017-03-01 17:01:22 +08:00
|
|
|
value: {
|
2016-09-09 14:29:19 +08:00
|
|
|
type: [String, Number],
|
|
|
|
default: ''
|
|
|
|
},
|
|
|
|
size: {
|
|
|
|
validator (value) {
|
|
|
|
return oneOf(value, ['small', 'large']);
|
|
|
|
}
|
|
|
|
},
|
|
|
|
type: {
|
|
|
|
validator (value) {
|
|
|
|
return oneOf(value, ['button']);
|
|
|
|
}
|
2017-01-05 14:37:24 +08:00
|
|
|
},
|
|
|
|
vertical: {
|
|
|
|
type: Boolean,
|
|
|
|
default: false
|
2016-09-09 14:29:19 +08:00
|
|
|
}
|
|
|
|
},
|
2017-03-01 17:01:22 +08:00
|
|
|
data () {
|
|
|
|
return {
|
|
|
|
currentValue: this.value
|
2017-03-01 17:58:40 +08:00
|
|
|
};
|
2017-03-01 17:01:22 +08:00
|
|
|
},
|
2016-09-09 14:29:19 +08:00
|
|
|
computed: {
|
|
|
|
classes () {
|
|
|
|
return [
|
|
|
|
`${prefixCls}`,
|
|
|
|
{
|
|
|
|
[`${prefixCls}-${this.size}`]: !!this.size,
|
2017-01-05 14:37:24 +08:00
|
|
|
[`${prefixCls}-${this.type}`]: !!this.type,
|
|
|
|
[`${prefixCls}-vertical`]: this.vertical
|
2016-09-09 14:29:19 +08:00
|
|
|
}
|
2016-12-25 22:49:42 +08:00
|
|
|
];
|
2016-09-09 14:29:19 +08:00
|
|
|
}
|
|
|
|
},
|
2017-03-01 17:01:22 +08:00
|
|
|
mounted () {
|
|
|
|
this.updateValue();
|
2016-09-09 14:29:19 +08:00
|
|
|
},
|
|
|
|
methods: {
|
2017-03-01 17:01:22 +08:00
|
|
|
updateValue () {
|
|
|
|
const value = this.value;
|
2016-09-09 14:29:19 +08:00
|
|
|
this.$children.forEach((child) => {
|
2017-03-01 17:01:22 +08:00
|
|
|
child.currentValue = value == child.label;
|
2016-09-09 14:29:19 +08:00
|
|
|
child.group = true;
|
|
|
|
});
|
|
|
|
},
|
|
|
|
change (data) {
|
2017-03-01 17:01:22 +08:00
|
|
|
this.currentValue = data.value;
|
|
|
|
this.updateValue();
|
|
|
|
this.$emit('input', data.value);
|
2016-09-09 14:29:19 +08:00
|
|
|
this.$emit('on-change', data.value);
|
2017-03-01 17:01:22 +08:00
|
|
|
// todo 事件
|
|
|
|
// this.$dispatch('on-form-change', data.value);
|
2016-09-09 14:29:19 +08:00
|
|
|
}
|
|
|
|
},
|
|
|
|
watch: {
|
2017-03-01 17:01:22 +08:00
|
|
|
value () {
|
|
|
|
this.updateValue();
|
2016-09-09 14:29:19 +08:00
|
|
|
}
|
|
|
|
}
|
2016-12-25 22:49:42 +08:00
|
|
|
};
|
|
|
|
</script>
|