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中引用


<el-buttontype="primary"size="small"v-intervalclick='{func:reset,time:5000,}'>重置</el-button>

2.3在js中检查

reset () {

    console.log("hello world");

}

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。
禁止转载,如需转载请通过简信或评论联系作者。

友情链接更多精彩内容