ant-design-vue/components/radio/Group.jsx

97 lines
2.2 KiB
Vue
Raw Normal View History

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,
},
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
},
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 () {
const { radioOptions, classes, $slots, name,
onMouseEnter,
onMouseLeave,
} = this
2018-01-15 18:54:26 +08:00
return (
<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