@daflow-ui/ui-steps

@daflow-ui/ui-steps

Steps 步骤条组件，用于引导用户按照流程完成任务。

特性

• 🎯 基于 Ark UI 封装，稳定可靠
• 📦 自动索引，无需手动管理步骤顺序
• 🎨 支持水平和垂直两种布局
• 🔄 支持动态增删步骤（v-if、v-for）
• ♿️ 完整的无障碍支持
• 🎭 灵活的插槽系统，支持自定义图标、标题、描述

Installation

pnpm add @daflow-ui/ui-steps

Usage

全局引入样式（在 main.ts 中）：

import '@daflow-ui/ui-steps/style.css'

基础用法：

<script setup lang="ts">
import { ref } from 'vue'
import { DfSteps, DfStep } from '@daflow-ui/ui-steps'

const current = ref(0)

const handleNext = () => {
  if (current.value < 2) current.value++
}

const handlePrev = () => {
  if (current.value > 0) current.value--
}
</script>

<template>
  <DfSteps :current="current">
    <DfStep title="步骤 1" description="填写信息" />
    <DfStep title="步骤 2" description="确认信息" />
    <DfStep title="步骤 3" description="完成" />
  </DfSteps>

  <button @click="handlePrev">上一步</button>
  <button @click="handleNext">下一步</button>
</template>

带内容区域（内容由业务自行渲染）：

<DfSteps :current="current">
  <DfStep title="填写信息" description="填写基本信息" />
  <DfStep title="确认信息" description="核对并确认" />
  <DfStep title="完成" description="提交成功" />
</DfSteps>

<div v-if="current === 0">
  <form><!-- 表单内容 --></form>
  <button @click="current++">下一步</button>
</div>
<div v-else-if="current === 1">
  <p>请确认信息...</p>
  <button @click="current--">上一步</button>
  <button @click="current++">提交</button>
</div>
<div v-else>
  <p>✅ 提交成功！</p>
</div>

说明：DfStep 仅负责渲染步骤条，不提供默认插槽；内容区域请在 DfSteps 外部自行渲染并用 current 控制显示。

v-for 渲染步骤：

<script setup lang="ts">
import { ref } from 'vue'

const current = ref(0)
const steps = [
  { key: 'draft', title: '草稿', description: '填写基本信息' },
  { key: 'review', title: '审核', description: '确认内容与信息' },
  { key: 'publish', title: '发布', description: '完成发布流程' }
]
</script>

<template>
  <DfSteps :current="current">
    <DfStep
      v-for="step in steps"
      :key="step.key"
      :title="step.title"
      :description="step.description"
    />
  </DfSteps>
</template>

API

DfSteps Props

属性	说明	类型	默认值
current	当前激活步骤的索引（从 0 开始）	number	0
direction	步骤条方向	'horizontal' | 'vertical'	'horizontal'
titlePlacement	标题和指示器的布局关系	'horizontal' | 'vertical'	'horizontal'

DfStep Props

属性	说明	类型	默认值
title	步骤标题	string	''
description	步骤描述	string	''

DfStep Slots

插槽名	说明	作用域参数
icon	自定义图标	{ index: number, status: string }
title	自定义标题	{ title: string, index: number }
description	自定义描述	{ description: string, index: number }

Development

Install dependencies

pnpm install

Start playground (at monorepo root)

cd ../..  # 回到 monorepo 根目录
pnpm dev  # 启动统一 playground，自动发现组件

组件会自动出现在 playground 导航中（通过 dev/index.vue）。

Build

pnpm build

Type check

pnpm typecheck

Lint

pnpm lint
pnpm lint:fix

License

MIT