标签：el loading refs disabled 指令 let key 全局 store

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请求，导致不会进入监听 }) } } }

标签：el,loading,refs,disabled,指令,let,key,全局,store
来源： https://www.cnblogs.com/youJinPaTiya/p/15934771.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。