diff --git a/src/step/view/step-item.jsx b/src/step/view/step-item.jsx index 5d28708356..3ef186b5d0 100644 --- a/src/step/view/step-item.jsx +++ b/src/step/view/step-item.jsx @@ -108,6 +108,13 @@ class StepItem extends Component { if (shape === 'arrow') { return; } + const resetTailStyle = () => { + dom.setStyle(this.tail, { + width: '', + // eslint-disable-next-line + top: '', + }); + }; if (direction === 'vertical' || direction === 'ver') { this.resize(); @@ -124,13 +131,11 @@ class StepItem extends Component { ) { // 调整横向Content this.adjustTail(); + } else { + resetTailStyle(); } } else if (index !== total - 1) { - dom.setStyle(this.tail, { - width: '', - // eslint-disable-next-line - top: '', - }); + resetTailStyle(); } } diff --git a/test/step/index-spec.js b/test/step/index-spec.js index 35230cf714..7af1f60207 100644 --- a/test/step/index-spec.js +++ b/test/step/index-spec.js @@ -274,6 +274,7 @@ describe('Step', () => { assert(wrapper.find('.next-step-label-vertical').length === 1); wrapper.setProps({ labelPlacement: 'horizontal' }, () => { + assert(wrapper.find('.next-step-label-horizontal').length === 1); // 横向模式下会调整 next-step-item-tail 的宽度值 const $tail = wrapper.find('.next-step-item-tail'); assert( @@ -281,8 +282,14 @@ describe('Step', () => { $tail.at(0).instance().style.width !== "" && $tail.at(2).instance().style.width === "" ); + // 重新设置为垂直居中 应该去掉 next-step-item-tail 的宽度值 + wrapper.setProps({labelPlacement: 'ver'}, () => { + assert( + $tail.length === 3 && + $tail.at(0).instance().style.width === "" + ); + }); }); - assert(wrapper.find('.next-step-label-horizontal').length === 1); }); it('should trigger click event', () => {