一般获取短信验证码的时候会用到这个呆毛:

这里写图片描述

button里面包两个span标签,根据点击状态,显示不同的span,关键代码就是倒计时:

     <button @click="getCode">
          <span  class="tip" v-if="!sendMsgDisabled && !reGet">发送验证码</span>
          <span  class="tip" v-if="!sendMsgDisabled && reGet">重新获取</span>
          <span  class="tip" v-if="sendMsgDisabled">{{rTime+'秒后重新获取'}}</span>
        </button>
 data() {
    return {
      reGet: false, // 重新获取
      rTime: 60, // 发送验证码倒计时
      sendMsgDisabled: false, // 发送验证码按钮状态
      tel: "",
      code: ""
    };
  },
      send() {
        let that = this;
      that.sendMsgDisabled = true;
      let rTime = that.rTime;
      // 倒计时
      let interval = window.setInterval(() => {
        if (--that.rTime <= 0) {
          that.rTime = rTime;
          that.sendMsgDisabled = false;
          that.reGet = true; // 重新获取按钮
          window.clearInterval(interval);
        }
      }, 1000);
      }

线上完整代码请戳戳戳戳戳

Logo

前往低代码交流专区

更多推荐