view-ui进度条里不能展示数量，并且数字溢出怎么办

今天遇到一个需求，view-ui进度条里面要去显示实际数量，但是view-ui里的属性不支持显示数量

最后，还是封装了个组件去实现这个功能，但是后来发现进度条太短，数字没办法显示全

后来用了一个属性min-width: fit-content;去自动调整宽度

process代码封装如下

<template>
  <div :class="wrapClasses">
    <div :class="outerClasses">
      <div :class="innerClasses">
        <div style="min-width: fit-content;" :class="bgClasses" :style="bgStyle"><div class="ivu-progress-inner-text" v-if="countInside" style="margin-top: -2px;">{{ countInside }}</div></div><div :class="successBgClasses" :style="successBgStyle"></div>
      </div>
    </div>
  </div>
</template>
<script>

const prefixCls = 'ivu-progress';

export default {
  name: 'progress',
  props: {
    percent: {
      type: Number,
      default: 0
    },
    successPercent: {
      type: Number,
      default: 0
    },
    hideInfo: {
      type: Boolean,
      default: false
    },
    strokeWidth: {
      type: Number,
      default: 10
    },
    countInside:{
      type: Number,
      default: 0
    },
    vertical: {
      type: Boolean,
      default: false
    },
    strokeColor: {
      type: [String, Array]
    },
    textInside: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      currentStatus: this.status
    };
  },
  computed: {
    bgStyle () {
      const style =  this.vertical ? {
        height: `${this.percent}%`,
        width: `${this.strokeWidth}px`,
      } : {
        width: `${this.percent}%`,
        height: `${this.strokeWidth}px`
      };

      if (this.strokeColor) {
        if (typeof this.strokeColor === 'string') {
          style['background-color'] = this.strokeColor;
        } else {
          style['background-image'] = `linear-gradient(to right, ${this.strokeColor[0]} 0%, ${this.strokeColor[1]} 100%)`;
        }
      }

      return style;
    },
    successBgStyle () {
      return this.vertical ? {
        height: `${this.successPercent}%`,
        width: `${this.strokeWidth}px`
      } : {
        width: `${this.successPercent}%`,
        height: `${this.strokeWidth}px`
      };
    },
    wrapClasses () {
      return [
        `${prefixCls}`,
        `${prefixCls}-${this.currentStatus}`,
        {
          [`${prefixCls}-show-info`]: !this.hideInfo && !this.textInside,
          [`${prefixCls}-vertical`]: this.vertical

        }
      ];
    },
    outerClasses () {
      return `${prefixCls}-outer`;
    },
    innerClasses () {
      return `${prefixCls}-inner`;
    },
    bgClasses () {
      return `${prefixCls}-bg`;
    },
    successBgClasses () {
      return `${prefixCls}-success-bg`;
    }
  },
  created () {
    this.handleStatus();
  },
  methods: {
    handleStatus (isDown) {
      if (isDown) {
        this.currentStatus = 'normal';
        this.$emit('on-status-change', 'normal');
      } else {
        if (parseInt(this.percent, 10) == 100) {
          this.currentStatus = 'success';
          this.$emit('on-status-change', 'success');
        }
      }
    }
  },
  watch: {
    percent (val, oldVal) {
      if (val < oldVal) {
        this.handleStatus(true);
      } else {
        this.handleStatus();
      }
    },
    status (val) {
      this.currentStatus = val;
    }
  }
};
</script>