vue实现动态分段的进度条

Vue 可以很方便地实现动态分段的进度条。下面是一个简单的例子：

首先，我们需要定义一个组件来表示进度条的每个分段。这个组件可以接收一个 `value` 属性表示该分段的进度值，以及一个 `color` 属性表示该分段的颜色。

<template>
  <div class="progress-bar-segment" :style="{ backgroundColor: color, width: value + '%' }"></div>
</template>
 
<script>
export default {
  props: {
    value: Number,
    color: String
  }
}
</script>
 
<style>
.progress-bar-segment {
  height: 10px;
  display: inline-block;
  margin-right: 5px;
}
</style>

接下来，我们可以定义一个包含多个分段的进度条组件。该组件可以接收一个 `segments` 数组，每个元素表示一个分段的进度值和颜色。

<template>
  <div class="progress-bar">
    <progress-bar-segment v-for="segment in segments" :key="segment.color" :value="segment.value" :color="segment.color"></progress-bar-segment>
  </div>
</template>
 
<script>
import ProgressBarSegment from './ProgressBarSegment.vue'
 
export default {
  components: {
    ProgressBarSegment
  },
  props: {
    segments: Array
  }
}
</script>
 
<style>
.progress-bar {
  display: flex;
  align-items: center;
  height: 10px;
  border-radius: 5px;
  background-color: #eee;
}
</style>

最后，我们可以在父组件中使用进度条组件并传入分段数据：

<template>
  <div>
    <progress-bar :segments="segments"></progress-bar>
  </div>
</template>
 
<script>
import ProgressBar from './ProgressBar.vue'
 
export default {
  components: {
    ProgressBar
  },
  data() {
    return {
      segments: [
        { value: 20, color: 'red' },
        { value: 30, color: 'green' },
        { value: 50, color: 'blue' }
      ]
    }
  }
}
</script>

这样就完成了一个简单的动态分段进度条。根据需要，您可以自定义外观和行为。