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

鲤鱼_599

已于 2022-08-30 14:43:30 修改

阅读量435

点赞数

文章标签： css css3 html

于 2022-08-30 08:43:58 首次发布

本文链接：https://blog.csdn.net/qq_44035882/article/details/126596213

版权

效果图：
在这里插入图片描述

在这里插入图片描述

完整代码
子组件：

<template>
  <div class="progress-plus">
    <div class="progress-content">
      <div class="progress-box" v-for="(item, index) in itemList" :key="index">
        <div class="progress-div">
          <div class="progress-color" :style="{ 'background': item.color }"></div>
        </div>
        <div class="progress-text">{{ item.name }}</div>
      </div>
    </div>
    <div class="progress-point">
      <div class="progress-percent" :style="setWidth">
        <div class="percent-text">{{ percent }}</div>
        <img v-if="openImg === 1" src="../assets/images/16154.png" />
        <img v-if="openImg === 2" src="../assets/images/16156.png" />
        <img v-if="openImg === 3" src="../assets/images/16152.png" />
        <img v-if="openImg === 4" src="../assets/images/16158.png" />
        <img v-if="openImg === 5" src="../assets/images/16160.png" />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ProgressPlus',
  props: {
    itemList: {
      type: Array,
      default: () => [
        { name: '极差', color: '#EF6B43' },
        { name: '差', color: '#EF9D43' },
        { name: '正常', color: '#92E593' },
        { name: '好', color: '#6FE084' },
        { name: '优秀', color: '#4DD46D' }
      ]
    },
    percent: {
      type: [Number, String],
      default: 0
    }
  },
  computed: {
    setWidth () {
      return {
        left: this.percent + '%',
        color: this.itemList[this.openImg - 1].color
      }
    },
    openImg () {
      if (this.percent <= 20) {
        return 1
      } else if (this.percent <= 40) {
        return 2
      } else if (this.percent <= 60) {
        return 3
      } else if (this.percent <= 80) {
        return 4
      } else if (this.percent <= 100) {
        return 5
      }
      return 0
    }
  }
}
</script>

<style scoped lang="scss">
.progress-plus {
  font-size: 10px;
  height: 70px;
  width: 100%;

  .progress-content {
    margin-top: 20px;
    width: 100%;
    display: flex;
  }

  .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;

      .progress-color {
        height: 9px;
        flex: 5;
        border-radius: 10px;
        margin-left: 5px;
        margin-right: 5px;
      }
    }
  }

  .progress-point {
    width: 100%;
    position: relative;

    .progress-percent {
      position: absolute;
      transition: all 0.3s;
      top: -46px;
      margin-left: -10px;
      text-align: center;

      img {
        width: 20px;
      }
    }
  }
}
</style>

父组件调用：

<progress-plus :itemList="itemList" :percent="5" />

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