vue写短信验证时实现60s倒计时功能

拼搏现实的明天。 2023-06-23 13:00 4阅读 0赞

vue写短信验证时实现60s倒计时功能

已进入该页面就发送了验证码，同时实现倒计时功能：

![20191219140719988.png][]

60s后效果：

![201912191408170.png][]

<template>
      <div id="stepsTwo" class="clearfix">
        <div class="steps-main clearfix">
          <el-form
            :model="ruleForm"
            status-icon
            ref="ruleForm"
            label-width="0px"
            class="demo-ruleForm ruleForm"
            :rules="rules"
          >
           
              
              <el-form-item prop="verifyPhone">
               
                    <a class="grid-content">验证码</a>
                 
                      <input
                        v-model.trim="ruleForm.verifyPhone"
                        type="text"
                        placeholder="输入手机验证码"
                        class="form-input"
                        clearable
                      />
                   
                      <div
                        @click="getCode(ruleForm)"
                        v-bind:class="{ active: isActive }"
                        class="verifyPhone-button"
                      >
                       <span v-show="isActive">重新获取</span>
                        <span v-show="!isActive">{
       {count}}s</span>           
                      </div>
                    
              </el-form-item>
    
          </el-form>
        </div>
      </div>
    </template>
    
    <script>
    const TIME_COUNT = 60;
    
    export default {
      name: "stepsTwo",
      data() {
       
        return {
    
          isActive: false,
          count: 0,
          timer: null,
          ruleForm: {
            verifyPhone: "",
            newPwd: "",
            verifyPwd: ""
          }
        };
      },
      created() {
        this.getCode();//一进入这个页面就倒计时，故需要在这里挂载
      },
      methods: {
         getCode(ruleForm) {
          if (!this.timer) {
            this.count = TIME_COUNT;
            this.isActive = false;
            this.timer = setInterval(() => {
              if (this.count > 0 && this.count <= TIME_COUNT) {
                this.count--;
              } else {
                this.isActive = true;
                clearInterval(this.timer);
                this.timer = null;
              }
            }, 1000);
          }
        },
      }
    };
    </script>
    <style lang='less' scoped>
     .verifyPhone-button {                            
                    border: .0625rem solid #ccc;               
                    background: #f7f7f7;
                    color: #999;
                    border-radius: .3125rem;
                    width: 5.5625rem;
                    height: 2.375rem;
                    line-height: 2.375rem;
                    margin-top: .625rem;
                    text-align: center;
                    font-size: 1rem;
                }
    
                .active {           
                    border: .0625rem solid #3980ea;
                    background: #fff;
                    color: #3980ea;
                }
    </style>

[20191219140719988.png]: https://img-blog.csdnimg.cn/20191219140719988.png
[201912191408170.png]: https://img-blog.csdnimg.cn/201912191408170.png