vue防重复点击(指令实现)

2023-05-17,,

快速点击按钮会重复多次调用接口,防止出现这样的情况

全局定义,方便调用

新建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

<el-button type="prismary" style="width:100%;" @click="handleSubmit" v-preventReClick></el-button>

亲测可用

vue防重复点击(指令实现)的相关教程结束。

《vue防重复点击(指令实现).doc》

下载本文的Word格式文档,以方便收藏与打印。