1.后台要求按钮点击后禁用，几秒后按钮启用。2.实现思路比较各种实现的代码量和易用性。如果选择封装公共指令，可以快速将这个功能添加到按钮3。Step1.根据vue文档定义一个空指令。Vue.directive("preventClick",{inserted(el,binding,vnode){}})2.给按钮添加点击事件，点击后禁用按钮Vue.directive("preventClick",{inserted(el,binding,vnode){el.addEventListener('click',()=>{if(!el.disabled){el.disabled=true//禁用el.classList.add(`is-disabled`);}})}})3、根据传值时间恢复点击Vue.directive("preventClick",{inserted(el,binding,vnode){const{value}=binding;if(value===false){return;}el.addEventListener('click',()=>{if(!el.disabled){constdefaultTime=(value||5)-0;//默认默认禁用时间el.disabled=true//禁用el.classList.add(`is-disabled`);setTimeout(()=>{//恢复按钮状态el.classList.remove(`is-disabled`);el.disabled=false},defalutTime*1000)}})}})4.优化按钮增加剩余时间提示Vue.directive("preventClick",{inserted(el,binding,vnode){const{value}=binding;if(value===false){return;}el.addEventListener('click',()=>{if(!el.disabled){constdefalutTime=(value||5)-0;//Default默认禁用时间el.disabled=true//禁用el.classList.add(`is-disabled`);让originalButton=el.innerHTML;让curTime=defalutTime;el.innerHTML=originalButton+`(${curTime})`;让timer=window.setInterval(()=>{//更新时间状态curTime--;if(curTime==0){window.clearInterval(timer);timer=null;}el.innerHTML=originalButton+`(${curTime})`;},1000)setTimeout(()=>{//恢复按钮状态el.classList.remove(`is-disabled`);el.disabled=falseel.innerHTML=originalButton},defalutTime*1000)}})}})四、调用
