Steps 步骤条

用于展示操作流程的各个环节，引导用户按照流程完成任务。

引入

通过 easycom 自动引入，无需手动注册。

代码演示

基础用法

通过 steps 属性设置步骤列表，active 属性设置当前步骤（从 0 开始）。

<zq-steps :steps="['步骤一', '步骤二', '步骤三']" :active="1" />

对象格式

steps 数组项支持对象格式，可设置 title 和 desc。

<zq-steps
  :steps="[
    { title: '买家下单', desc: '2024-01-01' },
    { title: '商家接单', desc: '2024-01-02' },
    { title: '买家提货', desc: '' },
  ]"
  :active="1"
/>

垂直方向

通过 direction="vertical" 设置为垂直方向。

<zq-steps
  direction="vertical"
  :steps="[
    { title: '步骤一', desc: '描述信息' },
    { title: '步骤二', desc: '描述信息' },
    { title: '步骤三', desc: '描述信息' },
  ]"
  :active="1"
/>

动态切换

<zq-steps :steps="steps" :active="active" />
<zq-button text="下一步" @click="active = Math.min(active + 1, steps.length - 1)" />

const active = ref(0)
const steps = ['步骤一', '步骤二', '步骤三', '步骤四']

API

Props

参数	说明	类型	默认值
steps	步骤列表	(string | StepItem)[]	[]
active	当前步骤（从 0 开始）	number	0
direction	步骤条方向	'horizontal' | 'vertical'	'horizontal'

StepItem 数据结构

键名	说明	类型
title	步骤标题	string
desc	步骤描述	string

步骤状态

状态	说明	样式
finish	已完成（index < active）	主题色圆圈 + 勾选图标
active	进行中（index === active）	主题色圆圈 + 数字
wait	等待中（index > active）	灰色圆圈 + 数字

注意事项

• 水平方向下，步骤条会均分容器宽度。
• 垂直方向下，步骤之间有 32rpx 的间距。
• 已完成步骤之间的连接线会变为主题色。

主题定制

变量名	说明
--color-primary	已完成/进行中步骤颜色
--color-bg-input	等待中步骤圆圈背景色
--color-border	未完成连接线颜色
--color-text-primary	已完成步骤标题颜色
--color-text-placeholder	等待中步骤标题/描述颜色