修改停靠指示器显示逻辑:只有鼠标进入指示器时才显示依靠区

This commit is contained in:
zqm
2025-11-13 11:10:17 +08:00
parent 47ca55dd42
commit 8b8d5f9a5e

View File

@@ -65,6 +65,8 @@
aria-hidden="true"
class="indicator-top"
:class="{ 'active': activeDockZone === 'top' }"
@mouseenter="handleMouseEnter('top')"
@mouseleave="handleMouseLeave"
>
<use xlink:href="#shared-icon" />
<path
@@ -87,6 +89,8 @@
aria-hidden="true"
class="indicator-right"
:class="{ 'active': activeDockZone === 'right' }"
@mouseenter="handleMouseEnter('right')"
@mouseleave="handleMouseLeave"
>
<use xlink:href="#shared-icon" transform="rotate(90 20 20)" />
<path
@@ -109,6 +113,8 @@
aria-hidden="true"
class="indicator-bottom"
:class="{ 'active': activeDockZone === 'bottom' }"
@mouseenter="handleMouseEnter('bottom')"
@mouseleave="handleMouseLeave"
>
<use xlink:href="#shared-icon" transform="rotate(180 20 20)" />
<path
@@ -131,6 +137,8 @@
aria-hidden="true"
class="indicator-left"
:class="{ 'active': activeDockZone === 'left' }"
@mouseenter="handleMouseEnter('left')"
@mouseleave="handleMouseLeave"
>
<use xlink:href="#shared-icon" transform="rotate(270 20 20)" />
<path
@@ -153,6 +161,8 @@
aria-hidden="true"
class="indicator-center"
:class="{ 'active': activeDockZone === 'center' }"
@mouseenter="handleMouseEnter('center')"
@mouseleave="handleMouseLeave"
>
<use xlink:href="#shared-border" />
<path
@@ -199,6 +209,19 @@ const props = defineProps({
}
})
// 鼠标悬停在哪个指示器上
const hoveredZone = ref(null)
// 处理鼠标进入指示器
const handleMouseEnter = (zone) => {
hoveredZone.value = zone
}
// 处理鼠标离开指示器
const handleMouseLeave = () => {
hoveredZone.value = null
}
// 计算指示器的样式
const indicatorStyle = computed(() => {
return {
@@ -212,43 +235,12 @@ const indicatorStyle = computed(() => {
}
})
// 计算活动的停靠区域
// 计算活动的停靠区域 - 只有当鼠标悬停在指示器上时才返回对应的区域
const activeDockZone = computed(() => {
if (!props.visible) return null
// 计算各个区域的位置和大小
const { left, top, width, height } = props.targetRect
const { x, y } = props.mousePosition
// 计算相对位置
const relativeX = x - left
const relativeY = y - top
// 定义区域的阈值25%
const threshold = 0.25
// 判断是否在顶部区域
if (relativeY < height * threshold) {
return 'top'
}
// 判断是否在底部区域
if (relativeY > height * (1 - threshold)) {
return 'bottom'
}
// 判断是否在左侧区域
if (relativeX < width * threshold) {
return 'left'
}
// 判断是否在右侧区域
if (relativeX > width * (1 - threshold)) {
return 'right'
}
// 默认在中心区域
return 'center'
// 只有当鼠标悬停在某个指示器上时才返回对应的区域
return hoveredZone.value
})
// 计算半透明区域框的样式