Vue项目中防止连续点击提交

发布于 2024-02-28  337 次阅读


在main.js中写入以下代码

//main.js
// 延迟按钮点击指令 按钮中写入v-dbClick
Vue.directive('dbClick', {
    inserted(el, binding) {
         console.log(el)
        el.addEventListener('click', e => {
            if (!el.disabled) {
                el.disabled = true
                el.style.cursor = 'not-allowed'
                setTimeout(() => {
                    el.style.cursor = 'pointer'
                    el.disabled = false
                }, 3000)
            }
        })
    }
})

html

在按钮中写入v-dbClick可防止3秒内重复提交

<el-button v-dbClick type="primary" @click="submitForm" >确 定</el-button>