<template>
<div v-if="progressLoading" class="loadingModal" :style="{ height: fatherHeight + 'px' }">
<el-progress
:style="{ width: '14%', margin: '0 auto', marginTop: `${fatherHeight * xiaoShu}px` }"
:type="progressType"
:stroke-width="strokeWidth"
:percentage="percentage"
:format="format"
:color="colors"
:show-text="showText"
:text-color="textColor"
></el-progress>
</div>
</template>
<script>
export default {
name: 'ProgressLoading',
props: {
// 可改变进度条条的垂直位置
xiaoShu: {
type: Number,
default: 0.5
},
strokeWidth: {
type: Number,
default: 6
},
showText: {
type: Boolean,
default: true
},
// 进度条类型
progressType: {
type: String,
default: 'line'
},
// 显示状态
progressShow: {
type: Boolean,
default: false
},
textColor: {
type: String,
default: '#000000'
}
},
data() {
return {
percentage: 0,
timeStart: 0,
fatherHeight: 0, // 父级元素高度
colors: [
{ color: '#1989fa', percentage: 99 },
{ color: '#2BD176', percentage: 100 }
],
progressLoading: false
}
},
computed: {},
watch: {
// 监听loading状态控制进度条显示
progressShow(value, newValue) {
const that = this
if (value) {
that.start()
} else {
that.end()
}
}
},
mounted() {
// 获取父级元素的高度,使组件高度与父元素高度相同
// 相对于父元素定位
this.$el.parentNode.style.position = 'relative'
},
methods: {
format(percentage) {
return this.percentage === 100 ? '完成' : `${percentage}%`
},
// 进度条开始
start() {
const that = this
that.fatherHeight = this.$el.parentNode.offsetHeight
that.$nextTick(() => {
that.progressLoading = true
that.percentage = 0
that.timeStart = setInterval(() => {
if (that.percentage < 95) {
that.percentage += 5
}
}, 100)
})
},
// 进度条结束
end() {
const that = this
that.percentage = 100
clearInterval(this.timeStart)
setTimeout(() => {
that.progressLoading = false
}, 300)
}
}
}
</script>
<style>
.loadingModal {
height: var(height);
width: 100%;
/* 白屏效果 */
/* background: rgba(255, 255, 255, 0.9); */
text-align: center;
position: absolute;
top: 0;
left: 0;
z-index: 999999;
}
</style>
用法:progressShow属性触发进度条显示隐藏(必填),其他的可不填,有其他需求可自行添加