前端-防止多次点击

原理：设置一个状态变量，为true的时候才能触发，false不能触发，运用setTimeout延时修改状态变量状态，达到不能连点的效果。

注释： 这里封装了一个js文件 全局注册 用的时候比较方便

1.封装的JS文件：common.js

// 防止处理多次点击
//封装函数
function noMultipleClicks(methods, info) {let that = this;//noClick决定是否能够点击if (that.noClick) {//进入后修改noclick为falsethat.noClick= false;//触发传入的方法-完成第一次点击if((info && info !== '') || info ==0) {methods(info);} else {methods();}//通过setTimeout延时将noClick变为true才能进行下次点击的触发setTimeout(()=> {that.noClick= true;}, 5000)} else {}
}
//导出
export default {noMultipleClicks,      
}

2.全局注册

//防止多次点击
import common from '@/common/common.js'
Vue.prototype.$noMultipleClicks = common.noMultipleClicks;

3.使用

//调用 
@click="$noMultipleClicks(方法名)"
//设置noClick
noClick:true