Steps 步骤条

引导用户按流程完成任务的导航条。

基础用法

通过 active 设置当前激活步骤，从 0 开始。

✓

步骤 1

这是一段描述

✓

步骤 2

这是一段描述

✓

步骤 3

这是一段描述

<template>
  <x-steps :active="active">
    <x-step title="步骤 1" description="这是一段描述" />
    <x-step title="步骤 2" description="这是一段描述" />
    <x-step title="步骤 3" description="这是一段描述" />
  </x-steps>
</template>

<script setup>
import { ref } from 'vue'
const active = ref(0)
</script>

不同状态

使用 status 设置步骤状态。

✓

已完成

✓

进行中

0

待处理

✕

错误

<template>
  <x-steps :active="1">
    <x-step title="已完成" status="success" />
    <x-step title="进行中" />
    <x-step title="待处理" status="wait" />
    <x-step title="错误" status="error" />
  </x-steps>
</template>

垂直方向

设置 direction="vertical" 显示垂直步骤条。

✓

步骤 1

这是一段描述文字

✓

步骤 2

这是一段描述文字

✓

步骤 3

这是一段描述文字

<template>
  <x-steps :active="active" direction="vertical">
    <x-step title="步骤 1" description="这是一段描述文字" />
    <x-step title="步骤 2" description="这是一段描述文字" />
    <x-step title="步骤 3" description="这是一段描述文字" />
  </x-steps>
</template>

简洁风格

设置 simple 使用简洁风格。

✓

步骤 1

✓

步骤 2

✓

步骤 3

<template>
  <x-steps :active="active" simple>
    <x-step title="步骤 1" />
    <x-step title="步骤 2" />
    <x-step title="步骤 3" />
  </x-steps>
</template>

可点击切换

点击步骤切换当前状态。

✓

步骤 1

点击切换

✓

步骤 2

点击切换

✓

步骤 3

点击切换

<template>
  <x-steps v-model:active="active">
    <x-step title="步骤 1" description="点击切换" />
    <x-step title="步骤 2" description="点击切换" />
    <x-step title="步骤 3" description="点击切换" />
  </x-steps>
</template>

API

Steps Props

属性	说明	类型	默认值
active / v-model:active	当前激活步骤	number	0
direction	显示方向	'horizontal' | 'vertical'	'horizontal'
simple	是否简洁风格	boolean	false
finishStatus	结束步骤的状态	'wait' | 'process' | 'finish' | 'error' | 'success'	'finish'
processStatus	当前步骤的状态	'wait' | 'process' | 'finish' | 'error' | 'success'	'process'
alignCenter	居中对齐	boolean	false
space	每个 step 间距	string | number	—

Steps Events

事件名	说明	回调参数
change	步骤切换时触发	(active: number)

Step Props

属性	说明	类型	默认值
title	标题	string	—
description	描述	string	—
icon	图标	string	—
status	状态	'wait' | 'process' | 'finish' | 'error' | 'success'	—

Step Slots

插槽名	说明
title	自定义标题
description	自定义描述