简单进度条弹窗

el-dialog title加载中 :visible.syncewmOpen width500px :close-on-click-modalfalse :show-closefalse div stylewidth: 126px;height: 185px;margin:0 auto el-progress :percentageimportProgress typecircle/el-progress div styletext-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 } }, }