通过el-progress封装的进度条

<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属性触发进度条显示隐藏（必填），其他的可不填，有其他需求可自行添加