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

概述

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

通过点击button按钮为按钮添加disabled属性为true,当定时器执行完赋值false,方可再次执行。

// 全局指令
Vue.directive('preventReClick', {
    inserted: function (el, binding) {
        el.addEventListener('click', () => {
            if (!el.disabled) {
                el.disabled = true
                setTimeout(() => {
                    el.disabled = false
                }, binding.value || 3000)
                //binding.value可以自行设置。如果设置了则跟着设置的时间走
                //例如:v-preventReClick='500'
            }
        })
    }
});