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

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

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

60s后效果：

<!-- 找回密码 -->
<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>