vue2 鼠标点击位置弹出弹窗

你可以使用Vue2的事件绑定和组件来实现鼠标点击位置弹出弹窗的效果。首先，你需要在Vue组件中定义一个变量来控制弹窗的显示与隐藏状态。然后，使用`@click`事件绑定在需要触发弹窗的元素上，将点击位置的坐标信息传递给Vue组件。最后，根据传递的坐标信息和弹窗的样式，将弹窗定位到鼠标点击的位置。

下面是一个示例代码：

<template>
  <div>
    <button @click="showPopup($event)">点击我</button>

    <div v-if="isPopupVisible" class="popup" :style="{ top: popupTop + 'px', left: popupLeft + 'px' }">
      弹窗内容
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isPopupVisible: false,
      popupTop: 0,
      popupLeft: 0
    };
  },
  methods: {
    showPopup(event) {
      this.isPopupVisible = true;
      this.popupTop = event.clientY;
      this.popupLeft = event.clientX;
    }
  }
};
</script>

<style>
.popup {
  position: absolute;
  background-color: #fff;
  border: 1px solid #ccc;
  padding: 10px;
}
</style>

在上面的示例中，我们使用`@click`事件绑定在button元素上，通过`$event`参数获取鼠标点击的位置信息。然后，将`isPopupVisible`设置为true，弹窗将显示出来，并通过`popupTop`和`popupLeft`来设置弹窗的位置。最后，使用`:style`绑定弹窗的样式，将弹窗定位到鼠标点击的位置。

你可以根据实际情况修改弹窗的样式和内容。希望能对你有所帮助！如果还有其他问题，请随时提问。