vue 中简单的写一个获取验证码60秒倒计时

项目中我们会遇到给手机,邮箱等发送验证码!为了频繁获取都会做一个60秒保护机制.

废话不多说直接上代码

html

 <el-form :model="inputEmail" :rules="checkrules" ref="getCodeRules" class="editForm">
          <el-form-item prop="email">
            <span class="userTitle">邮箱：</span>
            <el-input placeholder="请输入邮箱" class="inputEmail" v-model="inputEmail.email"></el-input>
            <span v-if="codeShow" class="getcold" @click="getColde">获取验证码</span>
            <span v-if="!codeShow" class="count">{{count}}秒后重试</span>
          </el-form-item>
        </el-form>
        <el-form :model="codeForm" :rules="coderules" ref="codeForm" class="editForm">
          <el-form-item prop="code">
            <span class="userTitle">验证码：</span>
            <el-input placeholder="请输入验证码" class="inputS" v-model="codeForm.code"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="goRegistered" class="loginButton">注册</el-button>
          </el-form-item>
        </el-form>

javascript

return {
 codeShow: true, //获取验证码倒计时
 timer: null, //定时器
 count: '', //倒计时数字
}

在需要使用的方法中使用以下代码

      const TIME_COUNT = 60;
                     if (!this.timer) {
                        this.count = TIME_COUNT;
                        this.codeShow = false;
                        this.timer = setInterval(() => {
                            if (this.count > 0 && this.count <= TIME_COUNT) {
                                this.count--;
                            } else {
                                this.codeShow = true;
                                clearInterval(this.timer);
                                this.timer = null;
                            }
                        }, 1000)
                    }