最新通知
vue2.x防止普通div装饰按钮重复点击指令
阅读次数:755 最后编辑时间:2022年02月08日

概述

通过指令来防止用户多次点击按钮产生提交行为。

通过点击div装饰按钮自定义一个值为true可以点击,点击一次改变为false,当定时器执行完赋值true,方可再次执行。

// 全局指令
Vue.directive("preventReClick", {
    // 被绑定的元素插入到父节点时
    inserted(el, binding) {
        var isclick= true;
        el.addEventListener('click', function() {
            if(isclick){
                let methods = binding.value;
                methods()
                isclick= false;
                //下面添加需要执行的事件
                el.timeId = setTimeout(() => {
                    isclick = true;
                    clearTimeout(el.timeId)
                }, 1000);
            }
        })
    }
})