vant 验证码倒计时

<template>
  <div class="myorder_bg">
     <van-field
          v-model="verificationCode"
          center
          required
         
          label="请输入验证码"
          placeholder="请输入验证码"
        >
          <button 
          slot="button" :disabled="!countdown"  
           v-bind:class="[countdown ? 'reg_active' : 'reg_disActive']"
            @click="getCode"
            >
            <span v-if="countdown">{{text}}</span>
            <span v-if="!countdown">{{text}} ({{count}})</span>
           </button
          >
        </van-field>
  </div>
  <!-- </div> -->
</template>
<script>

// import dropload from '../../utils/dropload.min.js';
export default {
  data() {
    return {
      verificationCode:"",
      countdown: true,
      count: "",
      timer: null,
      text:"发送验证码"
    };
  },
  methods: {
   
    getCode() {
      const TIME_COUNT = 60;
       if (!this.timer) {
        this.count = TIME_COUNT;
        this.countdown = false;
        this.text="重新发送"
        this.timer = setInterval(() => {
          if (this.count > 0 && this.count <= TIME_COUNT) {
            this.count--;
          } else {
            this.countdown = true;
            
            clearInterval(this.timer);
            this.timer = null;
          }
        }, 1000);
      }
    
      
    },
  },
 
 
};
</script>
<style lang="less" scoped>
.reg_active{
  width: 130px;
  height: 2rem;
  background: #07c160;
  color: #fff;
  border: none;
}
.reg_disActive{
    width: 130px;
 height: 2rem;
  /* background: #07c160; */
  color:#323233;
  border: none;
}
</style>