Vue.js 中使用鼠标事件判断鼠标是否在矩形边框上

您可以使用鼠标移动事件（mousemove）来判断鼠标是否移动到矩形的四条边框上。具体步骤如下：

1. 在 Vue 组件的 methods 中定义一个方法，例如 stageMousemoveEvent，用于处理鼠标移动事件。
2. 在鼠标移动事件处理方法中，获取鼠标的坐标（event.clientX 和 event.clientY）。
3. 获取矩形的位置和尺寸信息，例如矩形的左上角坐标（rectX 和 rectY），以及矩形的宽度和高度（rectWidth 和 rectHeight）。
4. 判断鼠标是否在矩形的四条边框上，可以使用以下条件判断：

methods: {
  stageMousemoveEvent(event) {
    const mouseX = event.clientX;
    const mouseY = event.clientY;
const rectLeft = rectX;
const rectTop = rectY;
const rectRight = rectX + rectWidth;
const rectBottom = rectY + rectHeight;

const isOnLeftBorder = mouseX >= rectLeft && mouseX <= rectLeft + 5 && mouseY >= rectTop && mouseY <= rectBottom;
const isOnTopBorder = mouseY >= rectTop && mouseY <= rectTop + 5 && mouseX >= rectLeft && mouseX <= rectRight;
const isOnRightBorder = mouseX >= rectRight - 5 && mouseX <= rectRight && mouseY >= rectTop && mouseY <= rectBottom;
const isOnBottomBorder = mouseY >= rectBottom - 5 && mouseY <= rectBottom && mouseX >= rectLeft && mouseX <= rectRight;

if (isOnLeftBorder || isOnTopBorder || isOnRightBorder || isOnBottomBorder) {
  // 鼠标在矩形的边框上的逻辑处理
}

}
}

在以上代码中，5 代表边框的宽度，您可以根据实际情况进行调整。isOnLeftBorder、isOnTopBorder、isOnRightBorder 和 isOnBottomBorder 分别表示鼠标是否在矩形的左边框、上边框、右边框和下边框上。

5. 在满足鼠标在矩形边框上的条件下，执行相应的逻辑处理。

if (isOnLeftBorder) {
  // 鼠标在矩形左边框上的逻辑处理
} else if (isOnTopBorder) {
  // 鼠标在矩形上边框上的逻辑处理
} else if (isOnRightBorder) {
  // 鼠标在矩形右边框上的逻辑处理
} else if (isOnBottomBorder) {
  // 鼠标在矩形下边框上的逻辑处理
}

根据实际需求，您可以在相应的逻辑处理中进行操作，例如改变边框颜色或大小等。