最近用element UI自帶的進度條元件el-progress，來實現執行任務的百分比進度動態顯示，加了遮罩層。

template程式碼:

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