vue防止按钮在短时间内被多次点击的方法

vue组件

  (function(){
        let openDelay=false;
        Vue.directive('intervalclick', function(el,binding){
            el.onclick=function(e){
                if(openDelay)return;
                openDelay=!openDelay;
                if (!binding.value) {
                    alert("未传入Value数据！");
                    return;
                }
                let func = binding.value['func'];
                let time=binding.value['time'];
                if(typeof time !=='number'){
                    alert("传入等待时间错误");
                    return;
                }
                let args=[];
                for (const key in binding.value) {
                    if (binding.value.hasOwnProperty(key)) {
                        if(key==='func'||key==='time')continue;
                        args.push(binding.value[key])
                    }
                }
                setTimeout(() => {
                    openDelay=!openDelay; 
                }, time);
                func(...args);
            }
        })
    })()

使用

 <button v-intervalclick='{func:执行方法,time:间隔时间(毫秒数),...执行方法所需要的参数}'>点击</button>

转载于:https://www.cnblogs.com/yan7/p/9811126.html