fix: steps v-model can not click

pull/2805/head
tanjinzhou 2020-09-07 17:18:50 +08:00
parent 9257c1ea68
commit ec73097d9b
2 changed files with 17 additions and 7 deletions

View File

@ -18,12 +18,15 @@ const getStepsProps = (defaultProps = {}) => {
direction: PropTypes.oneOf(['horizontal', 'vertical']), direction: PropTypes.oneOf(['horizontal', 'vertical']),
progressDot: PropTypes.oneOfType([PropTypes.bool, PropTypes.func]), progressDot: PropTypes.oneOfType([PropTypes.bool, PropTypes.func]),
type: PropTypes.oneOf(['default', 'navigation']), type: PropTypes.oneOf(['default', 'navigation']),
onChange: PropTypes.func,
'onUpdate:current': PropTypes.func,
}; };
return initDefaultProps(props, defaultProps); return initDefaultProps(props, defaultProps);
}; };
const Steps = { const Steps = {
name: 'ASteps', name: 'ASteps',
inheritAttrs: false,
props: getStepsProps({ props: getStepsProps({
current: 0, current: 0,
}), }),
@ -33,8 +36,14 @@ const Steps = {
}; };
}, },
Step: { ...VcSteps.Step, name: 'AStep' }, Step: { ...VcSteps.Step, name: 'AStep' },
methods: {
handleChange(current) {
this.$emit('update:current', current);
this.$emit('change', current);
},
},
render() { render() {
const props = getOptionProps(this); const props = { ...getOptionProps(this), ...this.$attrs };
const { prefixCls: customizePrefixCls, iconPrefix: customizeIconPrefixCls } = props; const { prefixCls: customizePrefixCls, iconPrefix: customizeIconPrefixCls } = props;
const getPrefixCls = this.configProvider.getPrefixCls; const getPrefixCls = this.configProvider.getPrefixCls;
const prefixCls = getPrefixCls('steps', customizePrefixCls); const prefixCls = getPrefixCls('steps', customizePrefixCls);
@ -51,6 +60,8 @@ const Steps = {
prefixCls, prefixCls,
progressDot, progressDot,
...props, ...props,
canClick: !!(this.onChange || this['onUpdate:current']),
onChange: this.handleChange,
}; };
return <VcSteps {...stepsProps}>{getSlot(this)}</VcSteps>; return <VcSteps {...stepsProps}>{getSlot(this)}</VcSteps>;
}, },

View File

@ -2,7 +2,7 @@ import PropTypes from '../_util/vue-types';
import BaseMixin from '../_util/BaseMixin'; import BaseMixin from '../_util/BaseMixin';
import debounce from 'lodash-es/debounce'; import debounce from 'lodash-es/debounce';
import isFlexSupported from '../_util/isFlexSupported'; import isFlexSupported from '../_util/isFlexSupported';
import { filterEmpty, getSlot, getPropsData } from '../_util/props-util'; import { getSlot, getPropsData } from '../_util/props-util';
import { cloneElement } from '../_util/vnode'; import { cloneElement } from '../_util/vnode';
export default { export default {
@ -23,6 +23,7 @@ export default {
finish: PropTypes.any, finish: PropTypes.any,
error: PropTypes.any, error: PropTypes.any,
}).loose, }).loose,
canClick: PropTypes.bool,
}, },
data() { data() {
this.calcStepOffsetWidth = debounce(this.calcStepOffsetWidth, 150); this.calcStepOffsetWidth = debounce(this.calcStepOffsetWidth, 150);
@ -59,7 +60,6 @@ export default {
const { current } = this.$props; const { current } = this.$props;
if (current !== next) { if (current !== next) {
this.__emit('change', next); this.__emit('change', next);
this.__emit('update:current', next);
} }
}, },
calcStepOffsetWidth() { calcStepOffsetWidth() {
@ -101,10 +101,11 @@ export default {
progressDot, progressDot,
initial, initial,
icons, icons,
canClick,
} = this; } = this;
const isNav = type === 'navigation'; const isNav = type === 'navigation';
const { lastStepOffsetWidth, flexSupported } = this; const { lastStepOffsetWidth, flexSupported } = this;
const filteredChildren = filterEmpty(getSlot(this)); const filteredChildren = getSlot(this);
const lastIndex = filteredChildren.length - 1; const lastIndex = filteredChildren.length - 1;
const adjustedlabelPlacement = progressDot ? 'vertical' : labelPlacement; const adjustedlabelPlacement = progressDot ? 'vertical' : labelPlacement;
const classString = { const classString = {
@ -134,9 +135,7 @@ export default {
icons, icons,
...childProps, ...childProps,
}; };
if (canClick) {
const { onChange } = this.$attrs;
if (onChange || this.$attrs['onUpdate:current']) {
stepProps.onStepClick = this.onStepClick; stepProps.onStepClick = this.onStepClick;
} }
if (!flexSupported && direction !== 'vertical') { if (!flexSupported && direction !== 'vertical') {