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

浙公网安备 33010602011771号