代码如下:
<div class="identifying" v-show="codeshow == 'true'">
<div class="img2"><img src="../../static/img/icon_identifying_code.png"></div>
<input placeholder="请输入验证码" type="text" v-model="idenfitycode"/>
<div class="get_identifying_code" v-on:click="sendcode" v-show="sendAuthCode">获取验证码</div>
<div class="get_identifying_code" v-show="!sendAuthCode" >{{auth_time}} <span> 秒之重新发送验证码</span> </div>
</div>
动态部分:
data() {
return {
codeshow:"true",
passwordShow:"false",
password_login:"true",
phoneNum:"", //手机号
idenfitycode:"",//验证码
password:"",//密码
sendAuthCode:true,/*布尔值,通过v-show控制显示‘获取按钮’还是‘倒计时’ */
auth_time: 0, /*倒计时 计数器*/
}
},
倒计时部分:
sendcode(){
//电话号码验证
var reg=11&& /^((13|14|15|17|18)[0-9]{1}\d{8})$/;
var phoneNum = this.phoneNum;
if(!phoneNum){
alert("请输入手机号码");
return;
}
if(reg.test(this.phoneNum)){
this.sendAuthCode = false;
this.auth_time = 60;
var auth_timetimer = setInterval(()=>{
this.auth_time--;
if(this.auth_time<=0){
this.sendAuthCode = true;
clearInterval(auth_timetimer);
}
}, 1000);
}else{
alert("手机格式不正确");
}
},
over