1 html 部分
<text :disabled="disabled" @click="getCode">{{ btntext }}</text>
2 js 部分
export default {
data() {
return {
disabled:false,
phone:'',
code:'',
btntext: '获取验证码',
timer: null,
}
},
methods: {
//获取验证码
getCode(){
let reg = /^\d{11}$/
if (!this.phone || !reg.test(this.phone)) {
this.tips('请输入正确手机号码');
return;
} else {
let params = {
phone: this.phone,
}
this.countDown();//倒计时
}
},
//倒计时
countDown(){
if (this.disabled) {
return false;
}
let second = 60; //1分钟倒计时
//不允许多次点击
this.disabled = true;
//倒计时
this.timer = setInterval(() => {
this.btntext = `${second}s可重发`;
second--;
if (second == 0) {
//1分钟后再次可以点击
this.disabled = false;
this.btntext = `重新获取`;
clearInterval(this.timer)
}
}, 1000);
this.yzm();
return true;
},
//获取验证码接口
yzm(){
let par ={
phone:this.phone
}
//接下来自己写请求接口
}
}