vue 判断一个点在不在一个区域

在 Vue 中判断一个点是否在一个区域内，可以采用类似于射线法或多边形顶点法的方法。

射线法：通过 $refs 属性获取到需要判断区域的 DOM 元素，然后获取鼠标点击事件的坐标，使用 Vue 的计算属性或方法计算鼠标点击事件的坐标是否在区域内。具体实现方法如下：

<template>
  <div ref="area" @click="checkPoint($event)">
    <!-- 区域内容 -->
  </div>
</template>

<script>
export default {
  methods: {
    checkPoint(event) {
      const area = this.$refs.area;
      const rect = area.getBoundingClientRect();
      const x = event.clientX - rect.left;
      const y = event.clientY - rect.top;
      const isInside = // 判断 x, y 是否在区域内部
      if (isInside) {
        // 点在区域内部
      } else {
        // 点在区域外部
      }
    }
  }
}
</script>

多边形顶点法：同样通过 $refs 属性获取到需要判断区域的 DOM 元素，然后获取鼠标点击事件的坐标，使用 Vue 的计算属性或方法计算鼠标点击事件的坐标是否在区域内。具体实现方法如下：

<template>
  <div ref="area" @click="checkPoint($event)">
    <!-- 区域内容 -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      vertices: [ // 多边形的顶点坐标
        {x: 100, y: 100},
        {x: 200, y: 100},
        {x: 200, y: 200},
        {x: 100, y: 200}
      ]
    }
  },
  methods: {
    checkPoint(event) {
      const area = this.$refs.area;
      const rect = area.getBoundingClientRect();
      const x = event.clientX - rect.left;
      const y = event.clientY - rect.top;
      const isInside = this.isPointInsidePoly(x, y, this.vertices);
      if (isInside) {
        // 点在区域内部
      } else {
        // 点在区域外部
      }
    },
    isPointInsidePoly(x, y, vertices) {
      let inside = false;
      const n = vertices.length;
      for (let i = 0, j = n - 1; i < n; j = i++) {
        const xi = vertices[i].x, yi = vertices[i].y;
        const xj = vertices[j].x, yj = vertices[j].y;
        const intersect = ((yi > y) != (yj > y))
          && (x < (xj - xi) * (y - yi) / (yj - yi) + xi);
        if (intersect) inside = !inside;
      }
      return inside;
    }
  }
}
</script>

以上是两种常见的方法，具体实现可以根据实际情况选择适合的方式。