Steps 步骤条

步骤条由容器 mu-steps 与步骤项 mu-step 组合而成，用于展示流程进度。组件支持竖向与横向排列，提供圆点、数字与图标三种指示器，步骤标题、描述与内容均可自定义。

小程序	APP	Web
✓	✓	✓

实例

以下按属性分别说明 mu-steps 与 mu-step 的用法，可按需组合。

<template>
  <mu-steps :active="2">
    <mu-step title="填写信息" description="填写基础资料"></mu-step>
    <mu-step title="确认信息" description="核对填写内容"></mu-step>
    <mu-step title="提交审核" description="等待后台审核"></mu-step>
    <mu-step title="完成" description="流程结束"></mu-step>
  </mu-steps>
</template>

横向排列

设置 direction 为 horizontal 时步骤按横向排列，并默认撑满宽度。

<mu-steps direction="horizontal" :active="1">
  <mu-step title="下单"></mu-step>
  <mu-step title="支付"></mu-step>
  <mu-step title="发货"></mu-step>
  <mu-step title="完成"></mu-step>
</mu-steps>

数字模式

将步骤项的 type 设为 number，指示器显示序号。

<mu-steps direction="horizontal" :active="2">
  <mu-step type="number" title="下单"></mu-step>
  <mu-step type="number" title="支付"></mu-step>
  <mu-step type="number" title="发货"></mu-step>
  <mu-step type="number" title="完成"></mu-step>
</mu-steps>

图标与状态

设置 icon 以图标替代指示器，设置 status 可强制指定步骤状态。

<mu-steps :active="1">
  <mu-step icon="user" title="已提交" description="使用 icon 属性显示图标"></mu-step>
  <mu-step icon="clock" title="审核中" description="当前步骤"></mu-step>
  <mu-step type="number" status="error" title="审核不通过" description="status=error"></mu-step>
  <mu-step title="重新提交"></mu-step>
</mu-steps>

自定义内容

通过 title、description 与默认插槽自定义步骤内容。

<mu-steps :active="1">
  <mu-step>
    <template #title>
      <text class="step-title">自定义标题</text>
    </template>
    <template #description>
      <text class="step-desc">内容区可随意自定义</text>
    </template>
    <view class="step-extra">
      <text class="step-extra-text">附加内容</text>
    </view>
  </mu-step>
  <mu-step title="普通步骤" description="使用 title / description 属性"></mu-step>
  <mu-step title="最后一步"></mu-step>
</mu-steps>

属性

全部属性均可选，未传入时使用默认值；默认值列为 - 表示空字符串。

步骤容器

属性名称	说明	类型	默认值
active	当前激活步骤的索引（从 0 开始）	number	0
direction	排列方向，可选 vertical、horizontal	string	vertical
customClass	自定义类名，附加在步骤条根节点上以覆盖默认样式	string	-
customStyle	自定义行内样式，直接作用于步骤条根节点	any	-

步骤项

属性名称	说明	类型	默认值
title	步骤标题	string	-
description	步骤描述	string	-
icon	步骤图标名称，设置后替代圆点或序号	string	-
type	指示器类型，可选 dot、number	string	dot
status	强制指定步骤状态，可选 process、finish、wait、error，设置后覆盖按 active 计算的结果	string	-
customClass	自定义类名，附加在步骤项根节点上以覆盖默认样式	string	-
customStyle	自定义行内样式，直接作用于步骤项根节点	any	-

插槽

组件支持以下插槽。

名称	说明
default	步骤内容（mu-steps）
title	自定义步骤标题（mu-step）
description	自定义步骤描述（mu-step）
default	步骤内容区自定义内容（mu-step）

注意事项

• 平台差异：App、小程序、Web 表现一致。
• 使用注意：active 是从 0 开始的步骤索引，未设置 status 时步骤状态按索引自动计算。
• 使用注意：mu-step 必须在 mu-steps 内使用，索引按渲染顺序确定，脱离父级时状态与连线均不正确。
• 使用注意：设置 status 会覆盖按 active 计算的状态；指示器优先显示 icon，其次 type="number"，默认 dot。