登录（手机验证码倒计时）

需求：实现手机验证码登录时，倒计时功能

 页面：

<el-form :model="editRecordForm"
               :rules="editRecordFormRules"
               ref="editRecordFormRef"
               label-width="200px">
        <el-form-item label="手机号码："
                      prop="mobile">
          <el-input v-model="editRecordForm.mobile"
                    disabled>el-input>
        el-form-item>
        <el-form-item label="验证码："
                      prop="code">
          <div class="codeBox">
            <div class="codeBox-left">
              <el-input placeholder="验证码"
                        :disabled="disabledEditFormCode"
                        v-model="editRecordForm.code">el-input>
            div>
            <div class="codeBox-right">
              <el-button v-if="codeShow"
                         :disabled="disabled"
                         style="width:100%;height:100%"
                         size="medium"
                         @click="getCode">
                获取验证码
              el-button>
              <el-button v-else
                         :disabled="true"
                         style="width:100%;height:100%"
                         size="medium">
                {{ codeCount }}s重新获取
              el-button>

            div>
          div>
        el-form-item>
        <el-form-item>
          <el-button type="primary"
                     @click="submitEditRecordFrom"
                     size="mini"
                     style="float:right">提交el-button>
        el-form-item>
      el-form>

data中定义变量

codeCount: '',
timer: null,

codeShow: true,

methods中定义方法

    // 获取验证码（倒计时）
    getCode() {
      const TIME_COUNT = 180
      if (!this.timer) {
        this.codeCount = TIME_COUNT
        this.codeShow = false
        this.timer = setInterval(() => {
          if (this.codeCount > 0 && this.codeCount <= TIME_COUNT) {
            this.codeCount--
          } else {
            this.codeShow = true      
            clearInterval(this.timer)
            this.timer = null
          }
        }, 1000)
      }
      this.getCodeNumber()    （获取验证码掉接口）
    },

效果