修改停靠指示器显示逻辑:只有鼠标进入指示器时才显示依靠区
This commit is contained in:
@@ -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
|
||||
})
|
||||
|
||||
// 计算半透明区域框的样式
|
||||
|
||||
Reference in New Issue
Block a user