1.引入import{useIntervalFn}from'@vueuse/core'2.格式const{pause,resume}=useIntervalFn(()=>{//具体要做的事情},间隔时间,{immediate:false|true})pause()//暂停,停止resume()//继续,开始3.UseexportconstuseCountdown=()=>{consttime=ref(0)const{pause,resume}=useIntervalFn(()=>{//多久做一次回调time.value--if(time.value<=0){pause()}console.log('useIntervalFn',Date.now())},1000,{immediate:false})//pause:pause,//resume:startconststart=(num)=>{time.value=numresume()}return{time,start}}在设置中。const{time,start}=useCountdown()//发送手机验证码constsend=async()=>{//1.验证手机号码格式if(mobile(formData.mobile)!==true){Message({type:'error',text:'手机号码格式错误'})return}if(time.value!==0){return}//2.调用apitry{awaituserMobileLoginMsg(formData.mobile)Message({类型:'成功',text:'验证码已发送!'})//倒计时start(60)}catch(err){console.dir(err)Message({type:'error',text:err.response.data.message})}}修改视图{{time===0?'发送验证码':`${time}secondsafter`}}
