From 14f5d753f2789d87f5788f8c8b30f45788ac3d3d Mon Sep 17 00:00:00 2001
From: wangjiahao <1522128093@qq.com>
Date: Tue, 5 Nov 2024 17:56:12 +0800
Subject: [PATCH] =?UTF-8?q?fix(=E4=BB=AA=E8=A1=A8=E6=9D=BF):=20=E4=BF=AE?=
 =?UTF-8?q?=E5=A4=8D=E5=BF=AB=E9=80=9F=E5=8F=8D=E5=A4=8D=E5=88=87=E6=8D=A2?=
 =?UTF-8?q?tab=E7=BB=84=E4=BB=B6=E9=A1=B5=EF=BC=8C=E9=83=A8=E5=88=86?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6=E5=8F=AF=E8=83=BD=E5=8F=98=E5=BD=A2=E9=97=AE?=
 =?UTF-8?q?=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../custom-component/de-tabs/Component.vue    | 63 +++++++++++--------
 1 file changed, 37 insertions(+), 26 deletions(-)

diff --git a/core/core-frontend/src/custom-component/de-tabs/Component.vue b/core/core-frontend/src/custom-component/de-tabs/Component.vue
index 267fd3f172..5c5177dfd8 100644
--- a/core/core-frontend/src/custom-component/de-tabs/Component.vue
+++ b/core/core-frontend/src/custom-component/de-tabs/Component.vue
@@ -15,7 +15,7 @@
       :border-color="noBorderColor"
       :border-active-color="borderActiveColor"
     >
-      <template :key="tabItem.name" v-for="(tabItem, index) in element.propValue">
+      <template :key="tabItem.name" v-for="tabItem in element.propValue">
         <el-tab-pane
           class="el-tab-pane-custom"
           :lazy="isEditMode"
@@ -54,32 +54,39 @@
               </el-dropdown>
             </div>
           </template>
-          <de-canvas
-            v-if="isEdit && !mobileInPc"
-            :ref="'tabCanvas_' + index"
-            :component-data="tabItem.componentData"
-            :canvas-style-data="canvasStyleData"
-            :canvas-view-info="canvasViewInfo"
-            :canvas-id="element.id + '--' + tabItem.name"
-            :class="moveActive ? 'canvas-move-in' : ''"
-            :canvas-active="editableTabsValue === tabItem.name"
-          ></de-canvas>
-          <de-preview
-            v-else
-            :ref="'dashboardPreview'"
-            :dv-info="dvInfo"
-            :cur-gap="curPreviewGap"
-            :component-data="tabItem.componentData"
-            :canvas-style-data="{}"
-            :canvas-view-info="canvasViewInfo"
-            :canvas-id="element.id + '--' + tabItem.name"
-            :preview-active="editableTabsValue === tabItem.name"
-            :show-position="showPosition"
-            :outer-scale="scale"
-            :outer-search-count="searchCount"
-          ></de-preview>
         </el-tab-pane>
       </template>
+      <div
+        style="position: absolute; width: 100%; height: 100%"
+        :key="tabItem.name + '-content'"
+        v-for="(tabItem, index) in element.propValue"
+        :class="{ 'switch-hidden': editableTabsValue !== tabItem.name }"
+      >
+        <de-canvas
+          v-if="isEdit && !mobileInPc"
+          :ref="'tabCanvas_' + index"
+          :component-data="tabItem.componentData"
+          :canvas-style-data="canvasStyleData"
+          :canvas-view-info="canvasViewInfo"
+          :canvas-id="element.id + '--' + tabItem.name"
+          :class="moveActive ? 'canvas-move-in' : ''"
+          :canvas-active="editableTabsValue === tabItem.name"
+        ></de-canvas>
+        <de-preview
+          v-else
+          :ref="'dashboardPreview'"
+          :dv-info="dvInfo"
+          :cur-gap="curPreviewGap"
+          :component-data="tabItem.componentData"
+          :canvas-style-data="{}"
+          :canvas-view-info="canvasViewInfo"
+          :canvas-id="element.id + '--' + tabItem.name"
+          :preview-active="editableTabsValue === tabItem.name"
+          :show-position="showPosition"
+          :outer-scale="scale"
+          :outer-search-count="searchCount"
+        ></de-preview>
+      </div>
     </de-custom-tab>
     <el-dialog
       title="编辑标题"
@@ -549,7 +556,6 @@ onBeforeMount(() => {
 }
 .el-tab-pane-custom {
   width: 100%;
-  height: 100%;
 }
 .canvas-move-in {
   border: 2px dotted transparent;
@@ -570,4 +576,9 @@ onBeforeMount(() => {
   display: flex;
   justify-content: center;
 }
+
+.switch-hidden {
+  opacity: 0;
+  z-index: -1;
+}
 </style>