FxSteps 步骤条

引导用户按照流程完成任务的分步导航条。自实现、不依赖任何 UI 框架。

FxSteps 属于 @fx/components（UI 框架无关的通用组件），配合 FxStep 使用。

基础用法

通过 active 属性设置当前激活步骤。

<template>
  <div class="demo-steps">
    <FxSteps :active="active" finish-status="success">
      <FxStep title="步骤 1" />
      <FxStep title="步骤 2" />
      <FxStep title="步骤 3" />
    </FxSteps>
    <FxBtn style="margin-top: 24px" @click="next">下一步</FxBtn>
  </div>
</template>

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

const active = ref(0)

function next() {
  if (active.value++ > 2) active.value = 0
}
</script>

含状态的步骤条

通过 space 属性设置步骤间距，finish-status 设置已完成步骤的状态。

<template>
  <div class="demo-steps">
    <FxSteps :space="200" :active="1" finish-status="success">
      <FxStep title="已完成" />
      <FxStep title="进行中" />
      <FxStep title="步骤 3" />
    </FxSteps>
  </div>
</template>

<script setup lang="ts">
</script>

居中对齐

通过 align-center 属性使标题和描述居中显示。

<template>
  <div class="demo-steps">
    <FxSteps :active="2" align-center>
      <FxStep title="步骤 1" description="这是一段描述" />
      <FxStep title="步骤 2" description="这是一段描述" />
      <FxStep title="步骤 3" description="这是一段描述" />
    </FxSteps>
  </div>
</template>

<script setup lang="ts">
</script>

带描述的步骤条

每个步骤通过 description 属性添加描述信息。

<template>
  <div class="demo-steps">
    <FxSteps :active="1">
      <FxStep title="步骤 1" description="这是一段很长的描述文字" />
      <FxStep title="步骤 2" description="这是一段很长的描述文字" />
      <FxStep title="步骤 3" description="这是一段很长的描述文字" />
    </FxSteps>
  </div>
</template>

<script setup lang="ts">
</script>

带图标的步骤条

通过 icon 属性自定义步骤图标，支持 IconString 和 Vue Component。

<template>
  <div class="demo-steps">
    <FxSteps :active="1">
      <FxStep title="步骤 1" icon="ep:edit" />
      <FxStep title="步骤 2" icon="ep:upload" />
      <FxStep title="步骤 3" icon="ep:picture" />
    </FxSteps>
  </div>
</template>

<script setup lang="ts">
</script>

垂直步骤条

通过 direction="vertical" 切换为纵向布局，外层容器需有显式高度。

<template>
  <div class="demo-steps" style="height: 300px">
    <FxSteps direction="vertical" :active="1">
      <FxStep title="步骤 1" />
      <FxStep title="步骤 2" />
      <FxStep title="步骤 3" />
    </FxSteps>
  </div>
</template>

<script setup lang="ts">
</script>

简洁模式

通过 simple 属性启用简洁主题。简洁模式下 align-center、description、direction、space 将被忽略。

<template>
  <div class="demo-steps">
    <FxSteps :active="1" simple style="margin-bottom: 20px">
      <FxStep title="步骤 1" icon="ep:edit" />
      <FxStep title="步骤 2" icon="ep:upload-filled" />
      <FxStep title="步骤 3" icon="ep:picture" />
    </FxSteps>

    <FxSteps :active="1" finish-status="success" simple>
      <FxStep title="步骤 1" />
      <FxStep title="步骤 2" />
      <FxStep title="步骤 3" />
    </FxSteps>
  </div>
</template>

<script setup lang="ts">
</script>

Steps API

Steps Attributes

属性	说明	类型	默认值
space	每个步骤的间距，省略时响应式自适应。支持百分比值	number | string	''
active	当前激活步骤的索引（从 0 开始）	number	0
direction	显示方向	'horizontal' | 'vertical'	'horizontal'
align-center	标题和描述是否居中	boolean	—
simple	是否使用简洁主题	boolean	—
finish-status	已完成步骤的状态	'wait' | 'process' | 'finish' | 'error' | 'success'	'finish'
process-status	当前步骤的状态	'wait' | 'process' | 'finish' | 'error' | 'success'	'process'

Steps Events

名称	说明	类型
change	激活步骤变化时触发	(newVal: number, oldVal: number) => void

Steps Slots

名称	说明	子标签
default	步骤条内容	Step

Steps Exposes

名称	说明	类型
steps	步骤列表	Ref<StepItemState[]>

Step API

Step Attributes

属性	说明	类型	默认值
title	步骤标题	string	''
description	步骤描述	string	''
icon	自定义图标（IconString 或 Vue Component）	string | Component	—
status	当前状态。若不配置，由 Steps 自动设置	'' | 'wait' | 'process' | 'finish' | 'error' | 'success'	''

Step Slots

名称	说明
icon	自定义图标
title	步骤标题
description	步骤描述

局部引入

import { FxSteps, FxStep } from "@fx/components"