在vue中写了计时器,清除不了?---踩坑了
点击导表按钮3秒之内按钮无法点击,过了3秒之后还原问题:采用计时器来实现效果,3秒后以后无法清除计时器解决:在data中命名一个变量,存放计时器,满足条件清除这个变量,然后确保清除(在beforeDestroy钩子中再写一个清除)export default {data() {return {oldtime:3,//按钮不能重复点击----时...
·
点击导表按钮
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;
}
更多推荐
已为社区贡献12条内容
所有评论(0)