记录vue中实现注册发送手机验证码倒计时效果

一、初始化

<script>

const TIME_COUNT = 60

export default {
	isshowMsgCode: true,
    timer: null,
    countTime: ''
}

---

二、标签

<el-col :span="6">
  <div class="msg_btn" @click="handleMsgVCode" v-if="isshowMsgCode">
   <span style="color: #fff;">获取短信验证码span>
   div>
   <div class="msg_btn" @click="handleMsgVCode" disabled v-if="!isshowMsgCode">
     <span>{{ countTime }}秒后重新发送span>
   div>
 el-col>

三、逻辑代码

// 计时器
if (!this.timer) {
  this.countTime = TIME_COUNT
  this.isshowMsgCode = false
  this.timer = setInterval(() => {
    if(this.countTime > 0 && this.countTime <= TIME_COUNT) {
      this.countTime--
    } else {
      this.isshowMsgCode = true
      clearInterval(this.timer)
      this.timer = null
    }
  }, 1000)
}