chore(Tab): using Vue built-in stringifyStyle (#11914)

* chore(Tab): using Vue built-in stringifyStyle

* fix(Tab): failed to normalize style

packages/vant/package.json

@@ -46,7 +46,8 @@
   ],
   "dependencies": {
     "@vant/popperjs": "^1.3.0",
-    "@vant/use": "^1.5.1"
+    "@vant/use": "^1.5.1",
+    "@vue/shared": "^3.0.0"
   },
   "peerDependencies": {
     "vue": "^3.0.0"

packages/vant/src/tab/Tab.tsx

@@ -4,14 +4,17 @@ import {
   provide,
   computed,
   nextTick,
-  defineComponent,
-  getCurrentInstance,
+  watchEffect,
   normalizeClass,
   normalizeStyle,
+  defineComponent,
+  getCurrentInstance,
   type PropType,
   type CSSProperties,
   type ExtractPropTypes,
 } from 'vue';
+// eslint-disable-next-line vue/prefer-import-from-vue
+import { stringifyStyle } from '@vue/shared';
 
 // Utils
 import {
@@ -22,7 +25,6 @@ import {
   numericProp,
   createNamespace,
   ComponentInstance,
-  isObject,
 } from '../utils';
 import { TABS_KEY } from '../tabs/Tabs';
 
@@ -93,23 +95,16 @@ export default defineComponent({
     });
 
     // see: https://github.com/vant-ui/vant/issues/11763
-    const parserClass = ref('');
-    const parserStyle = ref('');
-    watch(
-      [() => props.titleClass, () => props.titleStyle],
-      ([newClass, newStyle]) => {
-        parserClass.value = normalizeClass(newClass);
-        const style = normalizeStyle(newStyle);
-        if (isObject(style)) {
-          parserStyle.value = Object.entries(style)
-            .map(([key, val]) => `${key}:${val}; `)
-            .join('');
-        } else {
-          parserStyle.value = style ?? '';
-        }
-      },
-      { immediate: true }
-    );
+    const parsedClass = ref('');
+    const parsedStyle = ref<string | undefined>('');
+    watchEffect(() => {
+      const { titleClass, titleStyle } = props;
+      parsedClass.value = titleClass ? normalizeClass(titleClass) : '';
+      parsedStyle.value =
+        titleStyle && typeof titleStyle !== 'string'
+          ? stringifyStyle(normalizeStyle(titleStyle))
+          : titleStyle;
+    });
 
     const renderTitle = (
       onClickTab: (
@@ -123,8 +118,8 @@ export default defineComponent({
         v-slots={{ title: slots.title }}
         id={`${parent.id}-${index.value}`}
         ref={parent.setTitleRefs(index.value)}
-        style={parserStyle.value}
-        class={parserClass.value}
+        style={parsedStyle.value}
+        class={parsedClass.value}
         isActive={active.value}
         controls={id}
         scrollable={parent.scrollable.value}

packages/vant/src/tab/test/index.spec.tsx

@@ -189,13 +189,18 @@ test('should change title style when using title-style prop', async () => {
           <Tab title="title1" titleStyle="color: red;">
             Text
           </Tab>
+          <Tab title="title1" titleStyle={{ color: 'blue' }}>
+            Text
+          </Tab>
         </Tabs>
       );
     },
   });
 
   await later();
-  expect(wrapper.find('.van-tab').style.color).toEqual('red');
+  const tabs = wrapper.findAll('.van-tab');
+  expect(tabs.at(0)!.style.color).toEqual('red');
+  expect(tabs.at(1)!.style.color).toEqual('blue');
 });
 
 test('should allot to hide bottom border by border prop', async () => {

pnpm-lock.yaml

@@ -62,6 +62,9 @@ importers:
       '@vant/use':
         specifier: ^1.5.1
         version: link:../vant-use
+      '@vue/shared':
+        specifier: ^3.0.0
+        version: 3.3.4
     devDependencies:
       '@types/jest':
         specifier: ^29.5.1