element文件上传增加进度条

template里代码如下:

    <div class="loadingModal" :style="{'height':'100%'}" v-if="progressLoading">
         <el-progress
            :stroke-width="20"
            style="width:500px;margin-left:-250px;position: absolute;top: 50%;left: 50%;"
            :text-inside="true"
            :percentage="percentage"
            :color="colors"
            :status="percentage === 100?undefined:'success'"
        ></el-progress>
       </div>

 methods代码:

start() {
   const that = this;
   that.$nextTick(() => {
      that.progressLoading = true;
      that.percentage = 0;
      that.timeStart = setInterval(() => {
         if (that.percentage < 95) {
             that.percentage += 1;
         }
      }, 100);
   });
},
// 进度条结束
end() {
   const that = this;
   that.percentage = 100;
   clearInterval(this.timeStart);
   setTimeout(() => {
       that.progressLoading = false;
   }, 300);
},

  data参数:

progressLoading:false,
percentage:0,
colors:"#1e9f4c ",//颜色自己规定

  css代码

.loadingModal {
  width: 100%;
  margin: 0 auto;
  background: rgba(22, 21, 21, 0.3);
  text-align: center;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 999999;
}

 

posted @ 2021-11-11 13:41  奔跑的哈密瓜  阅读(1313)  评论(0编辑  收藏  举报