X-Next

Appearance

Steps 步骤条 ​

用于展示流程步骤、进度节点和当前处理状态，适合表单分步、审批流、发布流程和导航式任务。

何时使用 ​

  • 需要明确展示任务拆分后的阶段和当前进度。
  • 需要让用户按步骤完成流程，或在可点击模式下跳转到某个阶段。
  • 需要在流程中标记完成、等待、处理中或错误状态。

基础用法 ​

填写信息
录入基础资料
确认订单
核对费用和地址
完成提交
等待系统处理
当前步骤：2
vue
<template>
  <x-steps :current="current">
    <x-step title="填写信息" description="录入基础资料" />
    <x-step title="确认订单" description="核对费用和地址" />
    <x-step title="完成提交" description="等待系统处理" />
  </x-steps>
</template>

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

const current = ref(2);
</script>

状态 ​

创建任务
已完成
执行校验
校验失败
发布结果
等待修复后继续
排队
处理中
结束
可单独覆盖 Step 状态
vue
<template>
  <x-steps :current="2" status="error">
    <x-step title="创建任务" description="已完成" />
    <x-step title="执行校验" description="校验失败" />
    <x-step title="发布结果" description="等待修复后继续" />
  </x-steps>

  <x-steps :current="2">
    <x-step title="排队" />
    <x-step title="处理中" />
    <x-step title="结束" status="error" description="可单独覆盖 Step 状态" />
  </x-steps>
</template>

标签位置和垂直方向 ​

提交
表单资料
审核
人工确认
归档
流程结束
创建项目
准备基础配置
配置权限
选择成员和角色
启动项目
生成工作空间
vue
<template>
  <x-steps :current="2" label-placement="vertical">
    <x-step title="提交" description="表单资料" />
    <x-step title="审核" description="人工确认" />
    <x-step title="归档" description="流程结束" />
  </x-steps>

  <x-steps :current="current" direction="vertical">
    <x-step title="创建项目" description="准备基础配置" />
    <x-step title="配置权限" description="选择成员和角色" />
    <x-step title="启动项目" description="生成工作空间" />
  </x-steps>
</template>

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

const current = ref(2);
</script>

小尺寸和无线条 ​

开始
处理中
完成
草稿
本地保存
提交
等待处理
发布
对外可见
vue
<template>
  <x-steps :current="2" small>
    <x-step title="开始" />
    <x-step title="处理中" />
    <x-step title="完成" />
  </x-steps>

  <x-steps :current="2" line-less>
    <x-step title="草稿" description="本地保存" />
    <x-step title="提交" description="等待处理" />
    <x-step title="发布" description="对外可见" />
  </x-steps>
</template>

类型 ​

选择商品
确认清单
支付订单
处理中
发货
等待仓库
启动
初始化
运行
任务执行中
收尾
生成报告
账户
基础信息
权限
角色策略
确认
提交配置
vue
<template>
  <x-steps type="arrow" :current="2">
    <x-step title="选择商品" description="确认清单" />
    <x-step title="支付订单" description="处理中" />
    <x-step title="发货" description="等待仓库" />
  </x-steps>

  <x-steps type="dot" :current="2">
    <x-step title="启动" description="初始化" />
    <x-step title="运行" description="任务执行中" />
    <x-step title="收尾" description="生成报告" />
  </x-steps>

  <x-steps type="navigation" :current="2">
    <x-step title="账户" description="基础信息" />
    <x-step title="权限" description="角色策略" />
    <x-step title="确认" description="提交配置" />
  </x-steps>
</template>

可点击切换 ​

资料
配置
预览
完成
当前步骤：1
vue
<template>
  <x-steps changeable :current="current" @change="handleChange">
    <x-step title="资料" />
    <x-step title="配置" />
    <x-step title="预览" disabled />
    <x-step title="完成" />
  </x-steps>
  <p>当前步骤：{{ current }}</p>
</template>

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

const current = ref(1);
const handleChange = (step: number) => {
  current.value = step;
};
</script>

自定义内容 ​

0
设计
产出交互稿
2
开发
实现页面和接口
验收
确认上线
vue
<template>
  <x-steps :current="2" label-placement="vertical">
    <x-step>
      <template #icon="{ step }">{{ step }}</template>
      <template #default>设计</template>
      <template #description>产出交互稿</template>
    </x-step>
    <x-step>
      <template #node="{ status }">
        <span>{{ status === 'process' ? '中' : '2' }}</span>
      </template>
      <template #default>开发</template>
      <template #description>实现页面和接口</template>
    </x-step>
    <x-step title="验收" description="确认上线" />
  </x-steps>
</template>

交互说明 ​

  • current 按 1 开始计数；受控使用时需要在 change 或 update:current 中同步外部值。
  • Step.status 会覆盖 Steps 根据 current 和 status 自动计算出的状态。
  • type="arrow" 和 type="navigation" 会强制横向展示。
  • type="dot" 会根据方向自动调整标签位置，且不使用 small 尺寸。
  • 只有设置 changeable 后点击步骤才会触发切换；disabled 的步骤不会触发切换。

按需导入 ​

ts
import { Steps, Step } from 'x-next';

Steps Props ​

参数说明类型默认值
type步骤条类型'default' | 'arrow' | 'dot' | 'navigation''default'
direction显示方向'horizontal' | 'vertical''horizontal'
labelPlacement标签描述放置位置'horizontal' | 'vertical''horizontal'
current当前步骤，按 1 开始计数numberundefined
defaultCurrent默认步骤，非受控模式number1
status当前步骤状态'wait' | 'process' | 'finish' | 'error''process'
lineLess是否使用无连接线样式booleanfalse
small是否使用小尺寸，dot 模式不生效booleanfalse
changeable是否可点击切换booleanfalse

Steps Events ​

事件名说明回调参数
update:current当前步骤变化时触发step: number
change当前步骤变化时触发step: number, event: Event

Step Props ​

参数说明类型默认值
title步骤标题string-
description步骤描述string-
status步骤状态，设置后会覆盖 Steps 自动计算'wait' | 'process' | 'finish' | 'error'由 Steps 计算
disabled是否禁用点击booleanfalse

Step Slots ​

插槽名说明参数
default自定义标题内容-
description自定义描述内容-
node自定义节点{ step, status }
icon自定义图标{ step, status }