13
0
forked from github/dataease

Merge pull request from dataease/pr@dev-v2@fix_tab

fix(仪表板): 修复快速反复切换tab组件页,部分组件可能变形问题
This commit is contained in:
王嘉豪 2024-11-05 17:58:38 +08:00 committed by GitHub
commit 902a47fd65
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194

View File

@ -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>