企业官网建设流程全解析

1. 为什么需要自定义步骤条组件

在后台管理系统、电商下单流程、表单填写等场景中，步骤条（Steps）组件几乎是标配。虽然市面上有现成的UI库（如Element Plus、Ant Design Vue）提供步骤条组件，但实际项目中总会遇到定制化需求：

• 设计稿要求特殊样式（如圆点替代数字）
• 需要适配不同业务场景的交互逻辑
• 现有组件性能或扩展性不足
• 项目有特殊的技术栈要求（如需要深度TypeScript支持）

我去年在开发一个金融风控系统时，就遇到过现有步骤条组件无法满足业务需求的情况。系统要求步骤条能根据风控等级动态改变样式，还要支持步骤间的复杂校验逻辑。最终我们决定自己开发，结果发现用Vue3的Composition API实现起来比预想的简单很多。

2. 环境准备与基础搭建

2.1 初始化Vue3项目

推荐使用Vite创建项目，这是目前最快的构建工具：

npm create vite@latest vue3-steps --template vue-ts

安装必要依赖：

cd vue3-steps npm install less -D # 我们需要用Less编写样式

2.2 组件文件结构

在src/components下创建Steps文件夹，包含以下文件：

Steps/ ├── index.ts # 组件注册 ├── Steps.vue # 组件主文件 ├── types.ts # TypeScript类型定义 └── style/ ├── index.less # 基础样式 └── vars.less # CSS变量定义

这种结构的好处是：

• 类型定义单独管理，避免主文件臃肿
• 样式文件分离，便于维护
• 支持未来扩展子组件

3. 核心功能实现

3.1 定义组件Props

在types.ts中先定义类型：

export interface StepItem { title?: string // 步骤标题 description?: string // 步骤描述 icon?: string // 自定义图标 status?: 'wait' | 'process' | 'finish' | 'error' // 步骤状态 } export interface StepsProps { current?: number // 当前步骤 items: StepItem[] // 步骤数据 size?: 'default' | 'small' // 尺寸 vertical?: boolean // 是否垂直显示 labelPlacement?: 'right' | 'bottom' // 标签位置 dotted?: boolean // 是否使用点状样式 clickable?: boolean // 步骤是否可点击 }

然后在Steps.vue中使用这些类型：

<script setup lang="ts"> import type { StepsProps, StepItem } from './types' const props = withDefaults(defineProps<StepsProps>(), { current: 1, size: 'default', vertical: false, labelPlacement: 'right', dotted: false, clickable: false }) </script>

3.2 实现步骤状态管理

核心是计算当前步骤的状态：

const currentStep = computed(() => { // 边界值处理 if (props.current < 1) return 1 if (props.current > props.items.length) return props.items.length return props.current }) const getStepStatus = (index: number) => { const stepNum = index + 1 if (stepNum < currentStep.value) return 'finish' if (stepNum === currentStep.value) return 'process' return 'wait' }

3.3 实现点击交互

通过v-model实现双向绑定：

const emit = defineEmits(['update:current', 'change']) const handleStepClick = (index: number) => { if (!props.clickable) return const stepNum = index + 1 if (stepNum !== currentStep.value) { emit('update:current', stepNum) emit('change', stepNum) } }

4. 样式系统设计

4.1 使用CSS变量控制主题

在style/vars.less中定义变量：

@steps-primary-color: #1677ff; @steps-text-color: rgba(0, 0, 0, 0.88); @steps-description-color: rgba(0, 0, 0, 0.45); @steps-wait-color: rgba(0, 0, 0, 0.25); @steps-error-color: #ff4d4f;

然后在组件中动态注入：

<div class="steps-container" :style="{ '--primary-color': props.primaryColor || '@steps-primary-color', '--text-color': '@steps-text-color', // 其他变量... }" >

4.2 实现不同布局样式

通过class控制不同布局：

// 水平布局 .steps-horizontal { display: flex; .steps-item { flex: 1; &:last-child { flex: none; } } } // 垂直布局 .steps-vertical { display: flex; flex-direction: column; } // 点状样式 .steps-dotted { .steps-icon { width: 8px; height: 8px; background: currentColor; } }

5. 高级功能扩展

5.1 动态步骤内容

有时候步骤内容需要异步加载：

const dynamicSteps = ref<StepItem[]>([]) onMounted(async () => { const res = await fetchStepsFromAPI() dynamicSteps.value = res.map(item => ({ title: item.name, description: item.detail })) })

5.2 步骤间校验逻辑

在步骤切换时增加校验：

const beforeChange = (current: number, next: number) => { if (current === 2 && next === 3) { return validateStep2() } return true } const handleStepClick = async (index: number) => { const nextStep = index + 1 if (await beforeChange(currentStep.value, nextStep)) { emit('update:current', nextStep) } }

5.3 响应式断点适配

使用CSS媒体查询实现响应式：

@media (max-width: 768px) { .steps-horizontal { flex-direction: column; &.steps-label-right { .steps-content { display: none; } } } }

6. 性能优化技巧

6.1 减少不必要的渲染

使用v-memo优化列表渲染：

<template v-for="(item, index) in props.items" :key="index" v-memo="[getStepStatus(index)]"> <div class="steps-item" :class="`steps-${getStepStatus(index)}`"> <!-- 步骤内容 --> </div> </template>

6.2 样式隔离

使用scoped样式避免污染：

<style lang="less" scoped> /* 这里的样式只作用于当前组件 */ </style>

6.3 按需引入图标

如果使用图标库，推荐按需引入：

import { CheckCircleFilled } from '@ant-design/icons-vue' // 在setup()中注册 const components = { CheckCircleFilled }

7. 单元测试要点

7.1 测试基础功能

describe('Steps Component', () => { it('should render correct steps', () => { const wrapper = mount(Steps, { props: { items: [ { title: 'Step 1' }, { title: 'Step 2' } ], current: 1 } }) expect(wrapper.findAll('.steps-item').length).toBe(2) }) })

7.2 测试交互事件

it('should emit change event when clickable', async () => { const wrapper = mount(Steps, { props: { items: [{ title: 'Step 1' }, { title: 'Step 2' }], clickable: true } }) await wrapper.findAll('.steps-item')[1].trigger('click') expect(wrapper.emitted('change')).toBeTruthy() })

8. 实际应用案例

8.1 电商下单流程

<Steps :items="[ { title: '购物车', description: '确认商品' }, { title: '填写订单', description: '收货信息' }, { title: '支付', description: '选择支付方式' }, { title: '完成', description: '订单生成' } ]" v-model:current="currentStep" clickable />

8.2 表单分步填写

const formSteps = [ { title: '基本信息', status: currentStep.value > 1 ? 'finish' : 'process' }, { title: '详细资料', status: currentStep.value > 2 ? 'finish' : currentStep.value === 2 ? 'process' : 'wait' }, { title: '确认提交', status: 'wait' } ]

在开发这个组件的过程中，我发现最容易被忽视的是边缘情况的处理。比如当步骤数据为空时应该显示什么？当current值超出范围时怎么处理？这些细节往往决定了组件的健壮性。建议在开发初期就写好类型定义和边界条件处理，这会为后续开发节省大量调试时间。