最近用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);
}
},
效果如下圖所示：
