feat: update radio

This commit is contained in:
tangjinzhou 2020-06-13 22:49:32 +08:00
parent 109a386c22
commit 48dda04b75
4 changed files with 12 additions and 36 deletions

View File

@ -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>

View File

@ -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>
); );
}, },

View File

@ -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;

View File

@ -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) {