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

1.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);

            }

        })

    })()

2.使用

2.1在script中引用

importclickStatefrom'../../js/clickState'

2.2在html中引用

重置

2.3在js中检查

reset () {

    console.log("hello world");

}

F12  console.log 查看打印的时间差