用vue3给我写出一个双击和单击事件

在 Vue3 中，你可以使用 `@` 符号来监听组件上的事件。假设你有一个元素需要绑定双击和单击事件，比如一个 `<div>` 元素，你可以这样做：

<template>
  <div @click="handleClick" @dblclick="handleDblClick">
    Click or double-click me
  </div>
</template>

<script>
export default {
  name: 'MyComponent',
  methods: {
    handleClick(event) {
      this.isSingleClick = true;
      // 单击事件逻辑
      console.log('单击事件', event);
      setTimeout(() => {
        if (this.isSingleClick) {
          console.log('已确认单击');
        }
      }, 300);
    },
    
    handleDblClick(event) {
      this.isSingleClick = false;
      // 双击事件逻辑
      console.log('双击事件', event);
    },
  },
  data() {
    return {
      isSingleClick: true, // 初始状态为单击状态
    };
  },
};
</script>

在这个例子中，`handleClick` 方法用于处理单击事件，它会将 `isSingleClick` 设置为 `true`，并在300毫秒后检查是否还是单击状态。而 `handleDblClick` 方法用于处理双击事件，它会清空 `isSingleClick`。

注意，如果你希望在检测完单击和双击后分别执行不同的操作，可以调整这两个方法的内容。