设置提交按钮短时间内不能重复点击提交

新建is文件 directive

import Vue from “vue”;

const preventReClick = Vue.directive(‘preventReClick’,{
inserted: function(el, binding, vNode, oldVnode){
el.addEventListener(‘click’, () => {
if(!el.disabled){
el.disabled = true
el.style.backgroundColor = ‘#ccc’
el.style.border = ‘none’
setTimeout(() => {
el.disabled = false
el.style.backgroundColor = ‘#1890ff’
el.style.border = ‘1px solid #1890ff’
}, 3000)
}
})
}
})

export default preventReClick

在main.js中使用

import preventReClick from ‘@/directive.js’

Vue.use(preventReClick)

在需要的buttion 中设置 v-preventReClick

<a-button v-preventReClick style=“margin-left: 0px;” type=“default” @click=“save(‘save’)”>保存