center/dataease-dm
center/dataease-dm
13
0
Fork 0
forked from github/dataease
Code Pull Requests Activity

fix(仪表板): 修复快速反复切换tab组件页，部分组件可能变形问题

Browse Source
This commit is contained in:
wangjiahao 2024-11-05 17:56:12 +08:00
parent 683462ae90
commit 14f5d753f2
1 changed files with 37 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

63
core/core-frontend/src/custom-component/de-tabs/Component.vue
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>