vue的click与dblclick冲突

在Vue.js中，如果你同时使用了@click和@dblclick，可能会遇到点击和双击事件之间的冲突。这是因为双击事件（dblclick）会触发两次点击事件（click），导致两个事件之间产生冲突。

为了解决这个问题，你可以考虑以下几种方法：

1. 使用延时器（setTimeout）：

   你可以在click事件触发时设置一个短暂的延时，在这个延时内检查是否还有双击事件触发。如果双击事件在延时内触发，可以认定为双击，否则执行单击操作。

   <template>
     <div @click="handleClick" @dblclick="handleDoubleClick"></div>
   </template>
    
   <script>
   export default {
     methods: {
       handleClick() {
         setTimeout(() => {
           // 在延时结束时检查是否触发了双击事件，如果没有则执行单击操作
           if (!this.doubleClick) {
             // 执行单击操作
           }
           this.doubleClick = false; // 重置标志
         }, 250); // 设置合适的延时
       },
       handleDoubleClick() {
         this.doubleClick = true;
         // 执行双击操作
       },
     },
     data() {
       return {
         doubleClick: false,
       };
     },
   };
   </script>复制

2. 使用自定义指令：

   可以使用自定义指令，监控点击和双击事件，并根据事件之间的时间间隔来判断是单击还是双击。

   <template>
     <div v-click-dblclick="{click: clickHandler, dblclick: dblclickHandler, value: value}"></div>
   </template>
    
   <script>
   export default {
     directives: {
       'click-dblclick': {
         bind: function (el, binding) {
           let clicked = false;
           let timeout;
    
           el.addEventListener('click', () => {
               const value = binding.value.value
               if (!clicked) {
                   clicked = true;
                   timeout = setTimeout(() => {
                       clicked = false;
                       binding.value.click(value ? value : '')
                   }, 300); // 设置一个延迟，区分单击和双击
               } else {
                   clearTimeout(timeout);
                   clicked = false;
                   binding.value.dblclick(value ? value : '')
               }
           });
       },
     },
     methods: {
       clickHandler(){},//单击事件
       dblclickHandler(){}//双击事件
   };
   </script>复制

这两种方法都可以根据实际情况选择适用的方式，根据需求调整延时时间或其他参数。