最近用element UI自带的进度条组件el-progress，来实现执行任务的百分比进度动态显示，加了遮罩层。
template代码:
<div v-if="isShowProgress" class="popContainer">
<el-progress :percentage="percentage" :text-inside="true" :stroke-width="24" :color="customColor" v-if="isShowProgress" style="top: 30%; left: 28%; width: 44%"></el-progress>
</div>
css代码：
/*遮罩层*/
.popContainer {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 999999;
background: rgba(0, 0, 0, 0.6);
}
js主要代码：
// 显示任务进度条
getProgress(barId) {
if (this.timer) {
clearInterval(this.timer);
} else {
this.isShowProgress = true;
// 轮询进度接口
this.timer = setInterval(() => {
// 发送请求获取进度
getProgress(barId).then((res) => {
if (res.code === 200) {
// 蓝色
this.customColor = ‘#409eff‘;
this.percentage = res.completePercent;
if (this.percentage === 100) {
// 绿色
this.customColor = ‘#67c23a‘;
clearInterval(this.timer);
this.timer = null;
// 延迟1秒关闭进度条
setTimeout(() => {
this.percentage = 0;
this.isShowProgress = false;
this.msgSuccess("完成");
}, 1000);
}
} else {
this.msgError(‘获取进度失败‘);
}
}).catch(err => {
console.log(err.msg);
});
}, 2000);
}
},
效果如下图所示：