Vue点击事件单击和双击
文章描述：
Vue单击和双击事件处理
vue自带的双击事件 @dblclick=”dblclick”
延时判断单击或者双击
var timer=null;
export default{
data(){
return{
dbClick:false
}
},
methods:{
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)
},
}
}
发布时间：2023/05/24
发表评论