按钮倒计时

 <el-button  size="default" :loading="codeLoading"  @click="getCode">
                              
                              <span v-show="!codeLoading">获取验证码</span>  
                              <span v-show="codeLoading">{{ countDuwn }}秒后重发</span>
                            </el-button>
getCode(){
        //按钮变成加载状态
        this.codeLoading=true     
        // 调用接口

        // if (true) {
          
        //    setTimeout(()=>{
        //     // 按钮回复
        //     this.codeLoading=false
 

        //   },30000)
          
        // } else {
          
        // }

        let timer=setInterval(() => {
          if (this.countDuwn>0) {
            this.countDuwn--
          }else {
            clearInterval(timer)
            this.codeLoading=false
            this.countDuwn=60
          }
        }, 1000);
      }

  

data() {
        return {
            codeLoading:false,
            countDuwn:60,}

  

posted @ 2023-07-05 20:29  小白字太白  阅读(25)  评论(0编辑  收藏  举报