快速点击按钮会重复多次调用接口,防止出现这样的情况
全局定义,方便调用
1.新建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)
}
})
}
})
}
}
2.在main.js引用,使全局可用
3.按钮调用直接加v-preventReClick
<el-button type="prismary" style="width:100%;" @click="handleSubmit" v-preventReClick></el-button>
本文由 Java知网 创作
禁止未经授权转载,违者依法追究相关法律责任
禁止未经授权转载,违者依法追究相关法律责任
文章评论