ProSteps 步骤条

ProSteps 步骤条 的基础用法、公开 API 与示例。

基础示例

示例使用本地演示数据；上传、校验和提交不会连接业务后端。

<script setup lang="ts">
import { ref } from "vue";
import { ProSteps } from "@/components/pro/pro-steps";

const demoProps: InstanceType<typeof ProSteps>["$props"] = {
  type: "basic",
  data: [
    { title: "提交", status: "success" },
    { title: "审核", status: "active" },
    { title: "完成", status: "wait" },
  ],
};
</script>

<template>
  <ClientOnly>
    <div class="demo-surface">
      <ProSteps v-bind="demoProps"></ProSteps>
    </div>
  </ClientOnly>
</template>

隐藏源代码

引入方式

import { ProSteps } from "@/components/pro/pro-steps";

Props

参数	说明	类型	默认值	必填
type	步骤展示类型	| "basic"<br> | "align-top"<br> | "custom-icon"<br> | "column"<br> | "dotted-row"<br> | "dotted-column"	-	是
data	步骤数据	Step[]	[]	否

Events

事件名	说明	回调参数
-	该组件未声明 Events。	-

Slots

插槽名	说明	参数
-	该组件未声明 Slots。	-

Expose

名称	说明	类型
-	该组件未声明 Expose。	-

Module API

名称	说明	类型
ProSteps	导出 ProSteps 供业务侧复用。	useInstall(index)

Types

StepsProps

ProSteps 组件 Props。

字段	说明	类型	默认值	必填
type	步骤展示类型	| "basic"<br> | "align-top"<br> | "custom-icon"<br> | "column"<br> | "dotted-row"<br> | "dotted-column"	-	是
data	步骤数据	Step[]	-	否

Step

步骤项配置。

字段	说明	类型	默认值	必填
title	步骤标题	string	-	是
status	步骤状态	"success" | "active" | "wait" | "error"	-	是
description	步骤描述	string	-	否
icon	自定义图标组件名	string	-	否
isSubStep	是否为子步骤	boolean	-	否
nodeIndex	业务节点索引	number | string	-	否

API 根据当前组件源码生成；同步版本与验证记录见维护说明。