From 53a108ec7ef13f6ffb5076f7eea7118af174d0f3 Mon Sep 17 00:00:00 2001
From: Zhousg <zhousg1007@qq.com>
Date: Sat, 27 May 2023 10:39:39 +0800
Subject: [PATCH] fix(Tab): Maximum recursive updates exceeded in Tabs (#11898)

* fix(Tab): Maximum recursive updates exceeded in component <van-tabs>

* fix(Tab): Maximum recursive updates exceeded in component <van-tabs>

* fix(Tab): Maximum recursive updates exceeded in component <van-tabs>

* fix(Tab): Maximum recursive updates exceeded in component <van-tabs>

* fix(Tab): Maximum recursive updates exceeded in component <van-tabs>
---
 packages/vant/src/tab/Tab.tsx | 26 ++++++++++++++++++++++++--
 1 file changed, 24 insertions(+), 2 deletions(-)

diff --git a/packages/vant/src/tab/Tab.tsx b/packages/vant/src/tab/Tab.tsx
index 30d55422f..d89d6275a 100644
--- a/packages/vant/src/tab/Tab.tsx
+++ b/packages/vant/src/tab/Tab.tsx
@@ -6,6 +6,8 @@ import {
   nextTick,
   defineComponent,
   getCurrentInstance,
+  normalizeClass,
+  normalizeStyle,
   type PropType,
   type CSSProperties,
   type ExtractPropTypes,
@@ -20,6 +22,7 @@ import {
   numericProp,
   createNamespace,
   ComponentInstance,
+  isObject,
 } from '../utils';
 import { TABS_KEY } from '../tabs/Tabs';
 
@@ -89,6 +92,25 @@ export default defineComponent({
       return isActive;
     });
 
+    // 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 renderTitle = (
       onClickTab: (
         instance: ComponentInstance,
@@ -101,8 +123,8 @@ export default defineComponent({
         v-slots={{ title: slots.title }}
         id={`${parent.id}-${index.value}`}
         ref={parent.setTitleRefs(index.value)}
-        style={props.titleStyle}
-        class={props.titleClass}
+        style={parserStyle.value}
+        class={parserClass.value}
         isActive={active.value}
         controls={id}
         scrollable={parent.scrollable.value}