简单进度条弹窗

<el-dialog title="加载中" :visible.sync="ewmOpen" width="500px" :close-on-click-modal="false" :show-close="false"> <div style="width: 126px;height: 185px;margin:0 auto"> <el-progress :percentage="importProgress" type="circle"></el-progress> <div style="text-align: center;margin-top: 10px;font-size: 18px;font-weight: 900;">{{ importMessage }}</div> </div> </el-dialog> data:{ ewmOpen: false, importProgress: 0, importMessage: '加载中', }, mounted(){ //使用的时候别忘了调用终止就行 handle() { this.ewmOpen = true //开始计数 this.startProgress() qqff(params).then(response => { this.ewmOpen = false this.stopReportProgress() }).catch((err) => { this.ewmOpen = false this.stopReportProgress() }); }, // 开始进度递增 startProgress() { this.progressTimer = null // 先重置 this.importProgress = 0; // 每隔一段时间 +1 this.progressTimer = setInterval(() => { if (this.importProgress < 99) { this.importProgress++; } else { // 到 99 停止 clearInterval(this.progressTimer); } }, 50); // 100ms 加一次，可自己改速度 }, //停止计数 stopReportProgress() { this.importProgress = 100 this.importMessage = '加载完成' if (this.progressTimer) { clearInterval(this.progressTimer) this.progressTimer = null } }, }