60秒手机验证码

最新推荐文章于 2023-07-19 14:03:09 发布

一只敲码的猫~

最新推荐文章于 2023-07-19 14:03:09 发布

阅读量495

点赞数 1

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/qq_38946996/article/details/106643180

版权

vue 专栏收录该内容

105 篇文章 2 订阅

订阅专栏

vue 实现短信验证码

dom层

 <div class="mobile">
 	<input type="text" placeholder="请输入验证码" v-model="code" />
 </div>
 <div class="code">
 	<span v-show="sendAuthCode" @click="getCode()">获取验证码</span>
    <span v-show="!sendAuthCode">{{codeTime}}秒</span>
 </div>

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