效果
代码
<el-progress v-if="isProgress" :percentage="percentage":color="customColorMethod"></el-progress>
let configs = {
onUploadProgress: progressEvent => {
if (progressEvent.lengthComputable) {
_this.isProgress = true
//是否存在进度
var percentCompleted = Math.round((progressEvent.loaded * 100) / progressEvent.total)
console.log('进度:', percentCompleted)
_this.percentage = percentCompleted
if (percentCompleted == 100) {
_this.isProgress = true
}
_this.$forceUpdate()
}
}
}
附:el-progress整体封装
<template>
<div class="bg">
<el-progress :stroke-width="20" :percentage="percentage" :color="customColorMethod"></el-progress>
</div>
</template>
<script>
export default {
props: ['percentage'],
data() {
return {}
},
methods: {
customColorMethod(percentage) {
if (percentage < 30) {
return '#909399'
} else if (percentage < 70) {
return '#e6a23c'
} else {
return '#67c23a'
}
}
},
watch: {
percentage: function(val) {
this.$forceUpdate()
}
}
}
</script>
<style lang="scss" rel="stylesheet/scss" scoped>
.bg {
width: 100%;
height: 100%;
text-align: center;
padding-top: 45vh;
padding: 0px 20vw;
padding-top: 45vh;
background: rgba(239,235,235, 0.03);
background-image: linear-gradient(-180deg, rgba(234, 237, 237, 0.3) 0%, rgba(224, 213, 213, 0.3) 100%);
position: fixed;
top: 0;
left: 0;
}
</style>