Vue.js 中使用 v-rect 实现连续移动鼠标画矩形并隐藏功能

使用 v-rect 组件，我们可以实现一个连续移动鼠标在指定区域画矩形的功能。通过代码中的 rectMoveEvent() 方法，当 activeIndex 为 5 且 laserChild 组件的 itemActive 为 1 时，会调用 moveEvent() 方法显示矩形，并根据鼠标位置移动矩形。在 rectLeaveEvent() 方法中，调用 leaveEvent() 方法隐藏矩形。因此，当鼠标离开区域时，矩形会消失。

以下代码示例展示了如何实现该功能：

<v-rect :config='imgRect' @mousemove='rectMoveEvent()' @mouseleave='rectLeaveEvent()' />

rectMoveEvent() {
  if (this.activeIndex == 5) {
    if (this.$refs.laserChild.itemActive == 1) {
      this.$refs.laserChild.$refs.eraseRef.moveEvent();
    }
  }
},

rectLeaveEvent() {
  if (this.activeIndex == 5) {
    if (this.$refs.laserChild.itemActive == 1) {
      this.$refs.laserChild.$refs.eraseRef.leaveEvent();
    }
  }
},

moveEvent() {
  this.rect.visible(true);
  const pos = this.stage.getPointerPosition();
  this.rect.position({ x: pos.x, y: pos.y });
  this.layer.batchDraw();
},

leaveEvent() {
  this.rect.visible(false);
}

通过以上代码，我们可以实现一个连续移动鼠标在指定区域画矩形的功能，并控制矩形的显示和隐藏。