手机验证码发送倒计时

**

vue实现手机验证码发送倒计时功能

**

<template>
  <div class="login">
          <van-button @click="verification" :disabled="disabled"> 
            <template v-if="isShow">获取验证码</template>
            <template v-else>{{ outTime }}秒后重发</template>
          </van-button>
  </div>
</template>

 return {
      disabled: false, // 判断是否发送验证码吗
      time: null, // 设置默认定时器为null
      isShow: true, // 获取验证码禁用标识
      outTime: 60 // 设置验证码倒计时时间
    }
  },

verification () {
      if (this.disabled) return
      this.disabled = true // 禁用发送验证码按钮
      this.isShow = false // 隐藏获取验证码字符串
      if (!this.time) {  // 当定时器不为null时
        this.time = setInterval(() => {
          this.outTime = this.outTime - 1 // 没过一秒数字减一
          if (this.outTime < 0) {
            // 倒计时结束清除定时器
            clearInterval(this.time)
            this.isShow = true // 显示获取验证码字符串
            this.outTime = 60
            this.time = null 
            this.disabled = false //将按钮设置为可用状态
          }
        }, 1000) // 每秒执行一次
      }
    }