60秒手机验证码

vue 实现短信验证码

dom层

 

 	
 
 

 	获取验证码
    {{codeTime}}秒
 

data数据

 data() {
    return {
      // 验证码框是否显示
      sendAuthCode: true,
      // 用户输入验证码
      code: null,
      //60秒倒计时
      codeTime: null,
    };
  },

业务逻辑

// 获取验证码
  async getCode() {
    if (this.regmobile && this.regmobileyes) {
      const res = await this.$http.post("验证码发送的后台接口", {
        mobile: 手机号码,
      });
      if (res.status === 200) {
        this.sendAuthCode = false;
        this.codeTime = 60;
        var codeTimeTimer = setInterval(() => {
          this.codeTime--;
          if (this.codeTime <= 0) {
            this.sendAuthCode = true;
            clearInterval(codeTimeTimer);
          }
        }, 1000);
      }
    } else {
      this.$Message.error("手机号不能为空");
    }
  },

css

     .code {
      width: 85px;
      height: 30px;
      background-color: #346dff;
      border-radius: 5px;
      align-items: center;
      justify-content: center;
      display: flex;
      color: #ffffff;
      font-size: 12px;
      margin-top: 2px;
    }

效果图