refactor(数据大屏): 数据大屏过滤弹窗按钮如果出现滚动,固定到屏幕指定位置

This commit is contained in:
wangjiahao
2025-02-25 17:12:10 +08:00
committed by 王嘉豪
parent 189dceb179
commit d51c68c450
2 changed files with 23 additions and 2 deletions

View File

@@ -28,6 +28,7 @@ const openHandler = ref(null)
const customDatasetParamsRef = ref(null)
const emits = defineEmits(['onResetLayout'])
const fullScreeRef = ref(null)
const isOverSize = ref(false)
const isDesktopFlag = isDesktop()
const props = defineProps({
canvasStyleData: {
@@ -286,6 +287,10 @@ const resetLayout = () => {
}
renderReady.value = true
emits('onResetLayout')
isOverSize.value = false
if (previewCanvas.value?.clientHeight - previewCanvas.value?.parentNode?.clientHeight > 0) {
isOverSize.value = true
}
}
})
}
@@ -464,6 +469,7 @@ const linkOptBarShow = computed(() => {
const downloadAsPDF = () => {
// test
}
defineExpose({
restore
})
@@ -480,7 +486,7 @@ defineExpose({
v-if="state.initState"
>
<!--弹框触发区域-->
<canvas-filter-btn v-if="filterBtnShow"></canvas-filter-btn>
<canvas-filter-btn :is-fixed="isOverSize" v-if="filterBtnShow"></canvas-filter-btn>
<!-- 弹框区域 -->
<PopArea
v-if="popAreaAvailable"

View File

@@ -1,7 +1,12 @@
<!-- IconSlider.vue -->
<template>
<el-tooltip offset="22" effect="dark" placement="left" :content="t('visualization.query')">
<div class="canvas-filter" @mousedown.stop @mousedup.stop>
<div
class="canvas-filter"
:class="{ 'filter-btn-fix': isFixed }"
@mousedown.stop
@mousedup.stop
>
<div class="icon-slider" @mouseenter="slideOut" @mouseleave="slideBack">
<div
class="icon-container"
@@ -28,6 +33,12 @@ const slideDistance = ref(14) // 滑动距离
const { canvasState } = storeToRefs(dvMainStore)
const { t } = useI18n()
defineProps({
isFixed: {
type: Boolean,
default: false
}
})
const filterActive = computed(() => canvasState.value.curPointArea === 'hidden')
const slideOut = () => {
offset.value = -slideDistance.value
@@ -82,4 +93,8 @@ img {
max-width: 100%;
max-height: 100%;
}
.filter-btn-fix {
position: fixed !important;
}
</style>