分段进度条组件实现

下面是一个简单的分段进度条组件实现代码：

<template>
  <div class="segment-progress-bar">
    <div v-for="(item, index) in segments" :key="index" :class="getSegmentClass(item)">
      <span class="label">{{ item }}%</span>
    </div>
  </div>
</template>

<script>
export default {
  name: 'SegmentProgressBar',
  props: {
    segments: {
      type: Array,
      required: true
    },
    total: {
      type: Number,
      required: true
    }
  },
  methods: {
    getSegmentClass(item) {
      let cls = 'segment';
      if (item === 100) {
        cls += ' completed';
      } else if (item > 0) {
        cls += ' active';
      }
      return cls;
    }
  }
}
</script>

<style>
.segment-progress-bar {
  display: flex;
  justify-content: space-between;
  height: 20px;
  border: 1px solid #ccc;
}

.segment {
  height: 100%;
  flex-grow: 1;
  border-right: 1px solid #ccc;
  position: relative;
}

.segment:last-child {
  border-right: none;
}

.segment.active {
  background-color: #fcc;
}

.segment.completed {
  background-color: #cfc;
}

.label {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
</style>

在上面的代码中，我们首先定义了一个名为SegmentProgressBar的Vue组件，包含两个props：segments和total，分别表示进度条的完成情况和总数。在template中，我们使用v-for指令遍历segments数组，为每个进度条渲染一个div元素，并根据其完成情况添加不同的class。在script中，我们定义了一个getSegmentClass方法，根据进度条的完成情况返回相应的class名称。在style中，我们定义了进度条和标签的样式。

在父组件中，我们可以这样使用SegmentProgressBar组件：

<template>
  <div>
    <h3>Segment Progress Bar</h3>
    <segment-progress-bar :segments="segments" :total="total"></segment-progress-bar>
  </div>
</template>

<script>
import SegmentProgressBar from '@/components/SegmentProgressBar.vue';

export default {
  name: 'App',
  components: {
    SegmentProgressBar
  },
  data() {
    return {
      segments: [20, 60, 80, 100],
      total: 4
    }
  }
}
</script>

在父组件中，我们引入了SegmentProgressBar组件，并传递了segments和total属性。segments属性是一个数组，包含四个进度条的完成情况，total属性是数字4，表示进度条总数。在浏览器中打开页面，就可以看到一个简单的分段进度条组件了。