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;
}

 


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM