vue实现阶段进度条

要在 Vue 中实现阶段进度条，可以使用 Vue 的计算属性和样式绑定来实现。

首先，在 Vue 实例中定义一个阶段列表数组和一个当前阶段索引的变量，如下所示：

data() {
  return {
    stages: ['阶段一', '阶段二', '阶段三', '阶段四'],
    currentStageIndex: 0
  }
}

然后，在模板中使用计算属性计算出当前进度百分比，并将其绑定到进度条的宽度样式上，如下所示：

<template>
  <div class="progress-bar">
    <div class="progress" :style="{ width: progressWidth }"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      stages: ['阶段一', '阶段二', '阶段三', '阶段四'],
      currentStageIndex: 0
    }
  },
  computed: {
    progressWidth() {
      return ((this.currentStageIndex + 1) / this.stages.length) * 100 + '%'
    }
  }
}
</script>

<style>
.progress-bar {
  width: 100%;
  height: 10px;
  background-color: #f0f0f0;
}

.progress {
  height: 100%;
  background-color: #007aff;
  transition: width 0.5s ease;
}
</style>

最后，在组件中使用方法或者事件来更新当前阶段索引即可实现进度条的动态更新。