步骤条

TuiSteps 用于引导用户按照流程完成任务的导航条。 它清晰地展示了当前任务的进度、已完成的步骤以及后续的待办事项。支持丰富的外观定制和状态管理。

基础用法

数据驱动模式 (Data Mode)

这是最简洁的用法。通过 options 属性传入步骤配置数组，无需手动书写 DOM 结构。

<script setup>
import { ref } from 'vue';

const activeStep = ref(0);

const stepsData = [
  { title: '步骤一', description: '完成基本信息填写', icon: 'tui-icon ti-user' },
  { title: '步骤二', description: '上传相关附件材料' },
  { title: '步骤三', description: '等待审核结果' }
];

const next = () => {
  if (activeStep.value++ > 2) activeStep.value = 0;
};
</script>

<template>
  <TuiSteps :active="activeStep" :options="stepsData" />
  <TuiButton @click="next">下一步</TuiButton>
</template>

组件插槽模式 (Slot Mode)

使用 <TuiStep> 子组件进行构建。这种方式提供了更高的灵活性，适合需要对单个步骤进行特殊处理的场景。

<template>
  <TuiSteps :active="1">
    <TuiStep title="已完成" description="此步骤已结束" />
    <TuiStep title="进行中" description="当前正在处理..." />
    <TuiStep title="待处理" icon="tui-icon ti-settings" />
  </TuiSteps>
</template>

垂直布局

设置 direction="vertical" 即可启用垂直步骤条。

注意

在垂直模式下，通常需要给容器或组件设置一个固定的高度，以便内容能够正确撑开。

<template>
  <div style="height: 300px;">
    <TuiSteps direction="vertical" :active="1">
      <TuiStep title="下单" description="2023-12-01 12:00" />
      <TuiStep title="出库" description="2023-12-02 08:00" />
      <TuiStep title="运输" description="运输中..." />
      <TuiStep title="签收" />
    </TuiSteps>
  </div>
</template>

简单模式

设置 simple 为 true 可以开启简洁风格。 简单模式下，标题和图标会水平排列，通常用于空间有限或不需要展示详细描述的场景。

• simple: 开启简单模式。
• simpleWithBG: 是否显示灰色背景条（默认为 true）。

<template>
  <TuiSteps :active="1" simple :options="stepsData" />

  <TuiSteps :active="1" simple :simpleWithBG="false" :options="stepsData" />
</template>

状态管理

TuiSteps 提供了强大的状态控制逻辑：

1. 全局状态控制:
   • processStatus: 当前进行中步骤的状态 (默认 process)。
   • finishStatus: 已完成步骤的状态 (默认 finish，通常表现为成功色)。
2. 单步状态覆盖:
   • 在单个 step 数据中指定 status，可强制覆盖该步骤的状态（如显示 Error 或 Warning）。

<template>
  <TuiSteps :active="1" processStatus="error">
    <TuiStep title="步骤1" />
    <TuiStep title="步骤2 (出错)" description="校验失败" />
    <TuiStep title="步骤3" />
  </TuiSteps>

  <TuiSteps :active="2">
    <TuiStep title="步骤1" />
    <TuiStep title="步骤2" status="warning" description="部分完成" />
    <TuiStep title="步骤3" />
  </TuiSteps>
</template>

API 参考

TuiSteps Props

属性名	类型	默认值	说明
active	Number	0	当前激活步骤的索引（从0开始）。
direction	String	'horizontal'	显示方向。可选：'horizontal', 'vertical'。
options	Array	[]	数据源数组。对象结构见下方 TuiStep Props。
simple	Boolean	false	是否启用简洁模式。
simpleWithBG	Boolean	true	简洁模式下是否显示背景。
processStatus	String	'process'	当前步骤的状态。可选：wait, process, finish, error, success, warning。
finishStatus	String	'finish'	已完成步骤的状态。通常设为 success 或 finish。
descriptionLines	Number	2	描述文本的最大显示行数（超出省略）。

TuiStep Props (或 Options 对象字段)

属性名	类型	默认值	说明
title	String	''	标题。
description	String	''	描述文本。
icon	String	''	图标类名。
status	String	''	强制状态。若设置，将忽略 active 索引计算出的状态。可选：wait, process, finish, error, success, warning。