【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">
      <!-- 步骤项 -->
      <div
        class="step"
        :class="{
          'is-active': step.status === 'active',
          'is-completed': step.status === 'completed'
        }"
      >
        {{ step.name }}
      </div>

      <!-- 步骤连线 -->
      <div
        v-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 的步骤进度条组件，并演示了如何在父组件中使用它。这个组件具有良好的可维护性和可扩展性，适合用于各种业务流程的状态展示。

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