vue中解决用户双击鼠标触发事件

1.可能在业务中会碰见这样的事情  就是用户双击 可以触发事件 单击也可以触发事件  问题是俩次要触发不同的事件 

其实双击和单击的却别就是 双击是俩次 时间间隔特别小的 点击 组成的  这样我们可以通过 一次性定时器完成

通过绑定一次方法 来实现不同的操作

页面上

<button @click="click">用户单击/双击</button>    // 用户单击 和双击都会触发click事件  但执行不同的操作

首先 在定义一个

var timer=null;

data(){

      dbClick:false

}

// 一般俩次点击时间间隔小于300  视为用户双击了

click(){

                clearTimeout(timer);  // 这里防抖节流  存在之前的定时器 先清除掉

                this.dbClick=!this.dbClick;   //  第一次点击 先取反

                timer=setTimeout(()=>{    // 使用异步函数的操作

                    if(this.dbClick==true){      // 如果在300毫秒内用户没有点击 那么就是 true

                        console.log('用户点击')

                    }else{                         //  否则用户再一次点击了 将其转换成初始的false状态 就是双击了

                        console.log('用户双击')

                    }

                    this.dbClick=false;    // 让其重新归位   保持原来的样式 如果不归位 变成 true的话  后面会出问题

                },300)

            },