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