基于vue的短信验证码倒计时

最近做了一个小的demo，分享给大家，在很多地方都能用到。

一般获取短信验证码的时候会用到这个demo：

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

<el-button  type="primary" class="code_btn" style="background: #fff;color: #000;border: 1px solid #999;float: right;margin-top: 10px;" @click.native.prevent="getMessageCode('formData')" :loading="logining">
            <span v-if="!sendMsgDisabled">获取验证码</span>
            <span v-if="sendMsgDisabled">{{codeTime+'秒后获取'}}</span>
          </el-button>

data里设置初始数据：

codeTime: 59, // 发送验证码倒计时
sendMsgDisabled: false, // 是否显示获取验证码按钮

在发送短信验证码接口请求的成功回调函数里：

_this.sendMsgDisabled = true;
 let codeInterval = window.setInterval(function() {
     if ((_this.codeTime--) <= 0) {
           _this.codeTime = 59;
           _this.sendMsgDisabled = false;
           window.clearInterval(codeInterval);
      }
  }, 1000);

​

好了 一个简单的vue倒计时demo效果已经实现了，核心代码是定时器里面，codeTime为0时即倒计时结束，初始化codeTime及切换按钮的显示状态。