点击导表按钮

3秒之内按钮无法点击,过了3秒之后还原

问题:采用计时器来实现效果,3秒后以后无法清除计时器

解决:在data中命名一个变量,存放计时器,满足条件清除这个变量,然后确保清除(在beforeDestroy钩子中再写一个清除)

export default {
  data() {
    return {
      oldtime:3,//按钮不能重复点击----时间
      disable:false,//导表按钮是否禁用
      guide:null,//计时器
    }
   }
}
<el-button type="primary" @click="exportExcel" :disabled="disable" >导表</el-button>
     // 导出表格所用
    exportExcel() {
        this.oldtime=3;
        this.disable=true;
        this.guide =setInterval(()=>{
          this.oldtime--
          console.log(this.oldtime);
          if (this.oldtime==0) {
            clearInterval(this.guide)
            this.disable=false;
          }
        },1000)
    }

确保清除

  beforeDestroy() {
    clearInterval(this.guide);
    this.guide=null;
  }

 

Logo

前往低代码交流专区

更多推荐