全局指令防止按钮重复点击
1.common.js
首先引入Vue
import Vue from 'vue';
const preventReClick = Vue.directive('preventReClick', {
inserted: function (el, binding) {
el.addEventListener('click', () => {
if (!el.disabled) {
el.disabled = true
setTimeout(() => {
el.disabled = false
}, binding.value || 3000)
}
console.log(el.disabled)
})
}
});
export {
preventReClick
}2.在需要引入的页面引入（**.vue）
在按钮上添加v-preventReClick
<el-button size="small" type="primary" @click="handleSave('form')" v-preventReClick>确定</el-button>从common.js导入指令preventReClick
import preventReClick from '../common' //防多次点击，重复提交
防重复点击(vue指令实现)
阻止快速点击按钮会重复多次调用接口的
定义全局指令
// 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>
以上为个人经验，希望能给大家一个参考，也希望大家多多支持Devmax。