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

「爱情、让人受尽委屈。」 2021-11-10 09:44 224阅读 0赞

本人感觉特别简单的实现方法 不用啥计时器啊啥的 vue多强大 废话不多说 下面就是怼代码  
复制即用  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hpYXdlbnlpMTIzNA_size_16_color_FFFFFF_t_70]  
点击按钮倒计时

<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:  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hpYXdlbnlpMTIzNA_size_16_color_FFFFFF_t_70 1]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hpYXdlbnlpMTIzNA_size_16_color_FFFFFF_t_70]: /images/20211109/e50facab6c3d41caaabde7c1344029f3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hpYXdlbnlpMTIzNA_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20190805113228707.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hpYXdlbnlpMTIzNA==,size_16,color_FFFFFF,t_70