vue验证码读秒最简单小方法

vue 短信读秒，双向绑定使得写起来方法更加简便
1.首先在data里面三个变量

data () {
  return{
      content: '获取手机验证码', // 按钮里显示的内容
      totalTime: 60, // 记录具体倒计时时间
      canClick: true // 添加canClick
  }
}

2.吧方法放到methods内

   // 验证码读秒
    setTime () {
      if (!this.canClick) return // 如果是false 直接return出去
      this.canClick = false
      this.content = this.totalTime + 's后重新发送'
      let clock = window.setInterval(() => {
        this.totalTime--
        this.content = this.totalTime + 's后重新发送'
        if (this.totalTime < 0) {
          window.clearInterval(clock)
          this.content = '重新发送验证码'
          this.totalTime = 60
          this.canClick = true // 这里重新开启
        }
      }, 1000)
    }

3.在你写好的按钮上进行绑定

  <input type="button"
                     :value="content"
                     :class="{disabled: !canClick}"
                     @click="getCode">

getCode这个点击事件就是调取验证码接口的方法，有两种选择：
那就是点击直接执行读秒，因为有些时候接口返回不能直接返回可能延迟1到2秒，
另一种是接口返回200并且调取成功的时候在开始执行读秒，具体随意了
后期我发一个公共组件的验证码 减少复用

如果对你有帮助请帮忙点赞，有问题可以联系更改