diff --git a/packages/vant/src/tab/test/index.spec.tsx b/packages/vant/src/tab/test/index.spec.tsx index 3ea2b2fdb..b1fce586e 100644 --- a/packages/vant/src/tab/test/index.spec.tsx +++ b/packages/vant/src/tab/test/index.spec.tsx @@ -458,3 +458,34 @@ test('should call before-change prop before changing', async () => { expect(onChange).toHaveBeenCalledTimes(2); expect(onChange).toHaveBeenLastCalledWith(4, 'title5'); }); + +test('should re-render when line-width or line-height changed', async () => { + const wrapper = mount({ + data() { + return { + lineWidth: 20, + lineHeight: 5, + }; + }, + render() { + return ( + + 1 + + ); + }, + }); + + await later(); + const line = wrapper.find('.van-tabs__line'); + expect(line.style.width).toEqual('20px'); + expect(line.style.height).toEqual('5px'); + + await wrapper.setData({ + lineWidth: 30, + lineHeight: 10, + }); + await later(); + expect(line.style.width).toEqual('30px'); + expect(line.style.height).toEqual('10px'); +}); diff --git a/packages/vant/src/tabs/Tabs.tsx b/packages/vant/src/tabs/Tabs.tsx index 3830ee819..ba856238b 100644 --- a/packages/vant/src/tabs/Tabs.tsx +++ b/packages/vant/src/tabs/Tabs.tsx @@ -422,7 +422,16 @@ export default defineComponent({ return Header; }; - watch([() => props.color, windowWidth], setLine); + const resize = () => { + setLine(); + nextTick(() => contentRef.value?.swipeRef.value?.resize()); + }; + + watch( + () => [props.color, props.duration, props.lineWidth, props.lineHeight], + setLine + ); + watch(windowWidth, resize); watch( () => props.active, @@ -460,11 +469,6 @@ export default defineComponent({ const onRendered = (name: Numeric, title?: string) => emit('rendered', name, title); - const resize = () => { - setLine(); - nextTick(() => contentRef.value?.swipeRef.value?.resize()); - }; - useExpose({ resize, scrollTo,