Steps 步骤条

引导用户按照流程完成任务的分步导航条，可根据实际应用场景设定步骤。

基础用法

简单的步骤条。

步骤 1

这是一段描述信息

2

步骤 2

这是一段描述信息

3

步骤 3

这是一段描述信息

<template>
  <ZcSteps :current="current" @change="current = $event">
    <ZcStep title="步骤 1" description="这是一段描述信息" />
    <ZcStep title="步骤 2" description="这是一段描述信息" />
    <ZcStep title="步骤 3" description="这是一段描述信息" />
  </ZcSteps>
  <ZcButton style="margin-top: 16px;" @click="current = Math.max(0, current - 1)">上一步</ZcButton>
  <ZcButton style="margin-top: 16px;" type="primary" @click="current = Math.min(2, current + 1)"
    >下一步</ZcButton
  >
</template>
<script setup>
import { ref } from 'vue'
const current = ref(1)
</script>

竖式步骤条

设置 direction 属性为 vertical 展示竖式步骤条。

步骤 1

这是一段描述信息

2

步骤 2

这是一段描述信息

3

步骤 3

这是一段描述信息

<template>
  <ZcSteps direction="vertical" :current="1">
    <ZcStep title="步骤 1" description="这是一段描述信息" />
    <ZcStep title="步骤 2" description="这是一段描述信息" />
    <ZcStep title="步骤 3" description="这是一段描述信息" />
  </ZcSteps>
</template>

带图标的步骤条

通过 icon 属性设置步骤图标。

登录

验证

完成

<template>
  <ZcSteps :current="1">
    <ZcStep title="登录" icon="user" />
    <ZcStep title="验证" icon="lock" />
    <ZcStep title="完成" icon="check" />
  </ZcSteps>
</template>

Steps API

ZcSteps Props

参数	说明	类型	默认值
current	当前激活步骤	number	0
direction	显示方向	'horizontal' | 'vertical'	'horizontal'
type	类型	'default' | 'simple'	'default'
error	当前步骤是否为错误状态	boolean	false
space	每个 step 的间距	number | string	''

ZcSteps Slots

插槽名	说明
default	放置 ZcStep 组件

ZcStep Props

参数	说明	类型	默认值
title	标题	string	''
description	描述	string	''
icon	图标	string	''
status	步骤状态	'wait' | 'process' | 'finish' | 'error' | 'success'	自动推断