VUE利用自定义指定防止按钮重复点击

第一步：新建plugins.js
import Vue from ‘vue’
// 自定义指令防止按钮重复点击 v-preventReClick(使用时)
const preventReClick = Vue.directive(‘preventReClick’, {
inserted: function(el, binding) {
el.addEventListener(‘click’, () => {
if (!el.disabled) {
el.disabled = true
setTimeout(() => {
el.disabled = false
}, binding.value || 1500)
//binding.value可以自行设置。如果设置了则跟着设置的时间走(设置的方式为v-preventReClick=‘500’)
// 不设置则为1500
}
})
}
})

export { preventReClick }
第二步：在main.js中引入
import preventReClick from ‘./utils/plugins’
第三步：
1.<el-button type=“danger” v-preventReClick=“3000” @click=“submitForm()”>确定
设置延迟时间3000毫秒
2.<el-button type=“danger” v-preventReClick @click=“submitForm()”>确定
不设置延迟时间时则为plugins.js中的1500毫秒