Vue：进度条组件封装|调用

组件渲染样式

    先贴一张样式图，下面直接给出代码片段与使用方式，

组件封装

组件：进度条

    组件代码,

<template>
  <div class="x-process-bar">
    <p class="bartitle" v-text="pname"></p>
    <div class="content">
      <!-- 内部进度条 -->
      <div class="outbar">
        <div
          class="innerbar"
          :style="`width:${processValue}%;background-color:${bgColor}`"
        ></div>
      </div>
      <!-- 进度文字 -->
      <span class="bartext">{{ pvalue }}/{{ pmaxValue }}</span>
    </div>
  </div>
</template>
<script>
export default {
  name: "ProcessBar",
  props: {
    //名称
    name: {
      type: String | Number,
      required: true,
    },
    //最大进度值
    maxValue: {
      type: Number,
      default: 100,
    },
    //当前进度值
    value: {
      type: Number,
      default: 50,
    },
    //进度条颜色
    backgroundColor: {
      type: String,
      default: "#1890ff",
    },
  },
  data() {
    return {};
  },
  computed: {
    pname() {
      return this.$props.name;
    },
    processValue() {
      const { maxValue, value } = this.$props;
      return (value / maxValue) * 100;
    },
    pmaxValue() {
      return this.$props.maxValue;
    },
    pvalue() {
      return this.$props.value;
    },
    bgColor() {
      return this.$props.backgroundColor;
    },
  },
};
</script>
<style lang="less" scoped>
.x-process-bar {
  padding: 5px 10px;
  .bartitle {
    font-family: "Comic Sans MS", cursive, sans-serif;
    font-size: 16px;
  }
  .content {
    display: flex;
    flex-direction: row;
    align-items: center;
    .outbar {
      flex: 0.8;
      height: 10px;
      border-radius: 15px;
      background-color: #e6ebf5;
      .innerbar {
        height: 10px;
        border-radius: 15px;
        // background-color: #1890ff;
      }
    }
    .bartext {
      flex: 0.2;
      text-align: center;
      font-family: "Comic Sans MS", cursive, sans-serif;
    }
  }
}
.x-process-bar:hover {
  background-color: rgba(0, 0, 0, 0.25);
  border-radius: 15px;
}
</style>

组件：进度条组

    组件代码,

<template>
  <div>
    <ProcessBar
      v-for="(item, index) in dataList"
      :key="index"
      :name="item.name"
      :value="item.value"
      :maxValue="maxValue"
      :backgroundColor="item.color || colorTable[index % colorLen]"
    />
  </div>
</template>
<script>
import ProcessBar from "@/components/Basic/ProcessBar";
//进度条组
export default {
  name: "ProcessBarGroup",
  components: {
    ProcessBar,
  },
  props: {
    barList: {
      type: Array,
      default: [],
    },
    barMaxValue: {
      type: Number,
      default: 100,
    },
  },
  data() {
    return {
      colorTable: [
        "#13ce66", //绿色
        "#1890ff", //蓝色
        "#e6a23c", //橙色
        "#f56c6c", //红色
        "#909399", //灰色
      ],
    };
  },
  computed: {
    dataList() {
      return this.$props.barList;
    },
    maxValue() {
      return this.$props.barMaxValue;
    },
    colorLen() {
      return this.colorTable.length;
    },
  },
  mounted() {},
};
</script>
<style scoped></style>

组件使用方式

    由于此处是一次性渲染多个进度条，所以直接使用封装好的“进度条组”ProcessBarGroup.vue组件即可，为其配置好参数即可使用。

//1-导入进度条组
import ProcessBarGroup from "@/components/Group/ProcessBarGroup"; 

//2-注册组件
 components: {
    ProcessBarGroup,
    ...
  },

//3-提供数据源
data(){
	return {
		 progressList: [
        {
          name: "学生指导",
          value: 10,
        },
        {
          name: "教师获奖",
          value: 12,
        },
        {
          name: "教学项目",
          value: 6,
        },
        {
          name: "教改项目",
          value: 12,
        },
        {
          name: "教改论文",
          value: 18,
        },
        {
          name: "科研项目",
          value: 5,
        },
        {
          name: "科研奖项",
          value: 4,
        },
        {
          name: "科研论文",
          value: 6,
        },
        {
          name: "出版教材",
          value: 4,
        }
      ],
      maxProgressCount:18,//此处可以使用computed()进行属性计算
	}
}

//4-computed()计算属性-获取数组元素中的value最大值（此处给了个空数组的默认值10，可以根据自己的需求调整）
 computed: {
    maxProgressCount() {
      return this.progressList.length === 0
        ? 10
        : Math.max.apply(
            null,
            this.progressList.map((item) => item.value)
          );
    },
  }

//5-组件参数配置
        <ProcessBarGroup
          :barList="progressList"
          :barMaxValue="maxProgressCount"
        />

&nsbp;   渲染结果如前面的图片所示。