vue 60s倒计时按钮
<!-- 手机号 -->
<InputGroup type="number"
v-model="phone"
placeholder="手机号"
:btnTitle="btnTitle"
:disabled="disabled"
:error="errors.phone"
@btnClick="getVerifyCode"/>
export default {
name: 'Login',
data() {
return {
phone:"",
verifyCode:"",
errors:{},
btnTitle:"获取验证码",
disabled:false
}
},
methods: {
getVerifyCode() {
if(this.validatePhone()){
// 发送网络请求
this.validateBtn();
}
},
validateBtn() {
let time = 60;
let timer = setInterval(() => {
if(time == 0) {
clearInterval(timer);
this.btnTitle = "获取验证码";
this.disabled = false;
}else{
//倒计时
this.btnTitle = time + "s";
this.disabled = true;
time--;
}
},1000)
},