vue3(vant4)——获取验证码

案例代码

<van-button plain type="primary" :disabled="disabledSms" size="mini" @click="sendSms">{
   
   {codeTime}}</van-button>

const set_interval = ref(null)
const disabledSms = ref(false)
const codeTime = ref('获取验证码')
onUnload(() => {
    
    
	set_interval.value && clearInterval(set_interval.value)
})
api.smsSend({
    
    
	mobile: state.phone,
	event: 'product'
}).then(res => {
    
    
	if (res.code == 1) {
    
    
		showToast(res.msg)
		disabledSms.value = true
		var time = 60;
		set_interval.value = setInterval(fun, 1000); //设置定时器 
		function fun() {
    
    
			time--;
			if (time >= 0) {
    
    
				codeTime.value = time + "s重新发送";
			} else if (time < 0) {
    
    
				codeTime.value = "重新发送";
				disabledSms.value = false; //倒计时结束能够重新点击发送的按钮 
				clearInterval(set_interval.value); //清除定时器 
				time = 60; //设置循环重新开始条件 
			}
		}
	}
})