diff --git a/components/steps/index.jsx b/components/steps/index.jsx index 5a311ffb27..4d228a5c13 100644 --- a/components/steps/index.jsx +++ b/components/steps/index.jsx @@ -18,12 +18,15 @@ const getStepsProps = (defaultProps = {}) => { direction: PropTypes.oneOf(['horizontal', 'vertical']), progressDot: PropTypes.oneOfType([PropTypes.bool, PropTypes.func]), type: PropTypes.oneOf(['default', 'navigation']), + onChange: PropTypes.func, + 'onUpdate:current': PropTypes.func, }; return initDefaultProps(props, defaultProps); }; const Steps = { name: 'ASteps', + inheritAttrs: false, props: getStepsProps({ current: 0, }), @@ -33,8 +36,14 @@ const Steps = { }; }, Step: { ...VcSteps.Step, name: 'AStep' }, + methods: { + handleChange(current) { + this.$emit('update:current', current); + this.$emit('change', current); + }, + }, render() { - const props = getOptionProps(this); + const props = { ...getOptionProps(this), ...this.$attrs }; const { prefixCls: customizePrefixCls, iconPrefix: customizeIconPrefixCls } = props; const getPrefixCls = this.configProvider.getPrefixCls; const prefixCls = getPrefixCls('steps', customizePrefixCls); @@ -51,6 +60,8 @@ const Steps = { prefixCls, progressDot, ...props, + canClick: !!(this.onChange || this['onUpdate:current']), + onChange: this.handleChange, }; return {getSlot(this)}; }, diff --git a/components/vc-steps/Steps.jsx b/components/vc-steps/Steps.jsx index f638f13797..c01ce07879 100644 --- a/components/vc-steps/Steps.jsx +++ b/components/vc-steps/Steps.jsx @@ -2,7 +2,7 @@ import PropTypes from '../_util/vue-types'; import BaseMixin from '../_util/BaseMixin'; import debounce from 'lodash-es/debounce'; 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'; export default { @@ -23,6 +23,7 @@ export default { finish: PropTypes.any, error: PropTypes.any, }).loose, + canClick: PropTypes.bool, }, data() { this.calcStepOffsetWidth = debounce(this.calcStepOffsetWidth, 150); @@ -59,7 +60,6 @@ export default { const { current } = this.$props; if (current !== next) { this.__emit('change', next); - this.__emit('update:current', next); } }, calcStepOffsetWidth() { @@ -101,10 +101,11 @@ export default { progressDot, initial, icons, + canClick, } = this; const isNav = type === 'navigation'; const { lastStepOffsetWidth, flexSupported } = this; - const filteredChildren = filterEmpty(getSlot(this)); + const filteredChildren = getSlot(this); const lastIndex = filteredChildren.length - 1; const adjustedlabelPlacement = progressDot ? 'vertical' : labelPlacement; const classString = { @@ -134,9 +135,7 @@ export default { icons, ...childProps, }; - - const { onChange } = this.$attrs; - if (onChange || this.$attrs['onUpdate:current']) { + if (canClick) { stepProps.onStepClick = this.onStepClick; } if (!flexSupported && direction !== 'vertical') {