uni、vue3——验证码按钮

案例演示

案例代码

<button class="getCode" @click="getCode" :disabled="state.disabled">{
   
   {state.getCodeText}}</button>

const state = reactive({
    
    
	// 获取验证码
	getCodeText: '获取验证码',
	disabled: false,
	holdTime: 10, //默认60秒计时
})

function getCode() {
    
    
	console.log(11);
	state.disabled = true
	state.getCodeText = "发送中..." //发送验证码
	setTimeout(() => {
    
    
		showToast('验证码已发送')
		// 调用短信接口
		codeMsg()
		setTimer(); //调用定时器方法
	}, 1000)
}

function codeMsg() {
    
    
	console.log("此处调用短信接口");
}
let Timer = null

function setTimer() {
    
    
	Timer = setInterval(() => {
    
    
		if (state.holdTime <= 0) {
    
    
			state.disabled = false
			state.getCodeText = "获取验证码"
			clearInterval(Timer); //清除该函数
			return;
		}
		state.getCodeText = "重新获取(" + state.holdTime + ")"
		state.holdTime--;
	}, 1000)
}

.getCode {
    
    
	border: 1rpx solid #228BF1;
	background-color: #ffffff;
	color: #228BF1;
	width: 164rpx;
	height: 65rpx;
	padding: 0;
	margin: 0;
	font-size: 26rpx;
	margin-left: 20rpx;
}

.getCode::after {
    
    
	border: none;
}