全局loading指令
import store from "@/store/index.js"
// 自定义指令，防止重复提交 v-preventReClick 直接调用即可 <button v-preventReClick ></button>
export default {
// 防重复点击(指令实现)
name:'preventReClick',
directive: {
inserted (el, binding, vnode) {
let param = binding.value;
el.addEventListener('click', () => {
store.commit("showloadding", true);//避免校验不通过导致按钮置灰，所以先+1
if(param) {//是否需要loading的全局遮罩
store.commit("startLoading", true);
}
let name = el.innerHTML;
el.setAttribute("disabled","disabled");
let v = vnode.context;
for(let key in v.$refs) {
if(key.startsWith("disbtn")) {
v.$refs[key].$el.setAttribute("disabled","disabled");
}
}
el.innerHTML = el.innerHTML+ "<span class='clickloading' style='margin-left: 2px'></span>";
let unwatch = v.$watch("$store.state.loadding",function(val,oldval){
if(val == 0) {
if(param) {//是否需要loading的全局遮罩
store.commit("startLoading", false);
}
el.removeAttribute("disabled");
for(let key in v.$refs) {
if(key.startsWith("disbtn")) {
v.$refs[key].$el.removeAttribute("disabled");
}
}
el.innerHTML = name;
unwatch();
}
})
store.commit("showloadding", false);//结束-1，这样watch能监听到数据的变化，特别是校验不通过时没有进入http请求，导致不会进入监听
})
}
}
}