Steps 步骤条

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

基础用法

1

提交申请

填写基础信息

1

部门审核

主管确认

1

财务复核

预算核对

1

完成

流程结束

<script setup>
import { ref } from 'vue'
import { DanButton, DanSteps, DanStep } from '@dandan-ui/ui'

const active = ref(1)

function next() {
  active.value = Math.min(active.value + 1, 3)
}

function prev() {
  active.value = Math.max(active.value - 1, 0)
}
</script>

<template>
  <div>
    <DanSteps :active="active">
      <DanStep title="提交申请" description="填写基础信息" />
      <DanStep title="部门审核" description="主管确认" />
      <DanStep title="财务复核" description="预算核对" />
      <DanStep title="完成" description="流程结束" />
    </DanSteps>
    <div style="margin-top: 16px; display: flex; gap: 8px">
      <DanButton @click="prev">上一步</DanButton>
      <DanButton type="primary" @click="next">下一步</DanButton>
    </div>
  </div>
</template>

垂直方向

1

创建项目

初始化仓库与脚手架

1

开发组件

按 Sprint 推进导航能力

1

文档验收

Demo 与 API 同步

<script setup>
import { DanSteps, DanStep } from '@dandan-ui/ui'
</script>

<template>
  <DanSteps :active="1" direction="vertical" style="max-width: 320px">
    <DanStep title="创建项目" description="初始化仓库与脚手架" />
    <DanStep title="开发组件" description="按 Sprint 推进导航能力" />
    <DanStep title="文档验收" description="Demo 与 API 同步" />
  </DanSteps>
</template>

Steps Props

属性	说明	类型	默认值
active	当前激活步骤，从 0 开始	number	0
direction	显示方向	'horizontal' | 'vertical'	'horizontal'
processStatus	当前步骤状态	StepStatus	'process'
finishStatus	已完成步骤状态	StepStatus	'finish'
simple	简洁风格	boolean	false

StepStatus：'wait' | 'process' | 'finish' | 'error' | 'success'

Step Props

属性	说明	类型	默认值
title	标题	string	''
description	描述文案	string	''
icon	自定义图标文案	string	''
status	覆盖自动状态	StepStatus	—