mirror of
https://gitee.com/ant-design-vue/ant-design-vue.git
synced 2024-12-01 11:38:36 +08:00
feat: update radio
This commit is contained in:
parent
109a386c22
commit
48dda04b75
@ -4,11 +4,9 @@ import PropTypes from '../_util/vue-types';
|
|||||||
import Radio from './Radio';
|
import Radio from './Radio';
|
||||||
import { getOptionProps, filterEmpty, hasProp, getSlot } from '../_util/props-util';
|
import { getOptionProps, filterEmpty, hasProp, getSlot } from '../_util/props-util';
|
||||||
import { ConfigConsumerProps } from '../config-provider';
|
import { ConfigConsumerProps } from '../config-provider';
|
||||||
function noop() {}
|
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'ARadioGroup',
|
name: 'ARadioGroup',
|
||||||
inheritAttrs: false,
|
|
||||||
props: {
|
props: {
|
||||||
prefixCls: PropTypes.string,
|
prefixCls: PropTypes.string,
|
||||||
defaultValue: PropTypes.any,
|
defaultValue: PropTypes.any,
|
||||||
@ -26,6 +24,7 @@ export default {
|
|||||||
disabled: Boolean,
|
disabled: Boolean,
|
||||||
name: String,
|
name: String,
|
||||||
buttonStyle: PropTypes.string.def('outline'),
|
buttonStyle: PropTypes.string.def('outline'),
|
||||||
|
onChange: PropTypes.func,
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
const { value, defaultValue } = this;
|
const { value, defaultValue } = this;
|
||||||
@ -56,7 +55,6 @@ export default {
|
|||||||
},
|
},
|
||||||
},
|
},
|
||||||
created() {
|
created() {
|
||||||
this.configProvider = inject('configProvider', ConfigConsumerProps);
|
|
||||||
this.radioGroupContext = provide('radioGroupContext', this);
|
this.radioGroupContext = provide('radioGroupContext', this);
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
@ -69,7 +67,7 @@ export default {
|
|||||||
// nextTick for https://github.com/vueComponent/ant-design-vue/issues/1280
|
// nextTick for https://github.com/vueComponent/ant-design-vue/issues/1280
|
||||||
if (!this.updatingValue && value !== lastValue) {
|
if (!this.updatingValue && value !== lastValue) {
|
||||||
this.updatingValue = true;
|
this.updatingValue = true;
|
||||||
this.$emit('update:modelValue', value);
|
this.$emit('update:value', value);
|
||||||
this.$emit('change', ev);
|
this.$emit('change', ev);
|
||||||
}
|
}
|
||||||
nextTick(() => {
|
nextTick(() => {
|
||||||
@ -78,7 +76,6 @@ export default {
|
|||||||
},
|
},
|
||||||
},
|
},
|
||||||
render() {
|
render() {
|
||||||
const { onMouseenter = noop, onMouseleave = noop, class: className, style, id } = this.$attrs;
|
|
||||||
const props = getOptionProps(this);
|
const props = getOptionProps(this);
|
||||||
const { prefixCls: customizePrefixCls, options, buttonStyle } = props;
|
const { prefixCls: customizePrefixCls, options, buttonStyle } = props;
|
||||||
const getPrefixCls = this.configProvider.getPrefixCls;
|
const getPrefixCls = this.configProvider.getPrefixCls;
|
||||||
@ -91,7 +88,6 @@ export default {
|
|||||||
{
|
{
|
||||||
[`${groupPrefixCls}-${props.size}`]: props.size,
|
[`${groupPrefixCls}-${props.size}`]: props.size,
|
||||||
},
|
},
|
||||||
className,
|
|
||||||
);
|
);
|
||||||
|
|
||||||
let children = filterEmpty(getSlot(this));
|
let children = filterEmpty(getSlot(this));
|
||||||
@ -129,10 +125,6 @@ export default {
|
|||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
class={classString}
|
class={classString}
|
||||||
onMouseenter={onMouseenter}
|
|
||||||
onMouseleave={onMouseleave}
|
|
||||||
style={style}
|
|
||||||
id={id}
|
|
||||||
>
|
>
|
||||||
{children}
|
{children}
|
||||||
</div>
|
</div>
|
||||||
|
@ -5,11 +5,8 @@ import classNames from 'classnames';
|
|||||||
import { getOptionProps } from '../_util/props-util';
|
import { getOptionProps } from '../_util/props-util';
|
||||||
import { ConfigConsumerProps } from '../config-provider';
|
import { ConfigConsumerProps } from '../config-provider';
|
||||||
|
|
||||||
function noop() {}
|
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'ARadio',
|
name: 'ARadio',
|
||||||
inheritAttrs: false,
|
|
||||||
model: {
|
model: {
|
||||||
prop: 'checked',
|
prop: 'checked',
|
||||||
},
|
},
|
||||||
@ -24,6 +21,7 @@ export default {
|
|||||||
id: String,
|
id: String,
|
||||||
autoFocus: Boolean,
|
autoFocus: Boolean,
|
||||||
type: PropTypes.string.def('radio'),
|
type: PropTypes.string.def('radio'),
|
||||||
|
onChange: PropTypes.func,
|
||||||
},
|
},
|
||||||
setup() {
|
setup() {
|
||||||
return {
|
return {
|
||||||
@ -43,7 +41,7 @@ export default {
|
|||||||
this.$emit('update:value', targetChecked);
|
this.$emit('update:value', targetChecked);
|
||||||
this.$emit('change', event);
|
this.$emit('change', event);
|
||||||
},
|
},
|
||||||
onChange(e) {
|
onChange2(e) {
|
||||||
this.$emit('change', e);
|
this.$emit('change', e);
|
||||||
if (this.radioGroupContext && this.radioGroupContext.onRadioChange) {
|
if (this.radioGroupContext && this.radioGroupContext.onRadioChange) {
|
||||||
this.radioGroupContext.onRadioChange(e);
|
this.radioGroupContext.onRadioChange(e);
|
||||||
@ -52,15 +50,8 @@ export default {
|
|||||||
},
|
},
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
const { $slots, radioGroupContext: radioGroup, $attrs } = this;
|
const { $slots, radioGroupContext: radioGroup } = this;
|
||||||
const props = getOptionProps(this);
|
const props = getOptionProps(this);
|
||||||
const {
|
|
||||||
onMouseenter = noop,
|
|
||||||
onMouseleave = noop,
|
|
||||||
class: className,
|
|
||||||
style,
|
|
||||||
...restAttrs
|
|
||||||
} = $attrs;
|
|
||||||
const { prefixCls: customizePrefixCls, ...restProps } = props;
|
const { prefixCls: customizePrefixCls, ...restProps } = props;
|
||||||
const getPrefixCls = this.configProvider.getPrefixCls;
|
const getPrefixCls = this.configProvider.getPrefixCls;
|
||||||
const prefixCls = getPrefixCls('radio', customizePrefixCls);
|
const prefixCls = getPrefixCls('radio', customizePrefixCls);
|
||||||
@ -68,18 +59,17 @@ export default {
|
|||||||
const radioProps = {
|
const radioProps = {
|
||||||
prefixCls,
|
prefixCls,
|
||||||
...restProps,
|
...restProps,
|
||||||
...restAttrs,
|
|
||||||
};
|
};
|
||||||
|
|
||||||
if (radioGroup) {
|
if (radioGroup) {
|
||||||
radioProps.name = radioGroup.name;
|
radioProps.name = radioGroup.name;
|
||||||
radioProps.onChange = this.onChange;
|
radioProps.onChange = this.onChange2;
|
||||||
radioProps.checked = props.value === radioGroup.stateValue;
|
radioProps.checked = props.value === radioGroup.stateValue;
|
||||||
radioProps.disabled = props.disabled || radioGroup.disabled;
|
radioProps.disabled = props.disabled || radioGroup.disabled;
|
||||||
} else {
|
} else {
|
||||||
radioProps.onChange = this.handleChange;
|
radioProps.onChange = this.handleChange;
|
||||||
}
|
}
|
||||||
const wrapperClassString = classNames(className, {
|
const wrapperClassString = classNames( {
|
||||||
[`${prefixCls}-wrapper`]: true,
|
[`${prefixCls}-wrapper`]: true,
|
||||||
[`${prefixCls}-wrapper-checked`]: radioProps.checked,
|
[`${prefixCls}-wrapper-checked`]: radioProps.checked,
|
||||||
[`${prefixCls}-wrapper-disabled`]: radioProps.disabled,
|
[`${prefixCls}-wrapper-disabled`]: radioProps.disabled,
|
||||||
@ -88,12 +78,9 @@ export default {
|
|||||||
return (
|
return (
|
||||||
<label
|
<label
|
||||||
class={wrapperClassString}
|
class={wrapperClassString}
|
||||||
style={style}
|
|
||||||
onMouseenter={onMouseenter}
|
|
||||||
onMouseleave={onMouseleave}
|
|
||||||
>
|
>
|
||||||
<VcCheckbox {...radioProps} ref="vcCheckbox" />
|
<VcCheckbox {...radioProps} ref="vcCheckbox" />
|
||||||
{$slots.default !== undefined ? <span>{$slots.default()}</span> : null}
|
{$slots.default && <span>{$slots.default()}</span>}
|
||||||
</label>
|
</label>
|
||||||
);
|
);
|
||||||
},
|
},
|
||||||
|
@ -1,7 +1,6 @@
|
|||||||
import Radio from './Radio';
|
import Radio from './Radio';
|
||||||
import Group from './Group';
|
import Group from './Group';
|
||||||
import Button from './RadioButton';
|
import Button from './RadioButton';
|
||||||
// import Base from '../base';
|
|
||||||
|
|
||||||
Radio.Group = Group;
|
Radio.Group = Group;
|
||||||
Radio.Button = Button;
|
Radio.Button = Button;
|
||||||
|
@ -8,10 +8,6 @@ export default {
|
|||||||
name: 'Checkbox',
|
name: 'Checkbox',
|
||||||
mixins: [BaseMixin],
|
mixins: [BaseMixin],
|
||||||
inheritAttrs: false,
|
inheritAttrs: false,
|
||||||
model: {
|
|
||||||
prop: 'checked',
|
|
||||||
event: 'change',
|
|
||||||
},
|
|
||||||
props: initDefaultProps(
|
props: initDefaultProps(
|
||||||
{
|
{
|
||||||
prefixCls: PropTypes.string,
|
prefixCls: PropTypes.string,
|
||||||
@ -73,7 +69,7 @@ export default {
|
|||||||
}
|
}
|
||||||
this.$forceUpdate(); // change前,维持现有状态
|
this.$forceUpdate(); // change前,维持现有状态
|
||||||
e.shiftKey = this.eventShiftKey;
|
e.shiftKey = this.eventShiftKey;
|
||||||
this.__emit('change', {
|
const eventObj = {
|
||||||
target: {
|
target: {
|
||||||
...props,
|
...props,
|
||||||
checked: e.target.checked,
|
checked: e.target.checked,
|
||||||
@ -85,7 +81,9 @@ export default {
|
|||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
},
|
},
|
||||||
nativeEvent: e,
|
nativeEvent: e,
|
||||||
});
|
};
|
||||||
|
this.$emit('update:checked', eventObj);
|
||||||
|
this.$emit('change', eventObj);
|
||||||
this.eventShiftKey = false;
|
this.eventShiftKey = false;
|
||||||
},
|
},
|
||||||
onClick(e) {
|
onClick(e) {
|
||||||
|
Loading…
Reference in New Issue
Block a user