阻止快速点击按钮会重复多次调用接口的
- 定义全局指令
// directive.js
export default {
install (Vue) {
// 防重复点击(指令实现)
Vue.directive('repeatClick', {
inserted (el, binding) {
el.addEventListener('click', () => {
if (!el.disabled) {
el.disabled = true
setTimeout(() => {
el.disabled = false
}, binding.value || 1000)
}
})
}
})
}
}
- 在main.js引用
import directive from 'directive.js';
vue.use(directive );
- 按钮调用直接加v-preventReClick
<el-button v-repeatClick type="prismary" style="width:100%;" @click="handleSubmit"></el-button>