Steps 步骤条

展示流程进度。状态由索引自动派生，宿主只需维护一个数字。

基础用法

填写信息基本信息与联系方式

2确认订单核对商品与金额

3完成支付选择支付方式

当前第 2 步

<script setup>
import { ref } from 'vue'
const current = ref(0)
</script>

<template>
  <SrSteps v-model="current">
    <SrStep title="填写信息" description="基本信息与联系方式" />
    <SrStep title="确认订单" description="核对商品与金额" />
    <SrStep title="完成支付" description="选择支付方式" />
  </SrSteps>
</template>

状态是派生的，不用逐个设置

小于当前索引的自动是「已完成」，大于的自动是「未开始」。 宿主只维护 current 这一个数字。

为什么不让宿主逐个设置状态

逐个设置看起来更灵活，实际是把一致性维护推给了调用方： 设了「第 2 步完成」却忘了「第 1 步也是完成」，就会出现视觉上的断层。 而这类错误在开发时几乎发现不了——只有走到那一步才会看到。

派生则不存在这个问题：只有一个真值来源，不可能自相矛盾。

1第 1 步

2第 2 步

3第 3 步

第 1 步

2第 2 步

3第 3 步

第 1 步

第 2 步

第 3 步

<SrSteps :model-value="0">…</SrSteps>   <!-- 第 1 步进行中 -->
<SrSteps :model-value="1">…</SrSteps>   <!-- 第 1 步完成，第 2 步进行中 -->
<SrSteps :model-value="3">…</SrSteps>   <!-- 全部完成 -->

出错状态

当前步出错时传 status="error"。只影响当前步，其余仍按索引派生。

提交申请

审核中

3完成

<SrSteps v-model="current" status="error">…</SrSteps>

也可以给单个步骤设状态——用于表达「某一步曾失败」这类与顺序无关的情况：

<SrStep title="步骤一" status="error" />
<SrStep title="步骤二" />

步骤级的状态优先于派生结果。

纵向

步骤多、或标题较长时用纵向——横向会把标题挤成多行。

填写信息基本信息与联系方式

2确认订单核对商品与金额

3完成支付选择支付方式

<SrSteps v-model="current" direction="vertical">
  <SrStep title="填写信息" description="基本信息与联系方式" />
  <SrStep title="确认订单" description="核对商品与金额" />
</SrSteps>

横向适合 3–5 步；再多、或含描述文本时，纵向更清楚。

可点击跳转

clickable 允许点击切换。不限制只能往前跳—— 「返回上一步修改」是极常见的需求。

填写信息

2确认订单

3完成支付

<SrSteps v-model="current" clickable>…</SrSteps>

何时不该用 clickable

流程有前置依赖时不要开启。例如「必须先填完表单才能进入确认页」， 允许点击跳转等于绕过了校验。

需要限制时，把已完成的步骤之外都设为 disabled。

标题居中

填写信息

2确认订单

3完成支付

<SrSteps v-model="current" align-center>…</SrSteps>

尺寸

填写信息

2确认订单

3完成支付

<SrSteps v-model="current" size="sm">…</SrSteps>

SrSteps Props

名称	类型	默认值	说明
modelValue	number	0	当前步骤索引（从 0 开始）
direction	'horizontal' | 'vertical'	'horizontal'	排列方向
status	'wait' | 'process' | 'finish' | 'error'	'process'	当前步的状态
size	'sm' | 'md'	'md'	尺寸
clickable	boolean	false	是否可点击跳转
alignCenter	boolean	false	标题与描述是否居中（仅横向）

SrStep Props

名称	类型	默认值	说明
title	string	—	标题
description	string	—	描述文本
status	'wait' | 'process' | 'finish' | 'error'	—	单独指定状态，优先于派生结果
disabled	boolean	false	是否禁用（clickable 时阻止点击）

事件

事件	参数	说明
update:modelValue	number	当前步变化
change	number	同上（语义化事件）

无障碍

• 使用 <ol> / <li> 语义，读屏软件会播报「列表，第 N 项，共 M 项」
• 已完成 / 进行中 / 未开始通过文本而非仅靠颜色区分—— 色觉障碍用户需要能分辨
• clickable 时每步是 <button>，可键盘聚焦与触发