（22）VUE+ElementUI短信验证码倒计时

// html结构
<div class="code-box" v-show="isCountFormShow">
  <el-form-item prop="code">
    <el-input placeholder="验证码"></el-input>
  </el-form-item>
  <span class="code-img">
    <el-button @click="getCode" type="primary" plain :disabled="isDisabled">{{
      isDisabled ? countText.count + 's后获取' : countText.click
    }}</el-button>
  </span>
</div>

// 样式
.code-box {
  display: flex;
  font-size: 14px;
}

.my-input {
  width: 100%;
  height: 100%;
  border: none;
  outline: none;
  background: rgba(0, 0, 0, 0);
  padding: 0 10px;
  font-size: 16px;
}

.my-input-code {
  width: 100px !important;
}

.code-img {
  flex: 4;
  height: 40px;
  line-height: 40px;
  display: inline-block;
  border-radius: 4px;
  box-sizing: border-box;
  outline: 0;
  margin-left: 10px;
  overflow: hidden;
}

.el-button { 
  width: 100%;
  padding: 12px 9px;
}

// data中定义变量
countText: {
  count: "59",
  click: "获取短信"
},

// methods 中写方法
// 倒计时
countTime() {
  const TIME_COUNT = 60; //倒计时60秒
  if (!this.timer) {
    this.countText.count = TIME_COUNT;
    this.isDisabled = true;
    this.timer = setInterval(() => {
      if (this.countText.count > 0 && this.countText.count <= TIME_COUNT) {
        this.countText.count--;
      } else {
        this.isDisabled = false;
        clearInterval(this.timer);
        this.timer = null;
      }
    }, 1000);
  }
},
// 点击获取短信验证码
getCode() {
  this.countTime();
},
// 此为本项目需求所写，登录请求返回40020才需要发送验证码，发送手机短信后倒计时便开启
// 提交表单 发送请求
submitForm() {
  this.$refs.login.validate(valid => {
    if (valid) {
      this.$api.publicApi
        .postLogin(
          {},
          {
            username: this.param.username,
            password: encryption.Encrypt(this.param.password),
            _csrf_token: getDeviceType.ans(),
            nav_user_agent: "chrome"
          }
        )
        .then(res => {
          // 状态码为40020 需发送短信验证码
          if (res.code == 40020) {
            this.isCountFormShow = true;
            this.countTime();
          }
        });
      localStorage.setItem("ms_username", this.param.username);
    } else {
      this.$message.error(res.msg);
      return false;
    }
  });
},