前提:因为一页有两个按钮要做倒计时,且时间、内容不一,就稍微改动了下代码,写了下函数形式,比较方便,比较适应变数
(以下是vue背景下)
HTML:
<div class="radio_title">
<span class="dot">*</span>
4.短信验证码
</div>
<van-field v-model="sms" center clearable name="sms" placeholder="请输入短信验证码">
<template #button>
<van-button size="small" native-type="button" type="primary" :disabled="sendModel.countFlag" @click="getSms">
{{sendModel.btnMsg == null ? sendModel.countNum+'s后可重新发送' : sendModel.btnMsg}}
</van-button>
</template>
</van-field>
JS:
data: {
sms: "",
sendModel: { // 短信验证码信息
countNum: 60,
countFlag: false,
intervalBtn: {}, // 定时器
btnMsg: '获取验证码'
},
},
methods: {
// 倒计时
countDown(value, time) {
value.btnMsg = null
value.countFlag = !value.countFlag // 更改btn状态
// 设置倒计时
value.intervalBtn = setInterval(() => {
if (value.countNum <= 0) {
value.btnMsg = '获取验证码'
clearInterval(value.intervalBtn) // 清除定时器
value.countFlag = !value.countFlag
value.countNum = time
};
// 倒计时
value.countNum--
}, 1000)
},
getSms() {
const value = this.sendModel;
this.countDown(value, 60);
// 对接接口
// ...
},
}