案例演示
案例代码
<button class="getCode" @click="getCode" :disabled="state.disabled">{{state.getCodeText}}</button>
const state = reactive({
getCodeText: '获取验证码',
disabled: false,
holdTime: 10,
})
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;
}