vue实现一个按钮计时器

运用实际场景：需要发一个验证码，然后等60秒才能进行第二次点击

 <div class="vcode-btn" @click.prevent="getVcode">
                    <i v-show="vcode">获取验证码</i>
                    <i v-show="!vcode">{{count}}s</i>
                    </div>

<script>
data() {
	return {
		      vcode: true,
		      count: '',
		      timer: null
	}

methods: {
  //获取验证码
    getVcode() {
      const reg = /^1[3|4|5|6|7|8|9][0-9]\d{8}$/; # 获取验证码前，先验证手机号的有效性
      if (reg.test(this.UserInfo.phone) && this.UserInfo.phone.length !== 0) {
          this.vcode = false
          let TIME_COUNT = 60;
          if (!this.timer) {
            this.count = TIME_COUNT
            this.timer = setInterval(() => {
              if (this.count > 0 && this.count <= 60) {
                this.count --
              } else {
                this.vcode = true
                clearInterval(this.timer)
                this.timer = null
              }
            }, 1000)
          }
          const url = api.verifycode_url.url
          let phone = {
            mobile: this.UserInfo.phone
          }
          axios.post(url, phone).then(resp => {
            if (resp.data.status === "success") {
              this.$message({
                type: 'success',
                message: "验证码发送成功,请注意查收！"
              })
            } else {
              this.$message({
                type: 'error',
                message: resp.data.msg
              })
            }
          })
      } else {
        this.$message({
          type: 'error',
          message: '请输入正确手机号'
        })
      }
    },

}
</script>