本人感觉特别简单的实现方法 不用啥计时器啊啥的 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:
在这里插入图片描述

Logo

前往低代码交流专区

更多推荐