【Vue 3 步骤进度条组件实现与使用教程】

---

🧭 Vue 3 步骤进度条组件实现与使用教程

在实际项目中，我们经常需要展示流程状态，例如订单处理、任务流转等。为了提升用户体验和视觉效果，我们可以使用一个步骤进度条（Steps）组件来清晰地展示当前所处的环节。

本文将介绍一个基于 Vue 3 的步骤进度条组件，并详细讲解其功能实现方式以及如何在父组件中调用它。

---

✨ 功能概述

该组件支持以下功能：

• 显示多个步骤（Step），每个步骤有名称；
• 支持三种状态：
  • pending：未开始
  • completed：已完成
  • active：进行中
• 自动根据传入的当前步骤名称更新状态；
• 每个步骤之间通过线条连接，并带有方向箭头；
• 样式美观，支持主题色定制。

---

📦 组件结构

文件组成

本组件是一个 .vue 单文件组件，包含以下部分：

• <template>：定义了组件的结构；
• <script setup>：逻辑处理与响应式数据；
• <style scoped>：组件样式封装。

---

🧩 组件代码详解

1. <template> 部分

<template><div class="steps-container"><template v-for="(step, index) in steps" :key="index"><!-- 步骤项 --><divclass="step":class="{'is-active': step.status === 'active','is-completed': step.status === 'completed'}">{{ step.name }}</div><!-- 步骤连线 --><divv-if="index < steps.length - 1"class="step-line":class="{'is-completed': steps[index].status === 'completed','is-active': steps[index + 1].status === 'active'}"></div></template></div>
</template>

• 使用 v-for 循环渲染每一个步骤；
• 判断当前步骤的状态，设置相应的类名以控制样式；
• 步骤之间的线也根据前一步或后一步的状态改变颜色和样式。

---

2. <script setup> 部分

import { defineProps, ref, watch, computed } from "vue";const props = defineProps({currentStepName: {type: String,required: false,},
});// 定义步骤列表
const steps = ref([{ name: "暂存", status: "pending" },{ name: "接单", status: "pending" },{ name: "分发中", status: "pending" },{ name: "分发", status: "pending" },{ name: "部分作业完成", status: "pending" },{ name: "全部作业完成", status: "pending" },
]);// 计算当前步骤索引
const currentStep = computed(() => {return steps.value.findIndex((step) => step.name === props.currentStepName);
});// 监听 currentStepName 变化并更新状态
watch(() => props.currentStepName,(newName) => {const idx = steps.value.findIndex((step) => step.name === newName);steps.value.forEach((step, i) => {if (i < idx) {step.status = "completed";} else if (i === idx) {step.status = "active";} else {step.status = "pending";}});},{ immediate: true }
);// 提供 save 方法供父组件调用
const save = (orderId) => {console.log("子组件 PageA 保存订单号：", orderId);
};defineExpose({ save });

• 接收 currentStepName 属性用于标识当前步骤；
• 根据当前步骤自动更新所有步骤的状态；
• 提供 save() 方法供外部调用（可选）。

---

3. <style> 部分

<style scoped>
.steps-container {display: flex;align-items: center;background: #f8f8f8;border-radius: 16px;padding: 8px 16px;overflow-x: auto;
}.step {min-width: 64px;text-align: center;font-size: 14px;color: #888;cursor: pointer;padding: 0 8px;transition: all 0.2s ease;
}.step.is-active {color: #fff;background: linear-gradient(90deg, #6c83ff 60%, #8b9dff 100%);box-shadow: 0 2px 8px rgba(108, 131, 255, 0.2);
}.step.is-completed {color: #28a745;background: #e6ffe6;
}.step-line {width: 40px;height: 4px;background: #e0e0e0;margin: 0 6px;position: relative;
}.step-line.is-completed {background: #28a745;
}.step-line.is-active {background: linear-gradient(90deg, #6c83ff 60%, #8b9dff 100%);
}/* 箭头样式 */
.step-line::after {content: "";position: absolute;right: -4px;top: 50%;transform: translateY(-50%) rotate(45deg);width: 8px;height: 8px;border-top: 4px solid #e0e0e0;border-right: 4px solid #e0e0e0;z-index: 0;
}.step-line.is-completed::after {border-color: #28a745;
}.step-line.is-active::after {border-color: #8b9dff;
}.steps-container > .step-line:last-of-type::after {display: none;
}
</style>

• 定义了不同状态下的样式；
• 使用 CSS 渐变和阴影提升视觉体验；
• 使用伪元素绘制箭头。

---

🧰 如何调用该组件？

假设你已经创建了上述组件，将其命名为 StepsProgress.vue，接下来我们来看如何在父组件中使用它。

1. 引入组件

<script setup>
import StepsProgress from "@/components/StepsProgress.vue";
</script>

2. 使用组件并传递参数

<template><div><h3>当前流程状态：</h3><StepsProgress :current-step-name="currentStep" /></div>
</template>

3. 设置当前步骤名称

<script setup>
import { ref } from "vue";
import StepsProgress from "@/components/StepsProgress.vue";const currentStep = ref("分发中");
</script>

此时组件会自动识别“分发中”为当前步骤，并把之前的步骤标记为已完成，之后的为待完成。

---

🎨 效果预览

步骤	状态
暂存	已完成
接单	已完成
分发中	进行中 ✅
分发	待完成
部分作业完成	待完成
全部作业完成	待完成

界面会显示一条带颜色的进度线，高亮当前步骤，并且之前的步骤变为绿色表示已完成。

效果图1

效果图2

---

🔧 扩展建议

你可以根据需要扩展此组件的功能，例如：

• 支持点击某个步骤跳转；
• 添加动画过渡；
• 支持水平滚动适配移动端；
• 支持垂直布局；
• 支持图标或徽章显示。

---

📌 总结

本文介绍了如何构建一个 Vue 3 的步骤进度条组件，并演示了如何在父组件中使用它。这个组件具有良好的可维护性和可扩展性，适合用于各种业务流程的状态展示。

如果你觉得这篇文章对你有帮助，欢迎点赞、收藏或分享给更多开发者朋友！

---