From 9ec90a906ff165c9ea9b08bbf3988a64ee2dea4f Mon Sep 17 00:00:00 2001
From: ZF sun <34314687@qq.com>
Date: Thu, 7 May 2026 16:14:28 +0800
Subject: [PATCH] perf(diy-tab): optimize tab rendering with v-if

---
 components-diy/diy-tab.vue | 27 +++++++++++++++++----------
 1 file changed, 17 insertions(+), 10 deletions(-)

diff --git a/components-diy/diy-tab.vue b/components-diy/diy-tab.vue
index 18bed27..c36351c 100644
--- a/components-diy/diy-tab.vue
+++ b/components-diy/diy-tab.vue
@@ -30,12 +30,14 @@
 
             <!-- 内容区域 -->
             <view class="tab-content" :style="[contentStyle]">
-                <view v-for="(tab, idx) in mergedValue.tabs" :key="getPanelKey(tab, idx)" class="tab-panel"
+                <view v-for="(tab, idx) in mergedValue.tabs" :key="getPanelKey(tab, idx)" 
+                    class="tab-panel" 
                     :class="{ active: activeTab === idx }"
+                    v-if="activeTab === idx"
                     :style="[panelStyle, activeTab === idx ? panelActiveStyle : {}]">
                     <view v-if="tab.components && tab.components.length > 0" class="tab-components">
                         <!-- 渲染每个标签下的组件 -->
-                        <diy-group v-if="tab.components" :diyData="{ value: tab.components, global: diyGlobal, tabIndex: idx }"
+                        <diy-group :diyData="{ value: tab.components, global: diyGlobal, tabIndex: idx }"
                             :scrollTop="tab.scrollTop || 0" />
                     </view>
                 </view>
@@ -46,12 +48,14 @@
         <template v-else-if="mergedValue.tabPosition === 'bottom'">
             <!-- 内容区域 -->
             <view class="tab-content" :style="[contentStyle]">
-                <view v-for="(tab, idx) in mergedValue.tabs" :key="getPanelKey(tab, idx)" class="tab-panel"
+                <view v-for="(tab, idx) in mergedValue.tabs" :key="getPanelKey(tab, idx)" 
+                    class="tab-panel" 
                     :class="{ active: activeTab === idx }"
+                    v-if="activeTab === idx"
                     :style="[panelStyle, activeTab === idx ? panelActiveStyle : {}]">
                     <view v-if="tab.components && tab.components.length > 0" class="tab-components">
                         <!-- 渲染每个标签下的组件 -->
-                        <diy-group v-if="tab.components" :diyData="{ value: tab.components, global: diyGlobal, tabIndex: idx }"
+                        <diy-group :diyData="{ value: tab.components, global: diyGlobal, tabIndex: idx }"
                             :scrollTop="tab.scrollTop || 0" />
                     </view>
                 </view>
@@ -110,12 +114,14 @@
 
                 <!-- 右侧内容区域 -->
                 <view class="tab-content" :style="[contentStyle]">
-                    <view v-for="(tab, idx) in mergedValue.tabs" :key="getPanelKey(tab, idx)" class="tab-panel"
+                    <view v-for="(tab, idx) in mergedValue.tabs" :key="getPanelKey(tab, idx)" 
+                        class="tab-panel" 
                         :class="{ active: activeTab === idx }"
+                        v-if="activeTab === idx"
                         :style="[panelStyle, activeTab === idx ? panelActiveStyle : {}]">
                         <view v-if="tab.components && tab.components.length > 0" class="tab-components">
                             <!-- 渲染每个标签下的组件 -->
-                            <diy-group v-if="tab.components" :diyData="{ value: tab.components, global: diyGlobal }"
+                            <diy-group :diyData="{ value: tab.components, global: diyGlobal }"
                                 :scrollTop="tab.scrollTop || 0" />
                         </view>
                     </view>
@@ -128,12 +134,14 @@
             <view class="tab-layout-horizontal">
                 <!-- 左侧内容区域 -->
                 <view class="tab-content" :style="[contentStyle]">
-                    <view v-for="(tab, idx) in mergedValue.tabs" :key="getPanelKey(tab, idx)" class="tab-panel"
+                    <view v-for="(tab, idx) in mergedValue.tabs" :key="getPanelKey(tab, idx)" 
+                        class="tab-panel" 
                         :class="{ active: activeTab === idx }"
+                        v-if="activeTab === idx"
                         :style="[panelStyle, activeTab === idx ? panelActiveStyle : {}]">
                         <view v-if="tab.components && tab.components.length > 0" class="tab-components">
                             <!-- 渲染每个标签下的组件 -->
-                            <diy-group v-if="tab.components" :diyData="{ value: tab.components, global: diyGlobal }"
+                            <diy-group :diyData="{ value: tab.components, global: diyGlobal }"
                                 :scrollTop="tab.scrollTop || 0" />
                         </view>
                     </view>
@@ -1135,7 +1143,6 @@ export default {
 
 // ===== 标签面板样式 =====
 .tab-panel {
-    display: none;
     opacity: 0;
     transform: translateY(8px);
     transition: opacity var(--animation-duration, 0.3s) var(--animation-timing-function, ease-in-out), transform var(--animation-duration, 0.3s) var(--animation-timing-function, ease-in-out);
@@ -1143,10 +1150,10 @@ export default {
     box-sizing: border-box;
     width: 100%;
     min-height: 200px;
+    // 显示/隐藏由 v-show 控制，不使用 display: none
 
     // 激活状态
     &.active {
-        display: block;
         opacity: 1;
         transform: translateY(0);
         transition: opacity var(--animation-duration, 0.3s) var(--animation-timing-function, ease-in-out), transform var(--animation-duration, 0.3s) var(--animation-timing-function, ease-in-out);