用vue怎么做一个短信验证码?实例展示

短信验证码,在登陆注册的页面非常常见,也非常简单
1,先上两张效果图
之前
在这里插入图片描述
2,html代码

获取验证码 {{codeTime}}秒后重新获取

sendAuthCode控制按钮中文字的变化,codeTime控制倒计时变化,都在data中定义,

sendAuthCode:true,
codeTime:0,

然后写getCode方法

getCode(){
        console.log(this.ruleForm.phone);
        axios.get('/api/v1.0/user/smsCode/', {
          params: {mobile: this.ruleForm.phone}
        }).then((response) => {
          if (response.status === 200) {
            this.sendAuthCode=false;
            this.codeTime = 60;
            var codeTimeTimer =  setInterval(()=>{
              this.codeTime--;
              if(this.codeTime<=0){
                this.sendAuthCode = true;
                clearInterval(codeTimeTimer);
              }
            }, 1000);
          }
        }).catch(error=>{

this.ruleForm.phone是你要传给后台的手机号,不会post传参的请看我另一篇博文
vue中axios各种传参方法
发现什么问题请给我留言,咱们一起菜鸡互啄
好了效果完成,css就不码了 各自有各自的样式

你可能感兴趣的:(表单)