2020-06-13 14:32:10 +00:00
|
|
|
import { provide, inject, nextTick } from 'vue';
|
2019-01-12 03:33:27 +00:00
|
|
|
import classNames from 'classnames';
|
|
|
|
import PropTypes from '../_util/vue-types';
|
|
|
|
import Radio from './Radio';
|
2020-06-13 14:32:10 +00:00
|
|
|
import { getOptionProps, filterEmpty, hasProp, getSlot } from '../_util/props-util';
|
2019-03-18 12:00:00 +00:00
|
|
|
import { ConfigConsumerProps } from '../config-provider';
|
2018-09-05 13:28:54 +00:00
|
|
|
|
2017-10-27 06:04:48 +00:00
|
|
|
export default {
|
2018-04-08 13:17:20 +00:00
|
|
|
name: 'ARadioGroup',
|
2017-10-27 06:04:48 +00:00
|
|
|
props: {
|
2019-09-18 12:03:13 +00:00
|
|
|
prefixCls: PropTypes.string,
|
2018-03-20 11:06:04 +00:00
|
|
|
defaultValue: PropTypes.any,
|
|
|
|
value: PropTypes.any,
|
2017-10-27 06:04:48 +00:00
|
|
|
size: {
|
|
|
|
default: 'default',
|
2019-01-12 03:33:27 +00:00
|
|
|
validator(value) {
|
|
|
|
return ['large', 'default', 'small'].includes(value);
|
2017-10-27 06:04:48 +00:00
|
|
|
},
|
|
|
|
},
|
|
|
|
options: {
|
|
|
|
default: () => [],
|
|
|
|
type: Array,
|
|
|
|
},
|
2017-11-07 03:58:47 +00:00
|
|
|
disabled: Boolean,
|
|
|
|
name: String,
|
2018-09-05 13:28:54 +00:00
|
|
|
buttonStyle: PropTypes.string.def('outline'),
|
2020-06-13 14:49:32 +00:00
|
|
|
onChange: PropTypes.func,
|
2017-10-27 06:04:48 +00:00
|
|
|
},
|
2019-01-12 03:33:27 +00:00
|
|
|
data() {
|
|
|
|
const { value, defaultValue } = this;
|
2019-10-18 05:05:35 +00:00
|
|
|
this.updatingValue = false;
|
2017-10-27 06:04:48 +00:00
|
|
|
return {
|
2018-10-24 04:51:46 +00:00
|
|
|
stateValue: value === undefined ? defaultValue : value,
|
2019-01-12 03:33:27 +00:00
|
|
|
};
|
2017-10-27 06:04:48 +00:00
|
|
|
},
|
2020-06-13 14:32:10 +00:00
|
|
|
setup() {
|
2017-11-07 03:58:47 +00:00
|
|
|
return {
|
2020-06-13 14:32:10 +00:00
|
|
|
configProvider: inject('configProvider', ConfigConsumerProps),
|
2019-01-12 03:33:27 +00:00
|
|
|
};
|
2017-10-27 06:04:48 +00:00
|
|
|
},
|
2017-11-07 03:58:47 +00:00
|
|
|
computed: {
|
2019-01-12 03:33:27 +00:00
|
|
|
radioOptions() {
|
|
|
|
const { disabled } = this;
|
2017-11-07 03:58:47 +00:00
|
|
|
return this.options.map(option => {
|
|
|
|
return typeof option === 'string'
|
|
|
|
? { label: option, value: option }
|
2019-01-12 03:33:27 +00:00
|
|
|
: { ...option, disabled: option.disabled === undefined ? disabled : option.disabled };
|
|
|
|
});
|
2017-11-07 03:58:47 +00:00
|
|
|
},
|
2017-10-27 06:04:48 +00:00
|
|
|
},
|
2019-02-01 09:23:00 +00:00
|
|
|
watch: {
|
|
|
|
value(val) {
|
2019-10-18 05:05:35 +00:00
|
|
|
this.updatingValue = false;
|
2019-02-01 09:23:00 +00:00
|
|
|
this.stateValue = val;
|
|
|
|
},
|
|
|
|
},
|
2020-06-13 14:32:10 +00:00
|
|
|
created() {
|
|
|
|
this.radioGroupContext = provide('radioGroupContext', this);
|
|
|
|
},
|
2017-10-27 06:04:48 +00:00
|
|
|
methods: {
|
2019-01-12 03:33:27 +00:00
|
|
|
onRadioChange(ev) {
|
|
|
|
const lastValue = this.stateValue;
|
|
|
|
const { value } = ev.target;
|
2018-09-05 13:28:54 +00:00
|
|
|
if (!hasProp(this, 'value')) {
|
2019-01-12 03:33:27 +00:00
|
|
|
this.stateValue = value;
|
2018-09-05 13:28:54 +00:00
|
|
|
}
|
2019-10-16 06:47:49 +00:00
|
|
|
// nextTick for https://github.com/vueComponent/ant-design-vue/issues/1280
|
2019-10-18 05:05:35 +00:00
|
|
|
if (!this.updatingValue && value !== lastValue) {
|
|
|
|
this.updatingValue = true;
|
2020-06-13 14:49:32 +00:00
|
|
|
this.$emit('update:value', value);
|
2019-10-18 05:05:35 +00:00
|
|
|
this.$emit('change', ev);
|
|
|
|
}
|
2020-06-13 14:32:10 +00:00
|
|
|
nextTick(() => {
|
2019-10-18 05:05:35 +00:00
|
|
|
this.updatingValue = false;
|
2019-10-16 06:47:49 +00:00
|
|
|
});
|
2018-06-17 09:22:26 +00:00
|
|
|
},
|
2017-10-27 06:04:48 +00:00
|
|
|
},
|
2019-01-12 03:33:27 +00:00
|
|
|
render() {
|
|
|
|
const props = getOptionProps(this);
|
2019-03-18 12:00:00 +00:00
|
|
|
const { prefixCls: customizePrefixCls, options, buttonStyle } = props;
|
2019-09-11 14:35:25 +00:00
|
|
|
const getPrefixCls = this.configProvider.getPrefixCls;
|
2019-03-18 12:00:00 +00:00
|
|
|
const prefixCls = getPrefixCls('radio', customizePrefixCls);
|
|
|
|
|
2019-01-12 03:33:27 +00:00
|
|
|
const groupPrefixCls = `${prefixCls}-group`;
|
2020-06-13 14:32:10 +00:00
|
|
|
const classString = classNames(
|
|
|
|
groupPrefixCls,
|
|
|
|
`${groupPrefixCls}-${buttonStyle}`,
|
|
|
|
{
|
|
|
|
[`${groupPrefixCls}-${props.size}`]: props.size,
|
|
|
|
},
|
|
|
|
);
|
2018-09-05 13:28:54 +00:00
|
|
|
|
2020-06-13 14:32:10 +00:00
|
|
|
let children = filterEmpty(getSlot(this));
|
2018-09-05 13:28:54 +00:00
|
|
|
|
|
|
|
// 如果存在 options, 优先使用
|
|
|
|
if (options && options.length > 0) {
|
2020-03-18 06:52:02 +00:00
|
|
|
children = options.map(option => {
|
2018-09-05 13:28:54 +00:00
|
|
|
if (typeof option === 'string') {
|
|
|
|
return (
|
|
|
|
<Radio
|
2020-03-07 11:45:13 +00:00
|
|
|
key={option}
|
2018-09-05 13:28:54 +00:00
|
|
|
prefixCls={prefixCls}
|
|
|
|
disabled={props.disabled}
|
|
|
|
value={option}
|
|
|
|
checked={this.stateValue === option}
|
|
|
|
>
|
|
|
|
{option}
|
|
|
|
</Radio>
|
2019-01-12 03:33:27 +00:00
|
|
|
);
|
2018-09-05 13:28:54 +00:00
|
|
|
}
|
2020-06-13 14:32:10 +00:00
|
|
|
return (
|
|
|
|
<Radio
|
|
|
|
key={`radio-group-value-options-${option.value}`}
|
|
|
|
prefixCls={prefixCls}
|
|
|
|
disabled={option.disabled || props.disabled}
|
|
|
|
value={option.value}
|
|
|
|
checked={this.stateValue === option.value}
|
|
|
|
>
|
|
|
|
{option.label}
|
|
|
|
</Radio>
|
|
|
|
);
|
2019-01-12 03:33:27 +00:00
|
|
|
});
|
2018-09-05 13:28:54 +00:00
|
|
|
}
|
|
|
|
|
2018-01-15 10:54:26 +00:00
|
|
|
return (
|
2020-06-13 14:32:10 +00:00
|
|
|
<div
|
|
|
|
class={classString}
|
|
|
|
>
|
2018-09-05 13:28:54 +00:00
|
|
|
{children}
|
2018-01-15 10:54:26 +00:00
|
|
|
</div>
|
2019-01-12 03:33:27 +00:00
|
|
|
);
|
2017-10-27 06:04:48 +00:00
|
|
|
},
|
2019-01-12 03:33:27 +00:00
|
|
|
};
|