2018-03-20 19:06:04 +08:00
|
|
|
import PropTypes from '../_util/vue-types'
|
2018-03-19 10:16:27 +08:00
|
|
|
import Radio from './Radio'
|
2017-10-27 14:04:48 +08:00
|
|
|
export default {
|
2018-04-08 21:17:20 +08:00
|
|
|
name: 'ARadioGroup',
|
2017-10-27 14:04:48 +08:00
|
|
|
props: {
|
|
|
|
prefixCls: {
|
|
|
|
default: 'ant-radio-group',
|
|
|
|
type: String,
|
|
|
|
},
|
2018-03-20 19:06:04 +08:00
|
|
|
defaultValue: PropTypes.any,
|
|
|
|
value: PropTypes.any,
|
2017-10-27 14:04:48 +08:00
|
|
|
size: {
|
|
|
|
default: 'default',
|
|
|
|
validator (value) {
|
|
|
|
return ['large', 'default', 'small'].includes(value)
|
|
|
|
},
|
|
|
|
},
|
|
|
|
options: {
|
|
|
|
default: () => [],
|
|
|
|
type: Array,
|
|
|
|
},
|
2017-11-07 11:58:47 +08:00
|
|
|
disabled: Boolean,
|
|
|
|
name: String,
|
2017-10-27 14:04:48 +08:00
|
|
|
},
|
|
|
|
data () {
|
2017-11-02 12:07:20 +08:00
|
|
|
const { value, defaultValue } = this
|
2017-10-27 14:04:48 +08:00
|
|
|
return {
|
2017-11-02 12:07:20 +08:00
|
|
|
stateValue: value || defaultValue,
|
2017-10-27 14:04:48 +08:00
|
|
|
}
|
|
|
|
},
|
|
|
|
model: {
|
|
|
|
prop: 'value',
|
|
|
|
},
|
2017-11-07 11:58:47 +08:00
|
|
|
provide () {
|
|
|
|
return {
|
|
|
|
radioGroupContext: this,
|
|
|
|
}
|
2017-10-27 14:04:48 +08:00
|
|
|
},
|
2017-11-07 11:58:47 +08:00
|
|
|
computed: {
|
|
|
|
radioOptions () {
|
|
|
|
const { disabled } = this
|
|
|
|
return this.options.map(option => {
|
|
|
|
return typeof option === 'string'
|
|
|
|
? { label: option, value: option }
|
|
|
|
: { ...option, disabled: option.disabled === undefined ? disabled : option.disabled }
|
|
|
|
})
|
|
|
|
},
|
|
|
|
classes () {
|
|
|
|
const { prefixCls, size } = this
|
|
|
|
return {
|
|
|
|
[`${prefixCls}`]: true,
|
|
|
|
[`${prefixCls}-${size}`]: size,
|
|
|
|
}
|
|
|
|
},
|
2017-10-27 14:04:48 +08:00
|
|
|
},
|
|
|
|
methods: {
|
|
|
|
handleChange (event) {
|
|
|
|
const target = event.target
|
2017-11-02 12:07:20 +08:00
|
|
|
const { value: targetValue } = target
|
|
|
|
if (this.value === undefined) {
|
|
|
|
this.stateValue = targetValue
|
|
|
|
}
|
|
|
|
this.$emit('input', targetValue)
|
2017-11-03 18:46:18 +08:00
|
|
|
this.$emit('change', event)
|
2017-10-27 14:04:48 +08:00
|
|
|
},
|
2018-06-17 17:22:26 +08:00
|
|
|
onMouseEnter (e) {
|
|
|
|
this.$emit('mouseenter', e)
|
|
|
|
},
|
|
|
|
onMouseLeave (e) {
|
|
|
|
this.$emit('mouseleave', e)
|
|
|
|
},
|
2017-10-27 14:04:48 +08:00
|
|
|
},
|
|
|
|
watch: {
|
|
|
|
value (val) {
|
2017-11-02 12:07:20 +08:00
|
|
|
this.stateValue = val
|
2017-10-27 14:04:48 +08:00
|
|
|
},
|
|
|
|
},
|
2018-01-15 18:54:26 +08:00
|
|
|
render () {
|
2018-06-17 17:22:26 +08:00
|
|
|
const { radioOptions, classes, $slots, name,
|
|
|
|
onMouseEnter,
|
|
|
|
onMouseLeave,
|
|
|
|
} = this
|
2018-01-15 18:54:26 +08:00
|
|
|
return (
|
2018-06-17 17:22:26 +08:00
|
|
|
<div
|
|
|
|
class={classes}
|
|
|
|
onMouseenter={onMouseEnter}
|
|
|
|
onMouseleave={onMouseLeave}
|
|
|
|
>
|
2018-01-15 18:54:26 +08:00
|
|
|
{radioOptions.map(({ value, disabled, label }) =>
|
|
|
|
<Radio key={value} value={value} disabled={disabled} name={name}>{label}</Radio>)}
|
|
|
|
{ radioOptions.length === 0 && ($slots.default || []).filter(c => c.tag || c.text.trim() !== '')}
|
|
|
|
</div>
|
|
|
|
)
|
2017-10-27 14:04:48 +08:00
|
|
|
},
|
|
|
|
}
|
2018-03-19 10:16:27 +08:00
|
|
|
|