vue防按钮重复点击(指令实现)
2020-09-15 本文已影响0人
一人创客
快速点击按钮会重复多次调用接口，防止出现这样的情况
全局定义，方便调用
新建`plugins.js`
```
export default {
install (Vue) {
// 防重复点击(指令实现)
Vue.directive('preventReClick', {
inserted (el, binding) {
el.addEventListener('click', () => {
if (!el.disabled) {
el.disabled = true
setTimeout(() => {
el.disabled = false
}, binding.value || 3000)
}
})
}
})
}
}
```
在main.js引用
按钮调用直接加v-preventReClick
