修复停靠区闪烁问题:添加延迟处理和优化鼠标事件
This commit is contained in:
@@ -180,7 +180,7 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed, watch, ref } from 'vue'
|
||||
import { computed, watch, ref, onUnmounted } from 'vue'
|
||||
|
||||
// Props定义
|
||||
const props = defineProps({
|
||||
@@ -211,17 +211,35 @@ const props = defineProps({
|
||||
|
||||
// 鼠标悬停在哪个指示器上
|
||||
const hoveredZone = ref(null)
|
||||
// 延迟定时器
|
||||
let mouseLeaveTimer = null
|
||||
|
||||
// 处理鼠标进入指示器
|
||||
const handleMouseEnter = (zone) => {
|
||||
// 清除可能存在的离开定时器
|
||||
if (mouseLeaveTimer) {
|
||||
clearTimeout(mouseLeaveTimer)
|
||||
mouseLeaveTimer = null
|
||||
}
|
||||
hoveredZone.value = zone
|
||||
}
|
||||
|
||||
// 处理鼠标离开指示器
|
||||
const handleMouseLeave = () => {
|
||||
hoveredZone.value = null
|
||||
// 添加短暂延迟,避免快速进出导致的闪烁
|
||||
mouseLeaveTimer = setTimeout(() => {
|
||||
hoveredZone.value = null
|
||||
mouseLeaveTimer = null
|
||||
}, 100)
|
||||
}
|
||||
|
||||
// 清理定时器
|
||||
onUnmounted(() => {
|
||||
if (mouseLeaveTimer) {
|
||||
clearTimeout(mouseLeaveTimer)
|
||||
}
|
||||
})
|
||||
|
||||
// 计算指示器的样式
|
||||
const indicatorStyle = computed(() => {
|
||||
return {
|
||||
@@ -319,6 +337,7 @@ watch(activeDockZone, (newZone) => {
|
||||
box-sizing: border-box;
|
||||
z-index: 9998; /* 确保在指示器下方 */
|
||||
transition: all 0.2s ease; /* 平滑过渡效果 */
|
||||
pointer-events: none; /* 确保区域框不干扰鼠标事件 */
|
||||
}
|
||||
|
||||
/* 上指示器:定位在目标区域的顶端中间,上边缘距dock-layout上边缘5像素 */
|
||||
|
||||
Reference in New Issue
Block a user