记一次progress进度条组件的开发思路

大家好，刚步入前端这个行业，希望和各位大佬学习进步！
以下是我刚写好的一个progress进度条组件，由于element的进度条组件不满足业务需求，只好自己写一个组件。当然这个组件很容易，我相信各位大佬都会，我主要谈一下开发的思路。

以下是业务需要的进度条：

我一直崇尚着先思考再进行开发；先把各种细节想好，再开发的过程中渐渐完善；

1. 【结构】将进度条分为左右俩部分；左边为标题，右边为内容区；
2. 【细化】细化内容区，将内容区分为俩部分，进度条与数值部分
3. 【深层次分解】数值区域由数与单位组成，需要props传值；进度条有俩种不同的表现方式，可以利用Booleans布尔值来进行判断；
4. 【计算】按照传入的基准值计算进度条的位置；

以下是代码部分：纯属于分享

HTML部分

<template>
  <div :style="{width:_width + 'px'}" class="progress-bar">
    /*第一个进度条格式*/
    <div v-if="isTip" class="progress-bar__tip">
      <span :style="barStyle" class="progress-bar_line"/>
    </div>
    /*第二个进度条格式*/
    <div  v-if="!isTip" class="progress-bar_tip2">
      <div style="width:100%;height:100%;display:flex;">
        <div style="background: #5188ff;width:20%;height:100%"/>
        <div style="background: #48a74f;width:60%;height:100%"/>
        <div style="background: #f44336;width:20%;height:100%"/>
      </div>
      <div :style="barStyle2" class="square"/>
      <div :style="barStyle2" class="square2"/>
    </div>
    /*数值部分*/
    <div style="width: 30%;margin-left:5px"><div class="progress-bar__tiptext">{{ dataValue + unit }}</div></div>
  </div>
</template>

script部分

<script>
export default {
  props: {
    dataValue: {
      type: Number,
      default: 80
    },
    standard: {
      type: Number,
      default: 100
    },
    unit: {
      type: String,
      default: ''
    },
    _width: {
      type: Number,
      default: 220
    },
    isTip: {
      type: Boolean,
      default: true
    }
  },
  computed: {
    barStyle() {
      const style = {}
      style.width = (this.dataValue / this.standard) * 100 + '%'
      return style
    },
    barStyle2() {
      const style = {}
      style.left =
        (this.dataValue / this.standard) * this._width * 0.7 - 4 + 'px'
      return style
    }
  }
}
</script>

希望大家哆哆指教！