NUR

主题

Steps 步骤条 ​

引导用户按照流程完成任务的分步导航条，支持水平和垂直两种方向。

水平步骤条 ​

默认的横向步骤条，适合步骤较少、横向空间充足的场景。

步骤一
填写基本信息
2
步骤二
实名认证审核
3
步骤三
开通完成
vue
<my-steps :steps="steps" :current="current" />

const steps = [
  { title: '步骤一', description: '填写基本信息' },
  { title: '步骤二', description: '实名认证审核' },
  { title: '步骤三', description: '开通完成' },
]

垂直步骤条 ​

direction="vertical" 切换为纵向布局，适合步骤较多或描述文字较长的场景。

1
创建账户
设置手机号与密码
2
验证邮箱
输入邮箱验证码完成绑定
3
完善资料
填写个人或企业信息
4
提交审核
等待平台审核通过
vue
<my-steps :steps="steps" :current="current" direction="vertical" />

const steps = [
  { title: '创建账户', description: '设置手机号与密码' },
  { title: '验证邮箱', description: '输入邮箱验证码完成绑定' },
  { title: '完善资料', description: '填写个人或企业信息' },
  { title: '提交审核', description: '等待平台审核通过' },
]

订单流程 ​

用垂直步骤条展示物流或订单流转状态。

订单 #ORD-20260728
1
提交订单
2026-07-28 10:30
2
商家确认
2026-07-28 11:45
3
正在配送
骑手已取货
4
确认收货
等待买家确认
vue
<my-steps :steps="orderSteps" :current="current" direction="vertical" />

const orderSteps = [
  { title: '提交订单', description: '2026-07-28 10:30' },
  { title: '商家确认', description: '2026-07-28 11:45' },
  { title: '正在配送', description: '骑手已取货' },
  { title: '确认收货', description: '等待买家确认' },
]

自定义状态 ​

通过 status 属性指定步骤状态：wait、process、finish、error。

水平 — 含错误状态

拉取代码
git pull 成功
安装依赖
npm install 执行中...
执行构建
构建失败
部署上线
等待前序步骤完成

垂直 — 注册流程

创建账户
设置手机号与密码
2
验证邮箱
输入邮箱验证码完成绑定
3
完善资料
填写个人或企业信息
4
提交审核
等待平台审核通过
vue
<my-steps :steps="steps" :current="2" />

const steps = [
  { title: '拉取代码', description: '成功' },
  { title: '安装依赖', description: '执行中...' },
  { title: '执行构建', description: '构建失败', status: 'error' },
  { title: '部署上线', description: '等待中' },
]

组件结构 ​

根元素 .my-steps 包含多个 .my-steps__item，每个步骤项由指示器（图标/序号）和内容区（标题、描述）组成。步骤间通过伪元素的连接线相连。

CSS 类名 ​

类名说明
.my-steps根元素
.my-steps--horizontal水平方向
.my-steps--vertical垂直方向
.my-steps__item步骤项
.my-steps__item.is-finish已完成状态
.my-steps__item.is-process进行中状态
.my-steps__item.is-wait等待中状态
.my-steps__item.is-error错误状态
.my-steps__indicator步骤指示器（圆形）
.my-steps__indicator.is-finish指示器已完成
.my-steps__indicator.is-process指示器进行中
.my-steps__indicator.is-error指示器错误
.my-steps__check完成勾选图标
.my-steps__cross错误叉号图标
.my-steps__num步骤序号
.my-steps__content步骤内容区
.my-steps__title步骤标题
.my-steps__desc步骤描述

API ​

Steps Props ​

属性说明类型默认值
steps步骤列表StepItem[][]
current当前步骤 (0-indexed)number0
direction排列方向'horizontal' | 'vertical''horizontal'

Steps Slots ​

名称说明作用域
icon自定义步骤图标{ step, index, status }

StepItem ​

ts
interface StepItem {
  title: string
  description?: string
  status?: 'wait' | 'process' | 'finish' | 'error'
}