Steps 步骤条

引导用户按照流程完成任务的导航条，支持水平、垂直、点状和导航四种样式。

基础用法

填写信息

填写基本用户信息

2

验证身份

手机号或邮箱验证

3

完成注册

注册成功

水平步骤条，点击按钮切换当前步骤

vue

<script setup lang="ts">
import { ref } from "vue";
import { ASteps, AButton } from "@lite-code/aui-vue";

const current = ref(1);

const items = [
  { title: "填写信息", description: "填写基本用户信息" },
  { title: "验证身份", description: "手机号或邮箱验证" },
  { title: "完成注册", description: "注册成功" },
];
</script>

<template>
  <div style="display: flex; flex-direction: column; gap: 16px">
    <ASteps :items="items" :current="current" />
    <div style="display: flex; gap: 8px; margin-top: 4px">
      <AButton @click="current = Math.max(0, current - 1)">上一步</AButton>
      <AButton @click="current = Math.min(items.length - 1, current + 1)">
        下一步
      </AButton>
    </div>
  </div>
</template>

步骤类型

步骤一

步骤二

步骤三

步骤四

步骤一

2

步骤二

3

步骤三

4

步骤四

dot 小圆点样式，navigation 导航条样式

vue

<script setup lang="ts">
import { ASteps } from '@lite-code/aui-vue'

const items = [
  { title: '步骤一' },
  { title: '步骤二' },
  { title: '步骤三' },
  { title: '步骤四' },
]
</script>

<template>
  <div style="display: flex; flex-direction: column; gap: 24px;">
    <ASteps :items="items" :current="1" type="dot" />
    <ASteps :items="items" :current="1" type="navigation" />
  </div>
</template>

垂直方向

已完成

2

进行中

出错了

4

等待中

direction='vertical' 垂直排列，支持单项 status 覆盖

vue

<script setup lang="ts">
import { ASteps } from '@lite-code/aui-vue'

const items = [
  { title: '已完成' },
  { title: '进行中' },
  { title: '出错了', status: 'error' as const },
  { title: '等待中' },
]
</script>

<template>
  <ASteps :items="items" :current="1" direction="vertical" />
</template>

API

Props

属性	类型	默认值	说明
current	number	0	当前步骤索引
items	StepItem[]	—	步骤数据（必填）
direction	StepsDirection	'horizontal'	方向：horizontal | vertical
type	StepsType	'default'	样式：default | dot | navigation
size	StepsSize	'md'	尺寸：sm | md
status	StepStatus	'process'	当前步骤的状态
onChange	(index) => void	—	点击步骤回调
className	string	—	自定义 class
style	object	—	自定义样式

StepItem

字段	类型	说明
title	string	步骤标题（必填）
description	string	步骤描述
status	StepStatus	单独覆盖此步骤状态
disabled	boolean	禁用点击

类型

type StepStatus = "wait" | "process" | "finish" | "error";
type StepsDirection = "horizontal" | "vertical";
type StepsType = "default" | "dot" | "navigation";
type StepsSize = "sm" | "md";