Steps 步骤条
引导用户按照流程完成任务的导航条。融合了 Element Plus、Naive UI、Ant Design 各家之长，并首创了导航风格与可点击切换功能。
基础用法
简单的步骤条。设置 active 属性，接受一个 number，表示当前激活步骤的索引（从 0 开始）。
竖式步骤条
设置 direction="vertical" 可以使步骤条垂直显示。
简洁风格
设置 simple 可以启用简洁风格的步骤条。
点状步骤条
设置 progress-dot 可以启用点状风格。
导航风格
设置 progress-dot="navigation" 可以启用导航风格的步骤条，适合流程引导场景。
步骤状态
通过 status 属性可以自定义每个步骤的状态。支持 wait、process、finish、error、success 五种状态。
居中对齐
设置 align-center 可以使步骤条内容居中对齐。
可点击切换
设置 clickable 可以通过点击步骤来切换当前步骤。需要配合 @change 事件使用。
当前步骤：1
自定义间距
通过 space 属性可以设置每个步骤的间距，支持数字（px）或百分比字符串。
结束步骤状态
通过 finish-status 可以设置结束步骤的状态，默认为 finish，可选值包括 success。
自定义插槽
通过 icon、title、description 插槽可以自定义步骤内容。
在 Nuxt 中使用
组件已完美适配 Nuxt 3，支持自动导入与 SSR。
迷你尺寸
设置 size="small" 可以使用更紧凑的小尺寸步骤条。
响应式布局
设置 responsive 后，当窗口宽度小于断点（默认 768px）时自动切换为垂直布局。
进度条连接线
设置 show-progress 后，连接线会显示为进度条样式。配合 Step 的 progress 属性可以显示当前步骤的完成进度。
时间线模式
设置 show-timeline 后可以显示时间信息，适合物流追踪、历史记录等场景。
禁用步骤
设置 Step 的 disabled 属性可以禁止点击该步骤。
当前步骤：0，第二步被禁用无法点击
标签位置
设置 label-placement="vertical" 可以使标签垂直排列。
延迟渲染
设置 Step 的 lazy 属性可以延迟渲染内容，首次激活时才会渲染，提升性能。
API
Steps Props
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| active | 当前激活步骤（从 0 开始） | number | 0 |
| direction | 显示方向 | 'horizontal' | 'vertical' | 'horizontal' |
| align-center | 是否居中对齐 | boolean | false |
| simple | 是否启用简洁风格 | boolean | false |
| progress-dot | 点状/导航风格 | boolean | 'dot' | 'navigation' | false |
| finish-status | 结束步骤的状态 | 'wait' | 'process' | 'finish' | 'error' | 'success' | 'finish' |
| process-status | 当前步骤的状态 | 'wait' | 'process' | 'finish' | 'error' | 'success' | 'process' |
| space | 每个 step 的间距（支持 px 或百分比） | number | string | — |
| clickable | 是否可点击切换步骤 | boolean | false |
| size | 尺寸 | 'default' | 'small' | 'default' |
| responsive | 是否响应式（小屏幕自动切换为垂直） | boolean | false |
| responsive-breakpoint | 响应式断点（px） | number | 768 |
| label-placement | 标签位置 | 'horizontal' | 'vertical' | 'horizontal' |
| show-progress | 显示进度条连接线 | boolean | false |
| show-timeline | 显示时间线 | boolean | false |
Steps Events
| 事件名 | 说明 | 类型 |
|---|---|---|
| change | 点击步骤时触发（需开启 clickable） | (index: number) => void |
Steps Slots
| 插槽名 | 说明 | 参数 |
|---|---|---|
| default | Step 组件内容 | — |
Step Props
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| title | 标题 | string | '' |
| description | 描述文字 | string | '' |
| icon | 自定义图标类名 | string | '' |
| status | 当前步骤状态（覆盖父组件设置） | 'wait' | 'process' | 'finish' | 'error' | 'success' | '' |
| disabled | 是否禁用该步骤 | boolean | false |
| time | 时间信息（用于时间线模式） | string | '' |
| progress | 进度百分比（0-100，用于进度条模式） | number | 0 |
| lazy | 是否延迟渲染内容 | boolean | false |
Step Slots
| 插槽名 | 说明 | 参数 |
|---|---|---|
| default | 自定义内容区域 | — |
| icon | 自定义图标 | — |
| title | 自定义标题 | — |
| description | 自定义描述 | — |
| time | 自定义时间内容 | — |
主题变量
| 变量名 | 说明 | 默认值 |
|---|---|---|
--yh-steps-icon-size | 图标区域大小 | 28px |
--yh-steps-line-color | 连接线颜色 | var(--yh-border-color-light) |
--yh-steps-finish-color | 完成状态颜色 | var(--yh-color-primary) |
--yh-steps-process-color | 进行中状态颜色 | var(--yh-color-primary) |
--yh-steps-wait-color | 等待状态颜色 | var(--yh-text-color-placeholder) |
--yh-steps-error-color | 错误状态颜色 | var(--yh-color-danger) |
--yh-steps-success-color | 成功状态颜色 | var(--yh-color-success) |
Expose
当前组件未暴露公开实例方法或属性。
类型导出
| 名称 | 说明 |
|---|---|
YhStepsProps | Steps 组件 Props 类型 |
YhStepsEmits | Steps 组件事件类型 |
YhStepsSlots | Steps 组件插槽类型 |
YhStepsDirection | 方向联合类型 |
YhStepsStatus | 状态联合类型 |
YhStepsProgressDot | 点状模式类型 |
YhStepsSize | 尺寸联合类型 |
YhStepsLabelPlacement | 标签位置联合类型 |
YhStepConfig | Step 配置类型 |
YhStepProps | Step 组件 Props 类型 |
YhStepSlots | Step 组件插槽类型 |
YhStepsInstance | Steps 组件实例类型 |
YhStepInstance | Step 组件实例类型 |