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>


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM