vue.js单击按钮获取手机验证码,倒计时禁用按钮功能效果

来源:互联网 发布:知字的意思是什么 编辑:程序博客网 时间:2024/06/02 13:54

这里写图片描述

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;             }         }}...

以上就是单击按钮获取验证码倒计时效果的效果,如果在参考过程中出现错误,请在下方留言,我会及时更改,非常感谢!

阅读全文
1 0
原创粉丝点击