vue 实现60秒倒计时 然后再次点击事件加载

本人感觉特别简单的实现方法 不用啥计时器啊啥的 vue多强大 废话不多说 下面就是怼代码

复制即用

点击按钮倒计时

<button @click="getlogin" class="btn-bottom" type="primary" :disabled="disabled">{{ btnText }}</button>
           

data定义

data () {
    return {  
        // 获取验证码
        disabled: false,
        interval:undefined,
        totalCount:0,
    }
  }
           

计算属性监视

computed: {
      btnText(){
         return this.totalCount !==0? `${this.totalCount}秒再次获取`: "获取验证码"
       }
   },
           

methods：

getlogin(){
          // 按钮60秒倒计时
            this.disabled=true
            this.totalCount=60
            this.getCode()    //60秒过倒计时过后才能调用的事件
            this.interval=setInterval(()=>{
              this.totalCount--
              if(this.totalCount === 0){
                clearInterval(this.interval)
                this.disabled=false
              }
            },1000);
}
           

60秒过倒计时过后才能调用的事件

getCode(){
 
}
           

css自己定义吧 多简单 多实用

喜欢就关注我吧，我会经常更新大家在项目中实用的项目需求 复制即用 本人亲测

喜欢的可以加群一起讨论QQ: