22、一个分段分颜色的进度条组件

效果图：

完整代码
子组件：

<template>
  <div>
    <div class="progress-plus" :style="{width: width + 'px'}">
      <div class="progress_box" v-for="(item, index) in itemList" :key="index" :style="{width: width}">
        <div class="progress_div">
          <div class="progress_blank"></div>
          <div class="progress_color" :style="{'background':item.color}">
          </div>
        </div>
        <div class="progress_text">{{item.name}}</div>
      </div>
      <div class="progress_img" :style="{width: width + 'px'}">
        <!-- <img
          :src="require('../assets/images/' + imgUrl)"
          style="width: 100%; height: 100%"
        /> -->
        <div :style="setWidth()" v-if="openImg == 1">
          <div>{{percent}}</div>
          <img src="../assets/images/组 16154.png" />
        </div>
        <div :style="setWidth()" v-if="openImg == 2">
          <div>{{percent}}</div>
          <img src="../assets/images/组 16156.png" />
        </div>
        <div :style="setWidth()" v-if="openImg == 3">
          <div>{{percent}}</div>
          <img src="../assets/images/组 16152.png" />
        </div>
        <div :style="setWidth()" v-if="openImg == 4">
          <div>{{percent}}</div>
          <img src="../assets/images/组 16158.png" />
        </div>
        <div :style="setWidth()" v-if="openImg == 5">
          <div>{{percent}}</div>
          <img src="../assets/images/组 16160.png" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ProgressPlus',
  props: {
    itemList: {
      type: Array,
      default () {
        return []
      }
    },
    imgUrl: {
      type: Array,
      default () {
        return []
      }
    },
    percent: {
      type: Number,
      default: 0
    },
    width: {
      type: Number,
      default: 200
    }
  },
  data () {
    return {
      openImg: 0
    }
  },
  methods: {
    setWidth () {
      return {
        left: (this.percent * (0.9 + 0.015 * this.openImg)) + '%',
        color: this.itemList[this.openImg - 1].color
      }
    }
  },
  created () {
    if (this.percent <= 20) {
      this.openImg = 1
    } else if (this.percent <= 40) {
      this.openImg = 2
    } else if (this.percent <= 60) {
      this.openImg = 3
    } else if (this.percent <= 80) {
      this.openImg = 4
    } else if (this.percent <= 100) {
      this.openImg = 5
    }
  }
}
</script>

<style scoped lang="scss">
.progress-plus{
  font-size: 10px;
  display: flex;
  height: 50px;
  width: 100%;
  .progress_box {
    position: relative;
    width: 100%;
    .progress_text {
      text-align: center;
      color: #7c7c7c;
      font-size: 15px;
    }
    .progress_div{
      display: flex;
      align-items: center;
      height: 100%;
      justify-content: center;
      padding-top: 20px;
      .progress_blank {
        background-color: #ffffff;
        width: 10%;
      }
      .progress_color {
        height: 9px;
        flex: 5;
        border-radius: 10px;
      }
    }
  }
  .progress_img {
    position: absolute;
    display: flex;
    div {
      position: relative;
      left: 10%;
      width: 30px;
      img {
        width: 30px;
      }
    }
  }
}

</style>

父组件调用：

<progress-plus :width="700" :itemList="itemList" :percent="5" :img-url="imgUrl" />

itemList: [
        { name: '极差', color: '#EF6B43' },
        { name: '差', color: '#EF9D43' },
        { name: '正常', color: '#92E593' },
        { name: '好', color: '#6FE084' },
        { name: '优秀', color: '#4DD46D' }
      ],

好像width变得很宽的话，会不精确（希望能得到一个很好的解决方案）