fix: steps v-model can not click
parent
9257c1ea68
commit
ec73097d9b
|
@ -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>;
|
||||||
},
|
},
|
||||||
|
|
|
@ -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') {
|
||||||
|
|
Loading…
Reference in New Issue