fix(Tabs): re-render when line-width or line-height changed (#11776)

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 (
+        <Tabs lineWidth={this.lineWidth} lineHeight={this.lineHeight}>
+          <Tab>1</Tab>
+        </Tabs>
+      );
+    },
+  });
+
+  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');
+});

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,