vue 如何处理列表中展示进度的问题

<template>
  <div ref="columnarStrip" class="columnarStrip">
    <div v-if="normal()" class="columnBox">
      <div :style="{ width: widthPercent }" class="content">
        {{ val }}
      </div>
    </div>
    <div v-else class="columnBox">
      <div :style="{ width: widthPercent }" class="content"></div>
      <span class="text"> {{ val }}</span>
    </div>
  </div>
</template>

<script>
export default {
  name: 'columnarStrip',
  props: {
    max: String,
    val: String
  },
  data() {
    return {
      maxLen: null,
      columnLen: null,
      textLen: null
    }
  },
  computed: {
    widthPercent() {
      return (this.val / this.max) * 100 + '%'
    }
  },
  mounted() {
    this.maxLen = this.$refs.columnarStrip.offsetWidth
  },
  methods: {
    normal() {
      const widthScale = Number(this.widthPercent.replace('%', '')) / 100
      this.columnLen = this.maxLen * widthScale
      this.textLen = this.getTextLen(this.val)
      return this.columnLen > this.textLen
    },
    getTextLen(text) {
      const lenMap = {
        num: 8.3,
        point: 3.4
      }
      const totalNum = text.length
      const reg = /[.]/g
      const pointNum = text.search(reg) === -1 ? 0 : 1
      const textNum = totalNum - pointNum
      return pointNum * lenMap.point + textNum * lenMap.num
    }
  }
}
</script>

<style lang="scss" scoped>
.columnarStrip {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;

}
.columnBox {
  @extend .columnarStrip;
  .content {
    height: 21px;
    line-height: 21px;
    text-align: center;
    background: #3168ec;
    color: white;
  }
  .text{
    margin-left: 5px;
  }
}
</style>