vue3实现双击事件

在Vue 3中，要实现元素的单击和双击事件，可以结合`@click`和计数器来模拟双击事件。这里有一个示例代码：

<template>
  <div @click="handleClick" ref="element">双击我</div>
</template>

<script>
export default {
  data() {
    return {
      clickTimes: 0,
    };
  },
  methods: {
    handleClick(e) {
      this.clickTimes++;
      if (this.clickTimes === 2) {
        this.clickTimes = 0;
        this.handleDblClick();
      } else {
        setTimeout(() => {
          if (this.clickTimes === 1) {
            this.clickTimes = 0;
            this.handleSingleClick();
          }
        }, 250);
      }
    },
    handleSingleClick() {
      // 在这里处理单击事件
      console.log('单击事件');
    },
    handleDblClick() {
      // 在这里处理双击事件
      console.log('双击事件');
    },
  },
};
</script>

在这个例子中，当用户点击元素时，`handleClick`方法会被调用。如果连续两次点击（即`clickTimes`达到2），`handleDblClick`会被执行，而第一次点击后的250毫秒内，如果`clickTimes`还是1，会执行`handleSingleClick`。

注意，Vue本身并不直接支持`@dblclick`事件，所以我们通过计数器和延时模拟双击效果。