vue.js单击按钮获取手机验证码,倒计时禁用按钮功能效果
html部分我是用vue+elment框架做的;<el-button type="primary":disabled="disabled" @click="sendcode">{{btntxt}}</el-button>js部分...data() {return {btntxt:"获取验证码",disabled:false
·
html部分
我是用vue+elment框架做的;
<el-button type="primary" :disabled="disabled" @click="sendcode">
{{btntxt}}
</el-button>
js部分
...
data() {
return {
btntxt:"获取验证码",
disabled:false,
time:0,
}
},
methods: {
//验证手机号码部分
sendcode:function(){
var url="/nptOfficialWebsite/apply/sendSms?mobile="+this.ruleForm.phone;
if(this.ruleForm.phone==''){
alert("请输入手机号码");
return;
}
this.time=35;
this.disabled=true;
this.timer();
axios.post(url).then(
res=>{
this.phonedata=res.data;
}
)
},
timer:function () {
if (this.time > 0) {
this.time--;
// console.log(this.time);
this.btntxt=this.time+"s,后重新获取验证码";
setTimeout(this.timer, 1000);
} else{
this.time=0;
this.btntxt="获取验证码";
this.disabled=false;
}
}
}
...
以上就是单击按钮获取验证码倒计时效果的效果,如果在参考过程中出现错误,请在下方留言,我会及时更改,非常感谢!
更多推荐
已为社区贡献9条内容
所有评论(0)