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

Merge pull request #12194 from dataease/pr@dev-v2@fix_custom_legend_color

Browse Source 
fix(图表): 修复部分场景下自定义图例颜色选框无法触发
This commit is contained in:
wisonic-s 2024-09-13 15:45:38 +08:00 committed by GitHub
commit 61d57c3400
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 32 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

54
core/core-frontend/src/views/chart/components/editor/editor-style/components/CustomColorStyleSelect.vue
View File

@ -138,30 +138,23 @@ const setupSeriesColor = () => {
}
seriesColorState.curSeriesColor = seriesColorState.seriesColor[seriesColorState.curColorIndex]
nextTick(() => {
const targetId = 'series-color-picker-' + seriesColorState.curColorIndex
const target = document.getElementById(targetId)
if (target) {
seriesColorState.seriesColorPickerId = `#${targetId}`
} else {
seriesColorPickerRef.value?.hide()
}
customColorPickerRef.value?.hide()
// 防止 teleport 失效还有选框飘到左上角
seriesColorState.seriesColorPickerId = `#seriesr-picker-slot-${props.sub ? 1 : 0}`
})
}
}
const flag = ref(1)
const switchSeriesColor = (seriesColor, index) => {
seriesColorPickerRef.value?.hide()
seriesColorState.curSeriesColor = cloneDeep(seriesColor)
seriesColorState.curColorIndex = index
const id = '#series-color-picker-' + seriesColor.id + `-${flag.value}`
if (document.querySelectorAll(id).length > 1) {
flag.value = 2
}
seriesColorState.seriesColorPickerId = '#series-color-picker-' + seriesColor.id + `-${flag.value}`
const id = `series-color-picker-${props.sub ? 1 : 0}-${index}`
seriesColorState.seriesColorPickerId = `#${id}`
nextTick(() => {
seriesColorPickerRef.value?.show()
const dom = document.getElementById(id)
if (dom) {
seriesColorPickerRef.value?.show()
}
})
}
@ -464,13 +457,16 @@ const colorItemBorderColor = (index, state) => {
"
class="series-color-setting colors"
>
<div
:id="`seriesr-picker-slot-${sub ? 1 : 0}`"
style="overflow: hidden; transform: translateX(0)"
></div>
<div
v-for="(item, index) in seriesColorState.seriesColor"
:key="item.id"
class="color-list-item"
>
<div
:id="`series-color-picker-${item.id}-${flag}`"
:class="{
active: item.id === seriesColorState.curSeriesColor?.id
}"
@ -484,22 +480,24 @@ const colorItemBorderColor = (index, state) => {
}"
></div>
</div>
<div :id="`series-color-picker-${sub ? 1 : 0}-${index}`"></div>
<span
:title="item.name"
class="color-item-name"
:class="themes === 'dark' ? 'dark' : ''"
>{{ item.name }}</span
>
<div :id="'series-color-picker-' + index"></div>
</div>
</div>
</template>
<teleport :to="seriesColorState.seriesColorPickerId">
<div style="position: absolute; top: 0; left: 10px; width: 0; height: 0; overflow: hidden">
<teleport defer :to="seriesColorState.seriesColorPickerId">
<div class="series-color-picker-wrapper">
<el-color-picker
ref="seriesColorPickerRef"
v-model="seriesColorState.curSeriesColor.color"
size="small"
popper-class="series-color-picker"
:teleported="false"
:predefine="predefineColors"
@change="changeSeriesColor"
/>
@ -590,7 +588,6 @@ const colorItemBorderColor = (index, state) => {
cursor: pointer;
padding: 2px;
border: solid 1px transparent;
position: relative;
.color-item__inner {
width: 14px;
height: 14px;
@ -662,7 +659,6 @@ const colorItemBorderColor = (index, state) => {
cursor: pointer;
padding: 2px;
border: solid 1px transparent;
position: relative;
.color-item__inner {
width: 14px;
@ -722,4 +718,18 @@ const colorItemBorderColor = (index, state) => {
margin-left: 4px;
}
}
.series-color-picker-wrapper {
width: 0px;
height: 0px;
position: absolute;
:deep(.ed-tooltip__trigger) {
width: 0px;
height: 0px;
overflow: hidden;
}
:deep(.series-color-picker) {
position: fixed !important;
margin-top: 16px !important;
}
}
</style>