步骤条 AsamSteps

使用场景

展示一个流程当前处于哪一步。

基础用法与状态

下列示例只使用本入口的实际公开能力。

基础用法与状态

vue

<template>
	<div class="demo-root-layout">
		<AsamSteps :active="active" finish-status="success">
			<AsamStep title="准备" description="检查本地内容" />
			<AsamStep title="编辑" description="完成本地修改" />
			<AsamStep title="完成" description="查看结果" />
		</AsamSteps>
		<AsamButton type="default" native-type="button" @click="active = (active + 1) % 4"
			>下一状态</AsamButton
		>
	</div>
</template>

<script lang="ts" setup>
defineOptions({ name: 'AsamStepsBasicDemo' });
import { ref } from 'vue';
import { AsamButton, AsamSteps, AsamStep } from '@asam-ui/ui';
const active = ref(0);
</script>

<style scoped>
.demo-root-layout {
	display: flex;
	gap: var(--asam-space-md);
	flex-wrap: wrap;
	align-items: center;
}
.demo-root-layout > :is(p, pre, output) {
	margin-block: 0;
}
</style>

vue

<template>
	<div class="demo-root-layout">
		<AsamSteps :active="active" finish-status="success">
			<AsamStep title="准备" description="检查本地内容" />
			<AsamStep title="编辑" description="完成本地修改" />
			<AsamStep title="完成" description="查看结果" />
		</AsamSteps>
		<AsamButton type="default" native-type="button" @click="active = (active + 1) % 4"
			>下一状态</AsamButton
		>
	</div>
</template>

<script setup>
defineOptions({ name: 'AsamStepsBasicDemo' });
import { ref } from 'vue';
import { AsamButton, AsamSteps, AsamStep } from '@asam-ui/ui';
const active = ref(0);
</script>

<style scoped>
.demo-root-layout {
	display: flex;
	gap: var(--asam-space-md);
	flex-wrap: wrap;
	align-items: center;
}
.demo-root-layout > :is(p, pre, output) {
	margin-block: 0;
}
</style>

使用约定

active 表示当前步骤索引，direction、space、alignCenter、simple、processStatus/finishStatus 控制呈现。default 插槽放 Step；它展示流程状态，推进、校验和请求由宿主处理。

完整使用场景

基础用法

简洁风格的步骤条

设置 active 属性，接受一个 Number，表明步骤的 index，从 0 开始。需要定宽的步骤条时，设置 space 属性即可，它接受 Number，单位为 px，如果不设置，则为自适应。设置 finish-status 属性可以改变已经完成的步骤的状态。

基础用法

许可

vue

<template>
	<AsamSteps style="max-width: 600px" :active="active" finish-status="success">
		<AsamStep title="步骤 1" />
		<AsamStep title="步骤 2" />
		<AsamStep title="步骤 3" />
	</AsamSteps>

	<AsamButton type="default" style="margin-top: 12px" @click="next">下一步</AsamButton>
</template>

<script lang="ts" setup>
defineOptions({ name: 'AsamStepsCapBasicDemo' });
import { AsamSteps, AsamStep, AsamButton } from '@asam-ui/ui';

import { ref } from 'vue';

const active = ref(0);

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

许可

vue

<template>
	<AsamSteps style="max-width: 600px" :active="active" finish-status="success">
		<AsamStep title="步骤 1" />
		<AsamStep title="步骤 2" />
		<AsamStep title="步骤 3" />
	</AsamSteps>

	<AsamButton type="default" style="margin-top: 12px" @click="next">下一步</AsamButton>
</template>

<script setup>
defineOptions({ name: 'AsamStepsCapBasicDemo' });
import { AsamSteps, AsamStep, AsamButton } from '@asam-ui/ui';
import { ref } from 'vue';
const active = ref(0);
const next = () => {
	if (active.value++ > 2) active.value = 0;
};
</script>

含状态的步骤条

每一步骤显示出该步骤的状态。

也可以使用 title 具名插槽，可以用 slot 的方式来取代属性的设置，在本文档最后的列表中有所有的插槽可供参考。

含状态的步骤条

许可

vue

<template>
	<AsamSteps style="max-width: 600px" :space="200" :active="1" finish-status="success">
		<AsamStep title="完成" />
		<AsamStep title="处理中" />
		<AsamStep title="步骤 3" />
	</AsamSteps>
</template>

<script lang="ts" setup>
defineOptions({ name: 'AsamStepsCapWithStatusDemo' });
import { AsamSteps, AsamStep } from '@asam-ui/ui';
</script>

许可

vue

<template>
	<AsamSteps style="max-width: 600px" :space="200" :active="1" finish-status="success">
		<AsamStep title="完成" />
		<AsamStep title="处理中" />
		<AsamStep title="步骤 3" />
	</AsamSteps>
</template>

<script setup>
defineOptions({ name: 'AsamStepsCapWithStatusDemo' });
import { AsamSteps, AsamStep } from '@asam-ui/ui';
</script>

居中的步骤条

标题和描述可以居中。

居中的步骤条

许可

vue

<template>
	<AsamSteps style="max-width: 600px" :active="2" align-center>
		<AsamStep title="步骤 1" description="示例说明" />
		<AsamStep title="步骤 2" description="示例说明" />
		<AsamStep title="步骤 3" description="示例说明" />
	</AsamSteps>
</template>

<script lang="ts" setup>
defineOptions({ name: 'AsamStepsCapCenteredDemo' });
import { AsamSteps, AsamStep } from '@asam-ui/ui';
</script>

许可

vue

<template>
	<AsamSteps style="max-width: 600px" :active="2" align-center>
		<AsamStep title="步骤 1" description="示例说明" />
		<AsamStep title="步骤 2" description="示例说明" />
		<AsamStep title="步骤 3" description="示例说明" />
	</AsamSteps>
</template>

<script setup>
defineOptions({ name: 'AsamStepsCapCenteredDemo' });
import { AsamSteps, AsamStep } from '@asam-ui/ui';
</script>

带描述的步骤栏

每一步都有描述。

文字描述

许可

vue

<template>
	<AsamSteps style="max-width: 600px" :active="1">
		<AsamStep title="步骤 1" description="示例说明" />
		<AsamStep title="步骤 2" description="示例说明" />
		<AsamStep title="步骤 3" description="示例说明" />
	</AsamSteps>
</template>

<script lang="ts" setup>
defineOptions({ name: 'AsamStepsCapWithDescriptionDemo' });
import { AsamSteps, AsamStep } from '@asam-ui/ui';
</script>

许可

vue

<template>
	<AsamSteps style="max-width: 600px" :active="1">
		<AsamStep title="步骤 1" description="示例说明" />
		<AsamStep title="步骤 2" description="示例说明" />
		<AsamStep title="步骤 3" description="示例说明" />
	</AsamSteps>
</template>

<script setup>
defineOptions({ name: 'AsamStepsCapWithDescriptionDemo' });
import { AsamSteps, AsamStep } from '@asam-ui/ui';
</script>

带图标的步骤条

可以在步骤栏中使用各种自定义图标。

通过 icon 属性来设置图标，图标的类型可以参考 Icon 组件的文档，除此以外，还能通过具名 slot 来使用自定义的图标。

使用图标

许可

vue

<!-- 此演示还使用 @asam-ui/icons-vue，请按官网对应指南配置这些公开依赖。 -->
<template>
	<AsamSteps style="max-width: 600px" :active="1">
		<AsamStep title="步骤 1" :icon="Edit" />
		<AsamStep title="步骤 2" :icon="Upload" />
		<AsamStep title="步骤 3" :icon="Picture" />
	</AsamSteps>
</template>

<script lang="ts" setup>
defineOptions({ name: 'AsamStepsCapWithIconDemo' });
import { AsamSteps, AsamStep } from '@asam-ui/ui';

import { Edit, Picture, Upload } from '@asam-ui/icons-vue';
</script>

许可

vue

<!-- 此演示还使用 @asam-ui/icons-vue，请按官网对应指南配置这些公开依赖。 -->
<template>
	<AsamSteps style="max-width: 600px" :active="1">
		<AsamStep title="步骤 1" :icon="Edit" />
		<AsamStep title="步骤 2" :icon="Upload" />
		<AsamStep title="步骤 3" :icon="Picture" />
	</AsamSteps>
</template>

<script setup>
defineOptions({ name: 'AsamStepsCapWithIconDemo' });
import { AsamSteps, AsamStep } from '@asam-ui/ui';
import { Edit, Picture, Upload } from '@asam-ui/icons-vue';
</script>

垂直的步骤条

垂直方向的步骤条。

只需要在 el-steps 元素中设置 direction 属性为 vertical 即可。

垂直布局

许可

vue

<template>
	<div style="height: 300px; max-width: 600px">
		<AsamSteps direction="vertical" :active="1">
			<AsamStep title="步骤 1" />
			<AsamStep title="步骤 2" />
			<AsamStep title="步骤 3" />
		</AsamSteps>
	</div>
</template>

<script lang="ts" setup>
defineOptions({ name: 'AsamStepsCapVerticalDemo' });
import { AsamSteps, AsamStep } from '@asam-ui/ui';
</script>

许可

vue

<template>
	<div style="height: 300px; max-width: 600px">
		<AsamSteps direction="vertical" :active="1">
			<AsamStep title="步骤 1" />
			<AsamStep title="步骤 2" />
			<AsamStep title="步骤 3" />
		</AsamSteps>
	</div>
</template>

<script setup>
defineOptions({ name: 'AsamStepsCapVerticalDemo' });
import { AsamSteps, AsamStep } from '@asam-ui/ui';
</script>

简洁风格的步骤条

设置 simple 可应用简洁风格，该条件下 align-center / description / direction / space 都将失效。

简洁风格的步骤条

许可

vue

<!-- 此演示还使用 @asam-ui/icons-vue，请按官网对应指南配置这些公开依赖。 -->
<template>
	<AsamSteps class="mb-4" style="max-width: 600px" :space="200" :active="1" simple>
		<AsamStep title="步骤 1" :icon="Edit" />
		<AsamStep title="步骤 2" :icon="UploadFilled" />
		<AsamStep title="步骤 3" :icon="Picture" />
	</AsamSteps>

	<AsamSteps style="max-width: 600px" :active="1" finish-status="success" simple>
		<AsamStep title="步骤 1" />
		<AsamStep title="步骤 2" />
		<AsamStep title="步骤 3" />
	</AsamSteps>
</template>

<script lang="ts" setup>
defineOptions({ name: 'AsamStepsCapSimpleDemo' });
import { AsamSteps, AsamStep } from '@asam-ui/ui';

import { Edit, Picture, UploadFilled } from '@asam-ui/icons-vue';
</script>

<style scoped>
/* Local styles keep this sample runnable without a website utility-CSS preset. */
.mb-4 {
	margin-bottom: 1rem;
}
</style>

许可

vue

<!-- 此演示还使用 @asam-ui/icons-vue，请按官网对应指南配置这些公开依赖。 -->
<template>
	<AsamSteps class="mb-4" style="max-width: 600px" :space="200" :active="1" simple>
		<AsamStep title="步骤 1" :icon="Edit" />
		<AsamStep title="步骤 2" :icon="UploadFilled" />
		<AsamStep title="步骤 3" :icon="Picture" />
	</AsamSteps>

	<AsamSteps style="max-width: 600px" :active="1" finish-status="success" simple>
		<AsamStep title="步骤 1" />
		<AsamStep title="步骤 2" />
		<AsamStep title="步骤 3" />
	</AsamSteps>
</template>

<script setup>
defineOptions({ name: 'AsamStepsCapSimpleDemo' });
import { AsamSteps, AsamStep } from '@asam-ui/ui';
import { Edit, Picture, UploadFilled } from '@asam-ui/icons-vue';
</script>

<style scoped>
/* Local styles keep this sample runnable without a website utility-CSS preset. */
.mb-4 {
	margin-bottom: 1rem;
}
</style>

API

属性 `AsamStepsProps`

属性名	说明	类型	默认值
`space`	每个 step 的间距，不填写将自适应间距。支持百分比。	`string \| number \| undefined`	`''`
`active`	设置当前激活步骤	`number \| undefined`	`0`
`direction`	显示方向	`enum"horizontal" \| "vertical"`完整类型：`"horizontal" \| "vertical" \| undefined`	`'horizontal'`
`alignCenter`	进行居中对齐	`boolean \| undefined`	`false`
`simple`	是否应用简洁风格	`boolean \| undefined`	`false`
`finishStatus`	设置结束步骤的状态	`enum"finish" \| "success" \| "error" \| "wait" \| "process"`完整类型：`AsamStepsStatus \| undefined`	`'finish'`
`processStatus`	设置当前步骤的状态	`enum"finish" \| "success" \| "error" \| "wait" \| "process"`完整类型：`AsamStepsStatus \| undefined`	`'process'`
`onChange`	—	`((newVal: number, oldVal: number) => any) \| undefined`	—
`key`	—	`PropertyKey \| undefined`	—
`ref`	—	`VNodeRef \| undefined`	—
`ref_for`	—	`boolean \| undefined`	—
`ref_key`	—	`string \| undefined`	—
`onVnodeBeforeMount`	—	`(AsamStepsProps)["onVnodeBeforeMount"]`	—
`onVnodeMounted`	—	`(AsamStepsProps)["onVnodeMounted"]`	—
`onVnodeBeforeUpdate`	—	`(AsamStepsProps)["onVnodeBeforeUpdate"]`	—
`onVnodeUpdated`	—	`(AsamStepsProps)["onVnodeUpdated"]`	—
`onVnodeBeforeUnmount`	—	`(AsamStepsProps)["onVnodeBeforeUnmount"]`	—
`onVnodeUnmounted`	—	`(AsamStepsProps)["onVnodeUnmounted"]`	—
`class`	—	`unknown`	—
`style`	—	`unknown`	—

实例方法与状态 `AsamStepsExpose`

属性名	说明	类型	默认值
`$`	—	`AsamStepsExpose["$"]`	—
`$data`	—	`AsamTableColumnExpose`	—
`$props`	—	`AsamStepsProps`	—
`$attrs`	—	`AsamStepsExpose["$attrs"]`	—
`$refs`	—	`AsamStepsExpose["$refs"]`	—
`$slots`	—	`AsamStepsSlots`	—
`$root`	—	查看完整类型 `ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string, {}, {}, {}, string, ComponentProvideOptions>, {}, {}, "", {}, any> \| null`	—
`$parent`	—	查看完整类型 `ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string, {}, {}, {}, string, ComponentProvideOptions>, {}, {}, "", {}, any> \| null`	—
`$host`	—	`Element \| null`	—
`$emit`	—	`(event: "change", newVal: number, oldVal: number) => void`	—
`$el`	—	`any`	—
`$options`	—	`(AsamStepsExpose)["$options"]`	—
`$forceUpdate`	—	`() => void`	—
`$nextTick`	—	`(AsamStepsExpose)["$nextTick"]`	—
`$watch`	—	`(AsamStepsExpose)["$watch"]`	—
`direction`	—	`enum"horizontal" \| "vertical"`完整类型：`"horizontal" \| "vertical"`	—
`space`	—	`string \| number`	—
`active`	—	`number`	—
`finishStatus`	—	`enum"finish" \| "success" \| "error" \| "wait" \| "process"`完整类型：`AsamStepsStatus`	—
`processStatus`	—	`enum"finish" \| "success" \| "error" \| "wait" \| "process"`完整类型：`AsamStepsStatus`	—
`onChange`	—	`((newVal: number, oldVal: number) => any) \| undefined`	—
`alignCenter`	进行居中对齐	`boolean \| undefined`	—
`simple`	是否应用简洁风格	`boolean \| undefined`	—
`$route`	当前规范化路由位置，详见 RouteLocationNormalizedLoaded。	`AsamStepsExpose["$route"]`	—
`$router`	应用使用的 Router 实例。	`AsamStepsExpose["$router"]`	—

类型 `AsamStepsInstance`

属性名	说明	类型	默认值
`$`	—	`AsamStepsExpose["$"]`	—
`$data`	—	`AsamTableColumnExpose`	—
`$props`	—	`AsamStepsProps`	—
`$attrs`	—	`AsamStepsExpose["$attrs"]`	—
`$refs`	—	`AsamStepsExpose["$refs"]`	—
`$slots`	—	`AsamStepsSlots`	—
`$root`	—	查看完整类型 `ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string, {}, {}, {}, string, ComponentProvideOptions>, {}, {}, "", {}, any> \| null`	—
`$parent`	—	查看完整类型 `ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string, {}, {}, {}, string, ComponentProvideOptions>, {}, {}, "", {}, any> \| null`	—
`$host`	—	`Element \| null`	—
`$emit`	—	`(event: "change", newVal: number, oldVal: number) => void`	—
`$el`	—	`any`	—
`$options`	—	`(AsamStepsInstance)["$options"]`	—
`$forceUpdate`	—	`() => void`	—
`$nextTick`	—	`(AsamStepsInstance)["$nextTick"]`	—
`$watch`	—	`(AsamStepsInstance)["$watch"]`	—
`direction`	—	`enum"horizontal" \| "vertical"`完整类型：`"horizontal" \| "vertical"`	—
`space`	—	`string \| number`	—
`active`	—	`number`	—
`finishStatus`	—	`enum"finish" \| "success" \| "error" \| "wait" \| "process"`完整类型：`AsamStepsStatus`	—
`processStatus`	—	`enum"finish" \| "success" \| "error" \| "wait" \| "process"`完整类型：`AsamStepsStatus`	—
`onChange`	—	`((newVal: number, oldVal: number) => any) \| undefined`	—
`alignCenter`	进行居中对齐	`boolean \| undefined`	—
`simple`	是否应用简洁风格	`boolean \| undefined`	—
`$route`	当前规范化路由位置，详见 RouteLocationNormalizedLoaded。	`AsamStepsExpose["$route"]`	—
`$router`	应用使用的 Router 实例。	`AsamStepsExpose["$router"]`	—

插槽 `AsamStepsSlots`

属性名	说明	类型	默认值
`default`	—	`(AsamStepsSlots)["default"]`	—

类型 `AsamStepsStepInstance`

属性名	说明	类型	默认值
`$`	—	`AsamStepsExpose["$"]`	—
`$data`	—	`AsamTableColumnExpose`	—
`$props`	—	`AsamStepProps`	—
`$attrs`	—	`AsamStepsExpose["$attrs"]`	—
`$refs`	—	`AsamStepsExpose["$refs"]`	—
`$slots`	—	`AsamStepSlots`	—
`$root`	—	查看完整类型 `ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string, {}, {}, {}, string, ComponentProvideOptions>, {}, {}, "", {}, any> \| null`	—
`$parent`	—	查看完整类型 `ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string, {}, {}, {}, string, ComponentProvideOptions>, {}, {}, "", {}, any> \| null`	—
`$host`	—	`Element \| null`	—
`$emit`	—	`(event: string, ...args: any[]) => void`	—
`$el`	—	`any`	—
`$options`	—	`(AsamStepsStepInstance)["$options"]`	—
`$forceUpdate`	—	`() => void`	—
`$nextTick`	—	`(AsamStepsStepInstance)["$nextTick"]`	—
`$watch`	—	`(AsamStepsStepInstance)["$watch"]`	—
`icon`	—	`AsamStepsStepInstance["icon"]`	—
`title`	—	`string`	—
`description`	—	`string`	—
`status`	—	`enum"" \| "finish" \| "success" \| "error" \| "wait" \| "process"`完整类型：`"" \| "finish" \| "success" \| "error" \| "wait" \| "process"`	—
`$route`	当前规范化路由位置，详见 RouteLocationNormalizedLoaded。	`AsamStepsExpose["$route"]`	—
`$router`	应用使用的 Router 实例。	`AsamStepsExpose["$router"]`	—

类型 `AsamStepsStepProps`

属性名	说明	类型	默认值
`title`	自定义标题	`string \| undefined`	—
`icon`	自定义图标	`AsamStepsStepInstance["icon"] \| undefined`	—
`description`	自定义描述文案	`string \| undefined`	`''`
`status`	设置当前步骤的状态，不设置则根据 steps 确定状态	`enum"" \| "finish" \| "success" \| "error" \| "wait" \| "process"`完整类型：`"" \| "finish" \| "success" \| "error" \| "wait" \| "process" \| undefined`	`''`

类型 `AsamStepsStepPropsPublic`

属性名	说明	类型	默认值
`title`	—	`string \| undefined`	—
`icon`	—	`(AsamStepsStepPropsPublic)["icon"]`	—
`description`	—	`string \| undefined`	—
`status`	—	`enum"" \| "finish" \| "success" \| "error" \| "wait" \| "process"`完整类型：`(AsamStepsStepPropsPublic)["status"]`	—

事件 `AsamStepsEmits`

属性名	说明	类型	默认值
`change`	—	`(newVal: number, oldVal: number) => boolean`	—

类型 `AsamStepsPropsPublic`

属性名	说明	类型	默认值
`direction`	—	`enum"horizontal" \| "vertical"`完整类型：`(AsamStepsPropsPublic)["direction"]`	—
`active`	—	`number \| undefined`	—
`space`	—	`(AsamStepsPropsPublic)["space"]`	—
`alignCenter`	—	`(AsamStepsPropsPublic)["alignCenter"]`	—
`simple`	—	`(AsamStepsPropsPublic)["simple"]`	—
`finishStatus`	—	`enum"finish" \| "success" \| "error" \| "wait" \| "process"`完整类型：`(AsamStepsPropsPublic)["finishStatus"]`	—
`processStatus`	—	`enum"finish" \| "success" \| "error" \| "wait" \| "process"`完整类型：`(AsamStepsPropsPublic)["processStatus"]`	—

类型 `AsamStepsStatus`

参数与事件补充说明

公开绑定参数，包含具备类型的事件监听器；默认值由运行时定义提供。

参数与事件说明

`space`

必填：否；声明来源：上游声明。

默认值与来源

''（声明注释；上游声明）

固定上游文档默认：''（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）

固定上游源码默认表达式：''（2.14.7；源码事实，未作为 ASAM 运行实测）

`active`

必填：否；声明来源：上游声明。

默认值与来源

0（声明注释；上游声明）

固定上游文档默认：0（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）

固定上游源码默认表达式：0（2.14.7；源码事实，未作为 ASAM 运行实测）

`direction`

必填：否；声明来源：上游声明。

direction 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

枚举："horizontal" / "vertical"

默认值与来源

'horizontal'（声明注释；上游声明）

固定上游文档默认：horizontal（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）

固定上游源码默认表达式：'horizontal'（2.14.7；源码事实，未作为 ASAM 运行实测）

`alignCenter`

必填：否；声明来源：上游声明。

alignCenter 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

枚举：false / true

默认值与来源

false（隐式 Boolean 默认；已安装组件）

固定上游文档默认：未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）

固定上游源码未声明 default（2.14.7；源码事实，未作为 ASAM 运行实测）

`simple`

必填：否；声明来源：上游声明。

simple 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

枚举：false / true

默认值与来源

false（隐式 Boolean 默认；已安装组件）

固定上游文档默认：未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）

固定上游源码未声明 default（2.14.7；源码事实，未作为 ASAM 运行实测）

`finishStatus`

必填：否；声明来源：上游声明。

finishStatus 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

枚举："finish" / "success" / "error" / "wait" / "process"

默认值与来源

'finish'（声明注释；上游声明）

固定上游文档默认：finish（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）

固定上游源码默认表达式：'finish'（2.14.7；源码事实，未作为 ASAM 运行实测）

`processStatus`

必填：否；声明来源：上游声明。

processStatus 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

枚举："finish" / "success" / "error" / "wait" / "process"

默认值与来源

'process'（声明注释；上游声明）

固定上游文档默认：process（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）

固定上游源码默认表达式：'process'（2.14.7；源码事实，未作为 ASAM 运行实测）

`onChange`

必填：否；声明来源：上游声明。

onChange 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

事件参数：(newVal: number, oldVal: number): any

`key`

必填：否；声明来源：依赖声明。

`ref`

必填：否；声明来源：依赖声明。

ref 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

事件参数：(ref: Element | ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string, {}, {}, {}, string, ComponentProvideOptions>, {}, {}, "", {}, any> | null, refs: Record<string, any>): void

ref.value: any — 依赖声明
ref.__@RefSymbol@8854: true — 依赖声明
仅用于区分类型：保留在公开声明中，通过私有 Symbol 避免出现在编辑器自动补全中。
枚举：true

`ref_for`

必填：否；声明来源：依赖声明。

ref_for 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

枚举：false / true

`ref_key`

必填：否；声明来源：依赖声明。

`onVnodeBeforeMount`

必填：否；声明来源：依赖声明。

onVnodeBeforeMount 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

事件参数：(vnode: VNode<RendererNode, RendererElement, { [key: string]: any; }>): void

`onVnodeMounted`

必填：否；声明来源：依赖声明。

onVnodeMounted 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

事件参数：(vnode: VNode<RendererNode, RendererElement, { [key: string]: any; }>): void

`onVnodeBeforeUpdate`

必填：否；声明来源：依赖声明。

onVnodeBeforeUpdate 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

事件参数：(vnode: VNode<RendererNode, RendererElement, { [key: string]: any; }>, oldVNode: VNode<RendererNode, RendererElement, { [key: string]: any; }>): void

`onVnodeUpdated`

必填：否；声明来源：依赖声明。

onVnodeUpdated 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

事件参数：(vnode: VNode<RendererNode, RendererElement, { [key: string]: any; }>, oldVNode: VNode<RendererNode, RendererElement, { [key: string]: any; }>): void

`onVnodeBeforeUnmount`

必填：否；声明来源：依赖声明。

onVnodeBeforeUnmount 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

事件参数：(vnode: VNode<RendererNode, RendererElement, { [key: string]: any; }>): void

`onVnodeUnmounted`

必填：否；声明来源：依赖声明。

onVnodeUnmounted 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

事件参数：(vnode: VNode<RendererNode, RendererElement, { [key: string]: any; }>): void

`class`

必填：否；声明来源：依赖声明。

`style`

必填：否；声明来源：依赖声明。

AsamStepsProps 公开类型视图

import type { VNodeRef, ComponentPublicInstance, ComponentOptionsBase, ComponentProvideOptions, VNode, RendererNode, RendererElement } from 'vue';
import type { AsamStepsProps, AsamStepsStatus, AsamStepsExpose } from '@asam-ui/ui';

type PublicMember<T, K extends PropertyKey> = T extends unknown ? K extends keyof T ? T[K] : never : never;

// AsamStepsProps
type PublicContract = {
	readonly "space"?: string | number | undefined;
	readonly "active"?: number | undefined;
	readonly "direction"?: "horizontal" | "vertical" | undefined;
	readonly "alignCenter"?: boolean | undefined;
	readonly "simple"?: boolean | undefined;
	readonly "finishStatus"?: AsamStepsStatus | undefined;
	readonly "processStatus"?: AsamStepsStatus | undefined;
	readonly "onChange"?: ((newVal: number, oldVal: number) => any) | undefined;
	"key"?: PropertyKey | undefined;
	"ref"?: VNodeRef | undefined;
	"ref_for"?: boolean | undefined;
	"ref_key"?: string | undefined;
	"onVnodeBeforeMount"?: (AsamStepsProps)["onVnodeBeforeMount"];
	"onVnodeMounted"?: (AsamStepsProps)["onVnodeMounted"];
	"onVnodeBeforeUpdate"?: (AsamStepsProps)["onVnodeBeforeUpdate"];
	"onVnodeUpdated"?: (AsamStepsProps)["onVnodeUpdated"];
	"onVnodeBeforeUnmount"?: (AsamStepsProps)["onVnodeBeforeUnmount"];
	"onVnodeUnmounted"?: (AsamStepsProps)["onVnodeUnmounted"];
	"class"?: unknown;
	"style"?: unknown;
};

完整的上游实例，包含全部公开方法与响应式状态。

参数与事件说明

`$`

必填：是；声明来源：依赖声明。

$ 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。

`$data`

必填：是；声明来源：依赖声明。

`$props`

必填：是；声明来源：依赖声明。

`$attrs`

必填：是；声明来源：依赖声明。

$attrs 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。

`$refs`

必填：是；声明来源：依赖声明。

$refs 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。

`$slots`

必填：是；声明来源：依赖声明。

`$root`

必填：是；声明来源：依赖声明。

`$parent`

必填：是；声明来源：依赖声明。

`$host`

必填：是；声明来源：依赖声明。

$host 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

嵌套展开边界：大型实例类型；完整类型见公开类型视图。

`$emit`

必填：是；声明来源：依赖声明。

$emit 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

事件参数：(event: "change", ...args: [newVal: number, oldVal: number]): void

嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。

`$el`

必填：是；声明来源：依赖声明。

`$options`

必填：是；声明来源：依赖声明。

`$forceUpdate`

必填：是；声明来源：依赖声明。

$forceUpdate 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

事件参数：(): void

嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。

`$nextTick`

必填：是；声明来源：依赖声明。

$nextTick 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

事件参数：(): Promise<void>

事件参数：<T, R>(this: T, fn: (this: T) => R | Promise<R>): Promise<R>

嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。

`$watch`

必填：是；声明来源：依赖声明。

$watch 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

事件参数：<T extends string | ((...args: any) => any)>(source: T, cb: Parameters<Extract<NonNullable<(AsamStepsExpose)["$watch"]>, (...args: never[]) => unknown>>[1], options?: WatchOptions<boolean> | undefined): WatchStopHandle

嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。

`direction`

必填：是；声明来源：上游声明。

direction 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

枚举："horizontal" / "vertical"

`space`

必填：是；声明来源：上游声明。

`active`

必填：是；声明来源：上游声明。

`finishStatus`

必填：是；声明来源：上游声明。

finishStatus 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

枚举："finish" / "success" / "error" / "wait" / "process"

`processStatus`

必填：是；声明来源：上游声明。

processStatus 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

枚举："finish" / "success" / "error" / "wait" / "process"

`onChange`

必填：否；声明来源：上游声明。

onChange 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

事件参数：(newVal: number, oldVal: number): any

`alignCenter`

必填：否；声明来源：上游声明。

alignCenter 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

枚举：false / true

默认值与来源

未知 / 未声明

固定上游源码未声明 default（2.14.7；源码事实，未作为 ASAM 运行实测）

`simple`

必填：否；声明来源：上游声明。

simple 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

枚举：false / true

默认值与来源

未知 / 未声明

固定上游源码未声明 default（2.14.7；源码事实，未作为 ASAM 运行实测）

`$route`

必填：是；声明来源：依赖声明。

$route 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

$route.matched: (NonNullable<AsamStepsExpose["$route"]>)["matched"] — 依赖声明
仅包含普通组件的 RouteLocationMatched 数组；懒加载组件已解析并替换 components 中的值，可直接展示路由，不包含重定向记录。此属性不可枚举。
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
$route.name: (NonNullable<AsamStepsExpose["$route"]>)["name"] — 依赖声明
匹配路由记录的名称。
$route.fullPath: string — 依赖声明
包含 search 和 hash 的完整位置字符串，使用百分号编码。
$route.query: (NonNullable<AsamStepsExpose["$route"]>)["query"] — 依赖声明
当前位置 search 属性的对象表示。
$route.hash: string — 依赖声明
当前位置的哈希片段；存在时以 # 开头。
$route.redirectedFrom: (NonNullable<AsamStepsExpose["$route"]>)["redirectedFrom"] — 依赖声明
最终到达当前位置之前，最初尝试访问的位置。
- $route.redirectedFrom.matched: PublicMember<NonNullable<(NonNullable<AsamStepsExpose["$route"]>)["redirectedFrom"]>, "matched"> — 依赖声明
  包含添加路由时原始组件的 RouteRecord 数组，也可能包含重定向记录，不能直接用于展示。此属性不可枚举。
  嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
- $route.redirectedFrom.fullPath: string — 依赖声明
  包含 search 和 hash 的完整位置字符串，使用百分号编码。
- $route.redirectedFrom.query: PublicMember<NonNullable<(NonNullable<AsamStepsExpose["$route"]>)["redirectedFrom"]>, "query"> — 依赖声明
  当前位置 search 属性的对象表示。
- $route.redirectedFrom.hash: string — 依赖声明
  当前位置的哈希片段；存在时以 # 开头。
- $route.redirectedFrom.redirectedFrom: PublicMember<NonNullable<(NonNullable<AsamStepsExpose["$route"]>)["redirectedFrom"]>, "redirectedFrom"> — 依赖声明
  最终到达当前位置之前，最初尝试访问的位置。
  嵌套展开边界：递归引用；完整类型见公开类型视图。
- $route.redirectedFrom.name: PublicMember<NonNullable<(NonNullable<AsamStepsExpose["$route"]>)["redirectedFrom"]>, "name"> — 依赖声明
  匹配路由记录的名称。
- $route.redirectedFrom.meta: PublicMember<NonNullable<(NonNullable<AsamStepsExpose["$route"]>)["redirectedFrom"]>, "meta"> — 依赖声明
  全部匹配路由记录合并后的 meta 属性。
- $route.redirectedFrom.params: PublicMember<NonNullable<(NonNullable<AsamStepsExpose["$route"]>)["redirectedFrom"]>, "params"> — 依赖声明
  从 path 提取并解码后的参数对象。
- $route.redirectedFrom.path: string — 依赖声明
  URL 中经过百分号编码的路径部分。
- $route.redirectedFrom.replace: boolean | undefined — 依赖声明
  替换当前历史记录，而不是添加新记录。
  枚举：false / true
- $route.redirectedFrom.force: boolean | undefined — 依赖声明
  即使目标与当前位置相同，也触发导航；除非传入 replace: true，否则会添加一条历史记录。
  枚举：false / true
- $route.redirectedFrom.state: PublicMember<NonNullable<(NonNullable<AsamStepsExpose["$route"]>)["redirectedFrom"]>, "state"> — 依赖声明
  通过 History API 保存的状态；不能包含响应式值，也不允许 Symbol 等部分值。详情参见 https://developer.mozilla.org/zh-CN/docs/Web/API/History/state。
$route.meta: (NonNullable<AsamStepsExpose["$route"]>)["meta"] — 依赖声明
全部匹配路由记录合并后的 meta 属性。
$route.params: (NonNullable<AsamStepsExpose["$route"]>)["params"] — 依赖声明
从 path 提取并解码后的参数对象。
$route.path: string — 依赖声明
URL 中经过百分号编码的路径部分。

`$router`

必填：是；声明来源：依赖声明。

$router 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

$router.options: (NonNullable<AsamStepsExpose["$router"]>)["options"] — 依赖声明
创建路由器时传入的原始配置对象。
- $router.options.routes: (NonNullable<(NonNullable<AsamStepsExpose["$router"]>)["options"]>)["routes"] — 依赖声明
  需要添加到路由器的初始路由列表。
  嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
- $router.options.history: (NonNullable<(NonNullable<AsamStepsExpose["$router"]>)["options"]>)["history"] — 依赖声明
  路由器使用的历史记录实现。通常使用 createWebHistory，并配置服务器回退；createWebHashHistory 无需服务器配置，但搜索引擎无法处理其哈希路由，影响搜索优化。
  - $router.options.history.base: string — 依赖声明
    添加到每个 URL 前的基础路径；例如 base 为 /sub-folder 时，可将单页应用部署在域名的对应子目录。
    嵌套展开边界：深度上限；完整类型见公开类型视图。
  - $router.options.history.location: string — 依赖声明
    当前历史记录位置。
    嵌套展开边界：深度上限；完整类型见公开类型视图。
  - $router.options.history.state: (NonNullable<(NonNullable<(NonNullable<AsamStepsExpose["$router"]>)["options"]>)["history"]>)["state"] — 依赖声明
    当前历史记录状态。
    嵌套展开边界：深度上限；完整类型见公开类型视图。
  - $router.options.history.push: (NonNullable<(NonNullable<(NonNullable<AsamStepsExpose["$router"]>)["options"]>)["history"]>)["push"] — 依赖声明
    导航到指定位置；使用 HTML5 History 时，通过 history.pushState 实际更新 URL。
    事件参数：(to: string, data?: Parameters<Extract<NonNullable<(NonNullable<(NonNullable<(NonNullable<AsamStepsExpose["$router"]>)["options"]>)["history"]>)["push"]>, (...args: never[]) => unknown>>[1]): void
    嵌套展开边界：深度上限；完整类型见公开类型视图。
  - $router.options.history.replace: (NonNullable<(NonNullable<(NonNullable<AsamStepsExpose["$router"]>)["options"]>)["history"]>)["replace"] — 依赖声明
    与 RouterHistory.push 类似，但调用 history.replaceState，而非 history.pushState。
    事件参数：(to: string, data?: Parameters<Extract<NonNullable<(NonNullable<(NonNullable<(NonNullable<AsamStepsExpose["$router"]>)["options"]>)["history"]>)["replace"]>, (...args: never[]) => unknown>>[1]): void
    嵌套展开边界：深度上限；完整类型见公开类型视图。
  - $router.options.history.go: (delta: number, triggerListeners?: boolean) => void — 依赖声明
    按指定方向遍历历史记录。
    事件参数：(delta: number, triggerListeners?: boolean | undefined): void
    嵌套展开边界：深度上限；完整类型见公开类型视图。
  - $router.options.history.listen: (NonNullable<(NonNullable<(NonNullable<AsamStepsExpose["$router"]>)["options"]>)["history"]>)["listen"] — 依赖声明
    为历史记录实现添加监听器；由浏览器前进、后退等外部导航，或传入 true 的 RouterHistory.back、RouterHistory.forward 触发。
    事件参数：(callback: Parameters<Extract<NonNullable<(NonNullable<(NonNullable<(NonNullable<AsamStepsExpose["$router"]>)["options"]>)["history"]>)["listen"]>, (...args: never[]) => unknown>>[0]): () => void
    嵌套展开边界：深度上限；完整类型见公开类型视图。
  - $router.options.history.createHref: (location: AsamStepsStepInstance["title"]) => string — 依赖声明
    生成用于链接元素的对应 href。
    事件参数：(location: string): string
    嵌套展开边界：深度上限；完整类型见公开类型视图。
  - $router.options.history.destroy: () => void — 依赖声明
    清除历史记录实现注册的全部事件监听器。
    事件参数：(): void
    嵌套展开边界：深度上限；完整类型见公开类型视图。
- $router.options.scrollBehavior: (NonNullable<(NonNullable<AsamStepsExpose["$router"]>)["options"]>)["scrollBehavior"] — 依赖声明
  控制页面导航时滚动行为的函数；可返回 Promise 延迟滚动。
  事件参数：(to: Parameters<Extract<NonNullable<(NonNullable<(NonNullable<AsamStepsExpose["$router"]>)["options"]>)["scrollBehavior"]>, (...args: never[]) => unknown>>[0], from: AsamStepsExpose["$route"], savedPosition: Parameters<Extract<NonNullable<(NonNullable<(NonNullable<AsamStepsExpose["$router"]>)["options"]>)["scrollBehavior"]>, (...args: never[]) => unknown>>[2]): ReturnType<Extract<NonNullable<(NonNullable<(NonNullable<AsamStepsExpose["$router"]>)["options"]>)["scrollBehavior"]>, (...args: never[]) => unknown>>
- $router.options.parseQuery: (NonNullable<(NonNullable<AsamStepsExpose["$router"]>)["options"]>)["parseQuery"] — 依赖声明
  自定义查询参数解析函数；与 EXPERIMENTAL_RouterOptions_Base.stringifyQuery 配套。
  事件参数：(search: string): ReturnType<Extract<NonNullable<(NonNullable<(NonNullable<AsamStepsExpose["$router"]>)["options"]>)["parseQuery"]>, (...args: never[]) => unknown>>
- $router.options.stringifyQuery: (NonNullable<(NonNullable<AsamStepsExpose["$router"]>)["options"]>)["stringifyQuery"] — 依赖声明
  自定义查询对象序列化函数；不要添加开头的 ?，与 parseQuery 的解析函数配套。
  事件参数：(query: Parameters<Extract<NonNullable<(NonNullable<(NonNullable<AsamStepsExpose["$router"]>)["options"]>)["stringifyQuery"]>, (...args: never[]) => unknown>>[0]): string
- $router.options.linkActiveClass: string | undefined — 依赖声明
  应用于激活 RouterLink 的默认类名；未指定时使用 router-link-active。
- $router.options.linkExactActiveClass: string | undefined — 依赖声明
  应用于精确激活 RouterLink 的默认类名；未指定时使用 router-link-exact-active。
- $router.options.end: boolean | undefined — 依赖声明
  是否在表达式末尾添加 $，使其匹配到路径结尾。
  声明默认：`true`（注释，实际运行默认以源码/安装包为准）
  枚举：false / true
- $router.options.sensitive: boolean | undefined — 依赖声明
  使正则表达式区分大小写。
  声明默认：`false`（注释，实际运行默认以源码/安装包为准）
  枚举：false / true
- $router.options.strict: boolean | undefined — 依赖声明
  是否禁止路径末尾的斜杠。
  声明默认：`false`（注释，实际运行默认以源码/安装包为准）
  枚举：false / true
$router.addRoute: (NonNullable<AsamStepsExpose["$router"]>)["addRoute"] — 依赖声明
向已有路由添加子路由，或向路由器添加新的 RouteRecordRaw 路由记录。
事件参数完整签名见公开类型视图。
事件参数完整签名见公开类型视图。
$router.removeRoute: (NonNullable<AsamStepsExpose["$router"]>)["removeRoute"] — 依赖声明
按名称移除已有路由。
事件参数：(name: Parameters<Extract<NonNullable<(NonNullable<AsamStepsExpose["$router"]>)["removeRoute"]>, (...args: never[]) => unknown>>[0]): void
$router.clearRoutes: () => void — 依赖声明
从路由器中删除全部路由。
事件参数：(): void
$router.currentRoute: ShallowRef<AsamStepsExpose["$route"]> — 依赖声明
当前 RouteLocationNormalized。
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
$router.listening: boolean — 依赖声明
允许关闭历史事件监听，这是用于微前端的底层 API。
枚举：false / true
$router.hasRoute: (NonNullable<AsamStepsExpose["$router"]>)["hasRoute"] — 依赖声明
检查指定名称的路由是否存在。
事件参数：(name: Parameters<Extract<NonNullable<(NonNullable<AsamStepsExpose["$router"]>)["hasRoute"]>, (...args: never[]) => unknown>>[0]): boolean
$router.getRoutes: (NonNullable<AsamStepsExpose["$router"]>)["getRoutes"] — 依赖声明
获取全部 RouteRecord 路由记录的完整列表。
事件参数：(): ReturnType<Extract<NonNullable<(NonNullable<AsamStepsExpose["$router"]>)["getRoutes"]>, (...args: never[]) => unknown>>
$router.resolve: (NonNullable<AsamStepsExpose["$router"]>)["resolve"] — 依赖声明
返回 RouteLocationRaw 的规范化位置，包含带基础路径的 href；默认使用 router.currentRoute 作为 currentLocation，仅在高级场景中覆盖。
事件参数完整签名见公开类型视图。
事件参数完整签名见公开类型视图。
$router.push: (NonNullable<AsamStepsExpose["$router"]>)["push"] — 依赖声明
通过向历史栈添加记录，以编程方式导航到新 URL。
事件参数：(to: Parameters<Extract<NonNullable<(NonNullable<AsamStepsExpose["$router"]>)["push"]>, (...args: never[]) => unknown>>[0]): ReturnType<Extract<NonNullable<(NonNullable<AsamStepsExpose["$router"]>)["push"]>, (...args: never[]) => unknown>>
$router.replace: (NonNullable<AsamStepsExpose["$router"]>)["replace"] — 依赖声明
通过替换历史栈中的当前记录，以编程方式导航到新 URL。
事件参数：(to: Parameters<Extract<NonNullable<(NonNullable<AsamStepsExpose["$router"]>)["replace"]>, (...args: never[]) => unknown>>[0]): ReturnType<Extract<NonNullable<(NonNullable<AsamStepsExpose["$router"]>)["replace"]>, (...args: never[]) => unknown>>
$router.back: () => void — 依赖声明
通过 history.back() 在可用时后退，等价于 router.go(-1)。
事件参数：(): void
$router.forward: () => void — 依赖声明
通过 history.forward() 在可用时前进，等价于 router.go(1)。
事件参数：(): void
$router.go: (delta: number) => void — 依赖声明
通过调用 history.go() 在历史记录中前进或后退。
事件参数：(delta: number): void
$router.beforeEach: (NonNullable<AsamStepsExpose["$router"]>)["beforeEach"] — 依赖声明
添加每次导航之前执行的守卫，并返回移除此守卫的函数。
事件参数：(guard: Parameters<Extract<NonNullable<(NonNullable<AsamStepsExpose["$router"]>)["beforeEach"]>, (...args: never[]) => unknown>>[0]): () => void
$router.beforeResolve: (NonNullable<AsamStepsExpose["$router"]>)["beforeResolve"] — 依赖声明
添加导航确认之前执行的守卫，此时组件已获取且其他导航守卫已通过；返回移除此守卫的函数。
事件参数：(guard: Parameters<Extract<NonNullable<(NonNullable<AsamStepsExpose["$router"]>)["beforeResolve"]>, (...args: never[]) => unknown>>[0]): () => void
$router.afterEach: (NonNullable<AsamStepsExpose["$router"]>)["afterEach"] — 依赖声明
添加每次导航结束后执行的钩子，并返回移除此钩子的函数。
事件参数：(guard: Parameters<Extract<NonNullable<(NonNullable<AsamStepsExpose["$router"]>)["afterEach"]>, (...args: never[]) => unknown>>[0]): () => void
$router.onError: (NonNullable<AsamStepsExpose["$router"]>)["onError"] — 依赖声明
添加导航期间未捕获错误的处理函数，涵盖同步和异步异常、守卫返回或传给 next 的错误，以及路由异步组件解析错误。
事件参数：(handler: Parameters<Extract<NonNullable<(NonNullable<AsamStepsExpose["$router"]>)["onError"]>, (...args: never[]) => unknown>>[0]): () => void
$router.isReady: () => Promise<void> — 依赖声明
返回在初次导航完成后兑现的 Promise，此时关联的异步进入钩子与异步组件均已解析；导航已完成时立即兑现。可用于保持服务端与客户端渲染一致；服务端需手动推入初始位置，客户端从 URL 自动读取。
事件参数：(): Promise<void>
$router.install: (app: App) => void — 依赖声明
由 app.use(router) 自动调用，用户不应手动调用；客户端调用时会触发初次导航。
事件参数：(app: App<any>): void

AsamStepsExpose 公开类型视图

import type { ComponentPublicInstance, ComponentOptionsBase, ComponentProvideOptions, ComponentOptionsMixin, GlobalComponents, GlobalDirectives, WatchOptions, WatchStopHandle, ShallowRef, App } from 'vue';
import type { AsamStepsExpose, AsamTableColumnExpose, AsamStepsProps, AsamStepsSlots, AsamStepsStatus, AsamStepsStepInstance } from '@asam-ui/ui';

type PublicMember<T, K extends PropertyKey> = T extends unknown ? K extends keyof T ? T[K] : never : never;

// AsamStepsExpose
type PublicContract = {
	"$": AsamStepsExpose["$"];
	"$data": AsamTableColumnExpose;
	"$props": AsamStepsProps;
	"$attrs": AsamStepsExpose["$attrs"];
	"$refs": AsamStepsExpose["$refs"];
	"$slots": AsamStepsSlots;
	"$root": ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string, {}, {}, {}, string, ComponentProvideOptions>, {}, {}, "", {}, any> | null;
	"$parent": ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string, {}, {}, {}, string, ComponentProvideOptions>, {}, {}, "", {}, any> | null;
	"$host": Element | null;
	"$emit": (event: "change", newVal: number, oldVal: number) => void;
	"$el": any;
	"$options": (AsamStepsExpose)["$options"];
	"$forceUpdate": () => void;
	"$nextTick": (AsamStepsExpose)["$nextTick"];
	"$watch": (AsamStepsExpose)["$watch"];
	readonly "direction": "horizontal" | "vertical";
	readonly "space": string | number;
	readonly "active": number;
	readonly "finishStatus": AsamStepsStatus;
	readonly "processStatus": AsamStepsStatus;
	readonly "onChange"?: ((newVal: number, oldVal: number) => any) | undefined;
	readonly "alignCenter"?: boolean | undefined;
	readonly "simple"?: boolean | undefined;
	"$route": AsamStepsExpose["$route"];
	"$router": AsamStepsExpose["$router"];
};

参数与事件说明

`$`

必填：是；声明来源：依赖声明。

$ 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。

`$data`

必填：是；声明来源：依赖声明。

`$props`

必填：是；声明来源：依赖声明。

`$attrs`

必填：是；声明来源：依赖声明。

$attrs 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。

`$refs`

必填：是；声明来源：依赖声明。

$refs 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。

`$slots`

必填：是；声明来源：依赖声明。

`$root`

必填：是；声明来源：依赖声明。

`$parent`

必填：是；声明来源：依赖声明。

`$host`

必填：是；声明来源：依赖声明。

$host 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

嵌套展开边界：大型实例类型；完整类型见公开类型视图。

`$emit`

必填：是；声明来源：依赖声明。

$emit 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

事件参数：(event: "change", ...args: [newVal: number, oldVal: number]): void

嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。

`$el`

必填：是；声明来源：依赖声明。

`$options`

必填：是；声明来源：依赖声明。

`$forceUpdate`

必填：是；声明来源：依赖声明。

$forceUpdate 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

事件参数：(): void

嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。

`$nextTick`

必填：是；声明来源：依赖声明。

$nextTick 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

事件参数：(): Promise<void>

事件参数：<T, R>(this: T, fn: (this: T) => R | Promise<R>): Promise<R>

嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。

`$watch`

必填：是；声明来源：依赖声明。

$watch 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

事件参数：<T extends string | ((...args: any) => any)>(source: T, cb: Parameters<Extract<NonNullable<(AsamStepsInstance)["$watch"]>, (...args: never[]) => unknown>>[1], options?: WatchOptions<boolean> | undefined): WatchStopHandle

嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。

`direction`

必填：是；声明来源：上游声明。

direction 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

枚举："horizontal" / "vertical"

`space`

必填：是；声明来源：上游声明。

`active`

必填：是；声明来源：上游声明。

`finishStatus`

必填：是；声明来源：上游声明。

finishStatus 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

枚举："finish" / "success" / "error" / "wait" / "process"

`processStatus`

必填：是；声明来源：上游声明。

processStatus 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

枚举："finish" / "success" / "error" / "wait" / "process"

`onChange`

必填：否；声明来源：上游声明。

onChange 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

事件参数：(newVal: number, oldVal: number): any

`alignCenter`

必填：否；声明来源：上游声明。

alignCenter 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

枚举：false / true

默认值与来源

未知 / 未声明

固定上游源码未声明 default（2.14.7；源码事实，未作为 ASAM 运行实测）

`simple`

必填：否；声明来源：上游声明。

simple 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

枚举：false / true

默认值与来源

未知 / 未声明

固定上游源码未声明 default（2.14.7；源码事实，未作为 ASAM 运行实测）

`$route`

必填：是；声明来源：依赖声明。

$route 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

$route.matched: (NonNullable<AsamStepsExpose["$route"]>)["matched"] — 依赖声明
仅包含普通组件的 RouteLocationMatched 数组；懒加载组件已解析并替换 components 中的值，可直接展示路由，不包含重定向记录。此属性不可枚举。
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
$route.name: (NonNullable<AsamStepsExpose["$route"]>)["name"] — 依赖声明
匹配路由记录的名称。
$route.fullPath: string — 依赖声明
包含 search 和 hash 的完整位置字符串，使用百分号编码。
$route.query: (NonNullable<AsamStepsExpose["$route"]>)["query"] — 依赖声明
当前位置 search 属性的对象表示。
$route.hash: string — 依赖声明
当前位置的哈希片段；存在时以 # 开头。
$route.redirectedFrom: (NonNullable<AsamStepsExpose["$route"]>)["redirectedFrom"] — 依赖声明
最终到达当前位置之前，最初尝试访问的位置。
- $route.redirectedFrom.matched: PublicMember<NonNullable<(NonNullable<AsamStepsExpose["$route"]>)["redirectedFrom"]>, "matched"> — 依赖声明
  包含添加路由时原始组件的 RouteRecord 数组，也可能包含重定向记录，不能直接用于展示。此属性不可枚举。
  嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
- $route.redirectedFrom.fullPath: string — 依赖声明
  包含 search 和 hash 的完整位置字符串，使用百分号编码。
- $route.redirectedFrom.query: PublicMember<NonNullable<(NonNullable<AsamStepsExpose["$route"]>)["redirectedFrom"]>, "query"> — 依赖声明
  当前位置 search 属性的对象表示。
- $route.redirectedFrom.hash: string — 依赖声明
  当前位置的哈希片段；存在时以 # 开头。
- $route.redirectedFrom.redirectedFrom: PublicMember<NonNullable<(NonNullable<AsamStepsExpose["$route"]>)["redirectedFrom"]>, "redirectedFrom"> — 依赖声明
  最终到达当前位置之前，最初尝试访问的位置。
  嵌套展开边界：递归引用；完整类型见公开类型视图。
- $route.redirectedFrom.name: PublicMember<NonNullable<(NonNullable<AsamStepsExpose["$route"]>)["redirectedFrom"]>, "name"> — 依赖声明
  匹配路由记录的名称。
- $route.redirectedFrom.meta: PublicMember<NonNullable<(NonNullable<AsamStepsExpose["$route"]>)["redirectedFrom"]>, "meta"> — 依赖声明
  全部匹配路由记录合并后的 meta 属性。
- $route.redirectedFrom.params: PublicMember<NonNullable<(NonNullable<AsamStepsExpose["$route"]>)["redirectedFrom"]>, "params"> — 依赖声明
  从 path 提取并解码后的参数对象。
- $route.redirectedFrom.path: string — 依赖声明
  URL 中经过百分号编码的路径部分。
- $route.redirectedFrom.replace: boolean | undefined — 依赖声明
  替换当前历史记录，而不是添加新记录。
  枚举：false / true
- $route.redirectedFrom.force: boolean | undefined — 依赖声明
  即使目标与当前位置相同，也触发导航；除非传入 replace: true，否则会添加一条历史记录。
  枚举：false / true
- $route.redirectedFrom.state: PublicMember<NonNullable<(NonNullable<AsamStepsExpose["$route"]>)["redirectedFrom"]>, "state"> — 依赖声明
  通过 History API 保存的状态；不能包含响应式值，也不允许 Symbol 等部分值。详情参见 https://developer.mozilla.org/zh-CN/docs/Web/API/History/state。
$route.meta: (NonNullable<AsamStepsExpose["$route"]>)["meta"] — 依赖声明
全部匹配路由记录合并后的 meta 属性。
$route.params: (NonNullable<AsamStepsExpose["$route"]>)["params"] — 依赖声明
从 path 提取并解码后的参数对象。
$route.path: string — 依赖声明
URL 中经过百分号编码的路径部分。

`$router`

必填：是；声明来源：依赖声明。

$router 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

$router.options: (NonNullable<AsamStepsExpose["$router"]>)["options"] — 依赖声明
创建路由器时传入的原始配置对象。
- $router.options.routes: (NonNullable<(NonNullable<AsamStepsExpose["$router"]>)["options"]>)["routes"] — 依赖声明
  需要添加到路由器的初始路由列表。
  嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
- $router.options.history: (NonNullable<(NonNullable<AsamStepsExpose["$router"]>)["options"]>)["history"] — 依赖声明
  路由器使用的历史记录实现。通常使用 createWebHistory，并配置服务器回退；createWebHashHistory 无需服务器配置，但搜索引擎无法处理其哈希路由，影响搜索优化。
  - $router.options.history.base: string — 依赖声明
    添加到每个 URL 前的基础路径；例如 base 为 /sub-folder 时，可将单页应用部署在域名的对应子目录。
    嵌套展开边界：深度上限；完整类型见公开类型视图。
  - $router.options.history.location: string — 依赖声明
    当前历史记录位置。
    嵌套展开边界：深度上限；完整类型见公开类型视图。
  - $router.options.history.state: (NonNullable<(NonNullable<(NonNullable<AsamStepsExpose["$router"]>)["options"]>)["history"]>)["state"] — 依赖声明
    当前历史记录状态。
    嵌套展开边界：深度上限；完整类型见公开类型视图。
  - $router.options.history.push: (NonNullable<(NonNullable<(NonNullable<AsamStepsExpose["$router"]>)["options"]>)["history"]>)["push"] — 依赖声明
    导航到指定位置；使用 HTML5 History 时，通过 history.pushState 实际更新 URL。
    事件参数：(to: string, data?: Parameters<Extract<NonNullable<(NonNullable<(NonNullable<(NonNullable<AsamStepsExpose["$router"]>)["options"]>)["history"]>)["push"]>, (...args: never[]) => unknown>>[1]): void
    嵌套展开边界：深度上限；完整类型见公开类型视图。
  - $router.options.history.replace: (NonNullable<(NonNullable<(NonNullable<AsamStepsExpose["$router"]>)["options"]>)["history"]>)["replace"] — 依赖声明
    与 RouterHistory.push 类似，但调用 history.replaceState，而非 history.pushState。
    事件参数：(to: string, data?: Parameters<Extract<NonNullable<(NonNullable<(NonNullable<(NonNullable<AsamStepsExpose["$router"]>)["options"]>)["history"]>)["replace"]>, (...args: never[]) => unknown>>[1]): void
    嵌套展开边界：深度上限；完整类型见公开类型视图。
  - $router.options.history.go: (delta: number, triggerListeners?: boolean) => void — 依赖声明
    按指定方向遍历历史记录。
    事件参数：(delta: number, triggerListeners?: boolean | undefined): void
    嵌套展开边界：深度上限；完整类型见公开类型视图。
  - $router.options.history.listen: (NonNullable<(NonNullable<(NonNullable<AsamStepsExpose["$router"]>)["options"]>)["history"]>)["listen"] — 依赖声明
    为历史记录实现添加监听器；由浏览器前进、后退等外部导航，或传入 true 的 RouterHistory.back、RouterHistory.forward 触发。
    事件参数：(callback: Parameters<Extract<NonNullable<(NonNullable<(NonNullable<(NonNullable<AsamStepsExpose["$router"]>)["options"]>)["history"]>)["listen"]>, (...args: never[]) => unknown>>[0]): () => void
    嵌套展开边界：深度上限；完整类型见公开类型视图。
  - $router.options.history.createHref: (location: AsamStepsStepInstance["title"]) => string — 依赖声明
    生成用于链接元素的对应 href。
    事件参数：(location: string): string
    嵌套展开边界：深度上限；完整类型见公开类型视图。
  - $router.options.history.destroy: () => void — 依赖声明
    清除历史记录实现注册的全部事件监听器。
    事件参数：(): void
    嵌套展开边界：深度上限；完整类型见公开类型视图。
- $router.options.scrollBehavior: (NonNullable<(NonNullable<AsamStepsExpose["$router"]>)["options"]>)["scrollBehavior"] — 依赖声明
  控制页面导航时滚动行为的函数；可返回 Promise 延迟滚动。
  事件参数：(to: Parameters<Extract<NonNullable<(NonNullable<(NonNullable<AsamStepsExpose["$router"]>)["options"]>)["scrollBehavior"]>, (...args: never[]) => unknown>>[0], from: AsamStepsExpose["$route"], savedPosition: Parameters<Extract<NonNullable<(NonNullable<(NonNullable<AsamStepsExpose["$router"]>)["options"]>)["scrollBehavior"]>, (...args: never[]) => unknown>>[2]): ReturnType<Extract<NonNullable<(NonNullable<(NonNullable<AsamStepsExpose["$router"]>)["options"]>)["scrollBehavior"]>, (...args: never[]) => unknown>>
- $router.options.parseQuery: (NonNullable<(NonNullable<AsamStepsExpose["$router"]>)["options"]>)["parseQuery"] — 依赖声明
  自定义查询参数解析函数；与 EXPERIMENTAL_RouterOptions_Base.stringifyQuery 配套。
  事件参数：(search: string): ReturnType<Extract<NonNullable<(NonNullable<(NonNullable<AsamStepsExpose["$router"]>)["options"]>)["parseQuery"]>, (...args: never[]) => unknown>>
- $router.options.stringifyQuery: (NonNullable<(NonNullable<AsamStepsExpose["$router"]>)["options"]>)["stringifyQuery"] — 依赖声明
  自定义查询对象序列化函数；不要添加开头的 ?，与 parseQuery 的解析函数配套。
  事件参数：(query: Parameters<Extract<NonNullable<(NonNullable<(NonNullable<AsamStepsExpose["$router"]>)["options"]>)["stringifyQuery"]>, (...args: never[]) => unknown>>[0]): string
- $router.options.linkActiveClass: string | undefined — 依赖声明
  应用于激活 RouterLink 的默认类名；未指定时使用 router-link-active。
- $router.options.linkExactActiveClass: string | undefined — 依赖声明
  应用于精确激活 RouterLink 的默认类名；未指定时使用 router-link-exact-active。
- $router.options.end: boolean | undefined — 依赖声明
  是否在表达式末尾添加 $，使其匹配到路径结尾。
  声明默认：`true`（注释，实际运行默认以源码/安装包为准）
  枚举：false / true
- $router.options.sensitive: boolean | undefined — 依赖声明
  使正则表达式区分大小写。
  声明默认：`false`（注释，实际运行默认以源码/安装包为准）
  枚举：false / true
- $router.options.strict: boolean | undefined — 依赖声明
  是否禁止路径末尾的斜杠。
  声明默认：`false`（注释，实际运行默认以源码/安装包为准）
  枚举：false / true
$router.addRoute: (NonNullable<AsamStepsExpose["$router"]>)["addRoute"] — 依赖声明
向已有路由添加子路由，或向路由器添加新的 RouteRecordRaw 路由记录。
事件参数完整签名见公开类型视图。
事件参数完整签名见公开类型视图。
$router.removeRoute: (NonNullable<AsamStepsExpose["$router"]>)["removeRoute"] — 依赖声明
按名称移除已有路由。
事件参数：(name: Parameters<Extract<NonNullable<(NonNullable<AsamStepsExpose["$router"]>)["removeRoute"]>, (...args: never[]) => unknown>>[0]): void
$router.clearRoutes: () => void — 依赖声明
从路由器中删除全部路由。
事件参数：(): void
$router.currentRoute: ShallowRef<AsamStepsExpose["$route"]> — 依赖声明
当前 RouteLocationNormalized。
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
$router.listening: boolean — 依赖声明
允许关闭历史事件监听，这是用于微前端的底层 API。
枚举：false / true
$router.hasRoute: (NonNullable<AsamStepsExpose["$router"]>)["hasRoute"] — 依赖声明
检查指定名称的路由是否存在。
事件参数：(name: Parameters<Extract<NonNullable<(NonNullable<AsamStepsExpose["$router"]>)["hasRoute"]>, (...args: never[]) => unknown>>[0]): boolean
$router.getRoutes: (NonNullable<AsamStepsExpose["$router"]>)["getRoutes"] — 依赖声明
获取全部 RouteRecord 路由记录的完整列表。
事件参数：(): ReturnType<Extract<NonNullable<(NonNullable<AsamStepsExpose["$router"]>)["getRoutes"]>, (...args: never[]) => unknown>>
$router.resolve: (NonNullable<AsamStepsExpose["$router"]>)["resolve"] — 依赖声明
返回 RouteLocationRaw 的规范化位置，包含带基础路径的 href；默认使用 router.currentRoute 作为 currentLocation，仅在高级场景中覆盖。
事件参数完整签名见公开类型视图。
事件参数完整签名见公开类型视图。
$router.push: (NonNullable<AsamStepsExpose["$router"]>)["push"] — 依赖声明
通过向历史栈添加记录，以编程方式导航到新 URL。
事件参数：(to: Parameters<Extract<NonNullable<(NonNullable<AsamStepsExpose["$router"]>)["push"]>, (...args: never[]) => unknown>>[0]): ReturnType<Extract<NonNullable<(NonNullable<AsamStepsExpose["$router"]>)["push"]>, (...args: never[]) => unknown>>
$router.replace: (NonNullable<AsamStepsExpose["$router"]>)["replace"] — 依赖声明
通过替换历史栈中的当前记录，以编程方式导航到新 URL。
事件参数：(to: Parameters<Extract<NonNullable<(NonNullable<AsamStepsExpose["$router"]>)["replace"]>, (...args: never[]) => unknown>>[0]): ReturnType<Extract<NonNullable<(NonNullable<AsamStepsExpose["$router"]>)["replace"]>, (...args: never[]) => unknown>>
$router.back: () => void — 依赖声明
通过 history.back() 在可用时后退，等价于 router.go(-1)。
事件参数：(): void
$router.forward: () => void — 依赖声明
通过 history.forward() 在可用时前进，等价于 router.go(1)。
事件参数：(): void
$router.go: (delta: number) => void — 依赖声明
通过调用 history.go() 在历史记录中前进或后退。
事件参数：(delta: number): void
$router.beforeEach: (NonNullable<AsamStepsExpose["$router"]>)["beforeEach"] — 依赖声明
添加每次导航之前执行的守卫，并返回移除此守卫的函数。
事件参数：(guard: Parameters<Extract<NonNullable<(NonNullable<AsamStepsExpose["$router"]>)["beforeEach"]>, (...args: never[]) => unknown>>[0]): () => void
$router.beforeResolve: (NonNullable<AsamStepsExpose["$router"]>)["beforeResolve"] — 依赖声明
添加导航确认之前执行的守卫，此时组件已获取且其他导航守卫已通过；返回移除此守卫的函数。
事件参数：(guard: Parameters<Extract<NonNullable<(NonNullable<AsamStepsExpose["$router"]>)["beforeResolve"]>, (...args: never[]) => unknown>>[0]): () => void
$router.afterEach: (NonNullable<AsamStepsExpose["$router"]>)["afterEach"] — 依赖声明
添加每次导航结束后执行的钩子，并返回移除此钩子的函数。
事件参数：(guard: Parameters<Extract<NonNullable<(NonNullable<AsamStepsExpose["$router"]>)["afterEach"]>, (...args: never[]) => unknown>>[0]): () => void
$router.onError: (NonNullable<AsamStepsExpose["$router"]>)["onError"] — 依赖声明
添加导航期间未捕获错误的处理函数，涵盖同步和异步异常、守卫返回或传给 next 的错误，以及路由异步组件解析错误。
事件参数：(handler: Parameters<Extract<NonNullable<(NonNullable<AsamStepsExpose["$router"]>)["onError"]>, (...args: never[]) => unknown>>[0]): () => void
$router.isReady: () => Promise<void> — 依赖声明
返回在初次导航完成后兑现的 Promise，此时关联的异步进入钩子与异步组件均已解析；导航已完成时立即兑现。可用于保持服务端与客户端渲染一致；服务端需手动推入初始位置，客户端从 URL 自动读取。
事件参数：(): Promise<void>
$router.install: (app: App) => void — 依赖声明
由 app.use(router) 自动调用，用户不应手动调用；客户端调用时会触发初次导航。
事件参数：(app: App<any>): void

AsamStepsInstance 公开类型视图

import type { ComponentPublicInstance, ComponentOptionsBase, ComponentProvideOptions, ComponentOptionsMixin, GlobalComponents, GlobalDirectives, WatchOptions, WatchStopHandle, ShallowRef, App } from 'vue';
import type { AsamStepsInstance, AsamStepsExpose, AsamTableColumnExpose, AsamStepsProps, AsamStepsSlots, AsamStepsStatus, AsamStepsStepInstance } from '@asam-ui/ui';

type PublicMember<T, K extends PropertyKey> = T extends unknown ? K extends keyof T ? T[K] : never : never;

// AsamStepsInstance
type PublicContract = {
	"$": AsamStepsExpose["$"];
	"$data": AsamTableColumnExpose;
	"$props": AsamStepsProps;
	"$attrs": AsamStepsExpose["$attrs"];
	"$refs": AsamStepsExpose["$refs"];
	"$slots": AsamStepsSlots;
	"$root": ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string, {}, {}, {}, string, ComponentProvideOptions>, {}, {}, "", {}, any> | null;
	"$parent": ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string, {}, {}, {}, string, ComponentProvideOptions>, {}, {}, "", {}, any> | null;
	"$host": Element | null;
	"$emit": (event: "change", newVal: number, oldVal: number) => void;
	"$el": any;
	"$options": (AsamStepsInstance)["$options"];
	"$forceUpdate": () => void;
	"$nextTick": (AsamStepsInstance)["$nextTick"];
	"$watch": (AsamStepsInstance)["$watch"];
	readonly "direction": "horizontal" | "vertical";
	readonly "space": string | number;
	readonly "active": number;
	readonly "finishStatus": AsamStepsStatus;
	readonly "processStatus": AsamStepsStatus;
	readonly "onChange"?: ((newVal: number, oldVal: number) => any) | undefined;
	readonly "alignCenter"?: boolean | undefined;
	readonly "simple"?: boolean | undefined;
	"$route": AsamStepsExpose["$route"];
	"$router": AsamStepsExpose["$router"];
};

作用域插槽保留上游实例契约。

参数与事件说明

`default`

必填：否；声明来源：上游声明。

default 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

事件参数：(props: AsamTableColumnExpose): any

AsamStepsSlots 公开类型视图

import type { AsamStepsSlots, AsamStepsExpose, AsamTableColumnExpose } from '@asam-ui/ui';

// AsamStepsSlots
type PublicContract = {
	"default"?: (AsamStepsSlots)["default"];
	readonly [key: string]: import("vue").Slot<any> | undefined;
};

参数与事件说明

`$`

必填：是；声明来源：依赖声明。

$ 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。

`$data`

必填：是；声明来源：依赖声明。

`$props`

必填：是；声明来源：依赖声明。

`$attrs`

必填：是；声明来源：依赖声明。

$attrs 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。

`$refs`

必填：是；声明来源：依赖声明。

$refs 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。

`$slots`

必填：是；声明来源：依赖声明。

`$root`

必填：是；声明来源：依赖声明。

`$parent`

必填：是；声明来源：依赖声明。

`$host`

必填：是；声明来源：依赖声明。

$host 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

嵌套展开边界：大型实例类型；完整类型见公开类型视图。

`$emit`

必填：是；声明来源：依赖声明。

$emit 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

事件参数：(event: string, ...args: any[]): void

嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。

`$el`

必填：是；声明来源：依赖声明。

`$options`

必填：是；声明来源：依赖声明。

`$forceUpdate`

必填：是；声明来源：依赖声明。

$forceUpdate 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

事件参数：(): void

嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。

`$nextTick`

必填：是；声明来源：依赖声明。

$nextTick 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

事件参数：(): Promise<void>

事件参数：<T, R>(this: T, fn: (this: T) => R | Promise<R>): Promise<R>

嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。

`$watch`

必填：是；声明来源：依赖声明。

$watch 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

事件参数：<T extends string | ((...args: any) => any)>(source: T, cb: Parameters<Extract<NonNullable<(AsamStepsStepInstance)["$watch"]>, (...args: never[]) => unknown>>[1], options?: WatchOptions<boolean> | undefined): WatchStopHandle

嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。

`icon`

必填：是；声明来源：上游声明。

icon 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

事件参数：(props: any, ctx: Parameters<Extract<NonNullable<AsamStepsStepInstance["icon"]>, (...args: never[]) => unknown>>[1]): any

嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。

`title`

必填：是；声明来源：上游声明。

`description`

必填：是；声明来源：上游声明。

`status`

必填：是；声明来源：上游声明。

status 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

枚举："" / "finish" / "success" / "error" / "wait" / "process"

`$route`

必填：是；声明来源：依赖声明。

$route 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

$route.matched: (NonNullable<AsamStepsExpose["$route"]>)["matched"] — 依赖声明
仅包含普通组件的 RouteLocationMatched 数组；懒加载组件已解析并替换 components 中的值，可直接展示路由，不包含重定向记录。此属性不可枚举。
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
$route.name: (NonNullable<AsamStepsExpose["$route"]>)["name"] — 依赖声明
匹配路由记录的名称。
$route.fullPath: string — 依赖声明
包含 search 和 hash 的完整位置字符串，使用百分号编码。
$route.query: (NonNullable<AsamStepsExpose["$route"]>)["query"] — 依赖声明
当前位置 search 属性的对象表示。
$route.hash: string — 依赖声明
当前位置的哈希片段；存在时以 # 开头。
$route.redirectedFrom: (NonNullable<AsamStepsExpose["$route"]>)["redirectedFrom"] — 依赖声明
最终到达当前位置之前，最初尝试访问的位置。
- $route.redirectedFrom.matched: PublicMember<NonNullable<(NonNullable<AsamStepsExpose["$route"]>)["redirectedFrom"]>, "matched"> — 依赖声明
  包含添加路由时原始组件的 RouteRecord 数组，也可能包含重定向记录，不能直接用于展示。此属性不可枚举。
  嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
- $route.redirectedFrom.fullPath: string — 依赖声明
  包含 search 和 hash 的完整位置字符串，使用百分号编码。
- $route.redirectedFrom.query: PublicMember<NonNullable<(NonNullable<AsamStepsExpose["$route"]>)["redirectedFrom"]>, "query"> — 依赖声明
  当前位置 search 属性的对象表示。
- $route.redirectedFrom.hash: string — 依赖声明
  当前位置的哈希片段；存在时以 # 开头。
- $route.redirectedFrom.redirectedFrom: PublicMember<NonNullable<(NonNullable<AsamStepsExpose["$route"]>)["redirectedFrom"]>, "redirectedFrom"> — 依赖声明
  最终到达当前位置之前，最初尝试访问的位置。
  嵌套展开边界：递归引用；完整类型见公开类型视图。
- $route.redirectedFrom.name: PublicMember<NonNullable<(NonNullable<AsamStepsExpose["$route"]>)["redirectedFrom"]>, "name"> — 依赖声明
  匹配路由记录的名称。
- $route.redirectedFrom.meta: PublicMember<NonNullable<(NonNullable<AsamStepsExpose["$route"]>)["redirectedFrom"]>, "meta"> — 依赖声明
  全部匹配路由记录合并后的 meta 属性。
- $route.redirectedFrom.params: PublicMember<NonNullable<(NonNullable<AsamStepsExpose["$route"]>)["redirectedFrom"]>, "params"> — 依赖声明
  从 path 提取并解码后的参数对象。
- $route.redirectedFrom.path: string — 依赖声明
  URL 中经过百分号编码的路径部分。
- $route.redirectedFrom.replace: boolean | undefined — 依赖声明
  替换当前历史记录，而不是添加新记录。
  枚举：false / true
- $route.redirectedFrom.force: boolean | undefined — 依赖声明
  即使目标与当前位置相同，也触发导航；除非传入 replace: true，否则会添加一条历史记录。
  枚举：false / true
- $route.redirectedFrom.state: PublicMember<NonNullable<(NonNullable<AsamStepsExpose["$route"]>)["redirectedFrom"]>, "state"> — 依赖声明
  通过 History API 保存的状态；不能包含响应式值，也不允许 Symbol 等部分值。详情参见 https://developer.mozilla.org/zh-CN/docs/Web/API/History/state。
$route.meta: (NonNullable<AsamStepsExpose["$route"]>)["meta"] — 依赖声明
全部匹配路由记录合并后的 meta 属性。
$route.params: (NonNullable<AsamStepsExpose["$route"]>)["params"] — 依赖声明
从 path 提取并解码后的参数对象。
$route.path: string — 依赖声明
URL 中经过百分号编码的路径部分。

`$router`

必填：是；声明来源：依赖声明。

$router 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

$router.options: (NonNullable<AsamStepsExpose["$router"]>)["options"] — 依赖声明
创建路由器时传入的原始配置对象。
- $router.options.routes: (NonNullable<(NonNullable<AsamStepsExpose["$router"]>)["options"]>)["routes"] — 依赖声明
  需要添加到路由器的初始路由列表。
  嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
- $router.options.history: (NonNullable<(NonNullable<AsamStepsExpose["$router"]>)["options"]>)["history"] — 依赖声明
  路由器使用的历史记录实现。通常使用 createWebHistory，并配置服务器回退；createWebHashHistory 无需服务器配置，但搜索引擎无法处理其哈希路由，影响搜索优化。
  - $router.options.history.base: string — 依赖声明
    添加到每个 URL 前的基础路径；例如 base 为 /sub-folder 时，可将单页应用部署在域名的对应子目录。
    嵌套展开边界：深度上限；完整类型见公开类型视图。
  - $router.options.history.location: string — 依赖声明
    当前历史记录位置。
    嵌套展开边界：深度上限；完整类型见公开类型视图。
  - $router.options.history.state: (NonNullable<(NonNullable<(NonNullable<AsamStepsExpose["$router"]>)["options"]>)["history"]>)["state"] — 依赖声明
    当前历史记录状态。
    嵌套展开边界：深度上限；完整类型见公开类型视图。
  - $router.options.history.push: (NonNullable<(NonNullable<(NonNullable<AsamStepsExpose["$router"]>)["options"]>)["history"]>)["push"] — 依赖声明
    导航到指定位置；使用 HTML5 History 时，通过 history.pushState 实际更新 URL。
    事件参数：(to: string, data?: Parameters<Extract<NonNullable<(NonNullable<(NonNullable<(NonNullable<AsamStepsExpose["$router"]>)["options"]>)["history"]>)["push"]>, (...args: never[]) => unknown>>[1]): void
    嵌套展开边界：深度上限；完整类型见公开类型视图。
  - $router.options.history.replace: (NonNullable<(NonNullable<(NonNullable<AsamStepsExpose["$router"]>)["options"]>)["history"]>)["replace"] — 依赖声明
    与 RouterHistory.push 类似，但调用 history.replaceState，而非 history.pushState。
    事件参数：(to: string, data?: Parameters<Extract<NonNullable<(NonNullable<(NonNullable<(NonNullable<AsamStepsExpose["$router"]>)["options"]>)["history"]>)["replace"]>, (...args: never[]) => unknown>>[1]): void
    嵌套展开边界：深度上限；完整类型见公开类型视图。
  - $router.options.history.go: (delta: number, triggerListeners?: boolean) => void — 依赖声明
    按指定方向遍历历史记录。
    事件参数：(delta: number, triggerListeners?: boolean | undefined): void
    嵌套展开边界：深度上限；完整类型见公开类型视图。
  - $router.options.history.listen: (NonNullable<(NonNullable<(NonNullable<AsamStepsExpose["$router"]>)["options"]>)["history"]>)["listen"] — 依赖声明
    为历史记录实现添加监听器；由浏览器前进、后退等外部导航，或传入 true 的 RouterHistory.back、RouterHistory.forward 触发。
    事件参数：(callback: Parameters<Extract<NonNullable<(NonNullable<(NonNullable<(NonNullable<AsamStepsExpose["$router"]>)["options"]>)["history"]>)["listen"]>, (...args: never[]) => unknown>>[0]): () => void
    嵌套展开边界：深度上限；完整类型见公开类型视图。
  - $router.options.history.createHref: (location: AsamStepsStepInstance["title"]) => string — 依赖声明
    生成用于链接元素的对应 href。
    事件参数：(location: string): string
    嵌套展开边界：深度上限；完整类型见公开类型视图。
  - $router.options.history.destroy: () => void — 依赖声明
    清除历史记录实现注册的全部事件监听器。
    事件参数：(): void
    嵌套展开边界：深度上限；完整类型见公开类型视图。
- $router.options.scrollBehavior: (NonNullable<(NonNullable<AsamStepsExpose["$router"]>)["options"]>)["scrollBehavior"] — 依赖声明
  控制页面导航时滚动行为的函数；可返回 Promise 延迟滚动。
  事件参数：(to: Parameters<Extract<NonNullable<(NonNullable<(NonNullable<AsamStepsExpose["$router"]>)["options"]>)["scrollBehavior"]>, (...args: never[]) => unknown>>[0], from: AsamStepsExpose["$route"], savedPosition: Parameters<Extract<NonNullable<(NonNullable<(NonNullable<AsamStepsExpose["$router"]>)["options"]>)["scrollBehavior"]>, (...args: never[]) => unknown>>[2]): ReturnType<Extract<NonNullable<(NonNullable<(NonNullable<AsamStepsExpose["$router"]>)["options"]>)["scrollBehavior"]>, (...args: never[]) => unknown>>
- $router.options.parseQuery: (NonNullable<(NonNullable<AsamStepsExpose["$router"]>)["options"]>)["parseQuery"] — 依赖声明
  自定义查询参数解析函数；与 EXPERIMENTAL_RouterOptions_Base.stringifyQuery 配套。
  事件参数：(search: string): ReturnType<Extract<NonNullable<(NonNullable<(NonNullable<AsamStepsExpose["$router"]>)["options"]>)["parseQuery"]>, (...args: never[]) => unknown>>
- $router.options.stringifyQuery: (NonNullable<(NonNullable<AsamStepsExpose["$router"]>)["options"]>)["stringifyQuery"] — 依赖声明
  自定义查询对象序列化函数；不要添加开头的 ?，与 parseQuery 的解析函数配套。
  事件参数：(query: Parameters<Extract<NonNullable<(NonNullable<(NonNullable<AsamStepsExpose["$router"]>)["options"]>)["stringifyQuery"]>, (...args: never[]) => unknown>>[0]): string
- $router.options.linkActiveClass: string | undefined — 依赖声明
  应用于激活 RouterLink 的默认类名；未指定时使用 router-link-active。
- $router.options.linkExactActiveClass: string | undefined — 依赖声明
  应用于精确激活 RouterLink 的默认类名；未指定时使用 router-link-exact-active。
- $router.options.end: boolean | undefined — 依赖声明
  是否在表达式末尾添加 $，使其匹配到路径结尾。
  声明默认：`true`（注释，实际运行默认以源码/安装包为准）
  枚举：false / true
- $router.options.sensitive: boolean | undefined — 依赖声明
  使正则表达式区分大小写。
  声明默认：`false`（注释，实际运行默认以源码/安装包为准）
  枚举：false / true
- $router.options.strict: boolean | undefined — 依赖声明
  是否禁止路径末尾的斜杠。
  声明默认：`false`（注释，实际运行默认以源码/安装包为准）
  枚举：false / true
$router.addRoute: (NonNullable<AsamStepsExpose["$router"]>)["addRoute"] — 依赖声明
向已有路由添加子路由，或向路由器添加新的 RouteRecordRaw 路由记录。
事件参数完整签名见公开类型视图。
事件参数完整签名见公开类型视图。
$router.removeRoute: (NonNullable<AsamStepsExpose["$router"]>)["removeRoute"] — 依赖声明
按名称移除已有路由。
事件参数：(name: Parameters<Extract<NonNullable<(NonNullable<AsamStepsExpose["$router"]>)["removeRoute"]>, (...args: never[]) => unknown>>[0]): void
$router.clearRoutes: () => void — 依赖声明
从路由器中删除全部路由。
事件参数：(): void
$router.currentRoute: ShallowRef<AsamStepsExpose["$route"]> — 依赖声明
当前 RouteLocationNormalized。
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
$router.listening: boolean — 依赖声明
允许关闭历史事件监听，这是用于微前端的底层 API。
枚举：false / true
$router.hasRoute: (NonNullable<AsamStepsExpose["$router"]>)["hasRoute"] — 依赖声明
检查指定名称的路由是否存在。
事件参数：(name: Parameters<Extract<NonNullable<(NonNullable<AsamStepsExpose["$router"]>)["hasRoute"]>, (...args: never[]) => unknown>>[0]): boolean
$router.getRoutes: (NonNullable<AsamStepsExpose["$router"]>)["getRoutes"] — 依赖声明
获取全部 RouteRecord 路由记录的完整列表。
事件参数：(): ReturnType<Extract<NonNullable<(NonNullable<AsamStepsExpose["$router"]>)["getRoutes"]>, (...args: never[]) => unknown>>
$router.resolve: (NonNullable<AsamStepsExpose["$router"]>)["resolve"] — 依赖声明
返回 RouteLocationRaw 的规范化位置，包含带基础路径的 href；默认使用 router.currentRoute 作为 currentLocation，仅在高级场景中覆盖。
事件参数完整签名见公开类型视图。
事件参数完整签名见公开类型视图。
$router.push: (NonNullable<AsamStepsExpose["$router"]>)["push"] — 依赖声明
通过向历史栈添加记录，以编程方式导航到新 URL。
事件参数：(to: Parameters<Extract<NonNullable<(NonNullable<AsamStepsExpose["$router"]>)["push"]>, (...args: never[]) => unknown>>[0]): ReturnType<Extract<NonNullable<(NonNullable<AsamStepsExpose["$router"]>)["push"]>, (...args: never[]) => unknown>>
$router.replace: (NonNullable<AsamStepsExpose["$router"]>)["replace"] — 依赖声明
通过替换历史栈中的当前记录，以编程方式导航到新 URL。
事件参数：(to: Parameters<Extract<NonNullable<(NonNullable<AsamStepsExpose["$router"]>)["replace"]>, (...args: never[]) => unknown>>[0]): ReturnType<Extract<NonNullable<(NonNullable<AsamStepsExpose["$router"]>)["replace"]>, (...args: never[]) => unknown>>
$router.back: () => void — 依赖声明
通过 history.back() 在可用时后退，等价于 router.go(-1)。
事件参数：(): void
$router.forward: () => void — 依赖声明
通过 history.forward() 在可用时前进，等价于 router.go(1)。
事件参数：(): void
$router.go: (delta: number) => void — 依赖声明
通过调用 history.go() 在历史记录中前进或后退。
事件参数：(delta: number): void
$router.beforeEach: (NonNullable<AsamStepsExpose["$router"]>)["beforeEach"] — 依赖声明
添加每次导航之前执行的守卫，并返回移除此守卫的函数。
事件参数：(guard: Parameters<Extract<NonNullable<(NonNullable<AsamStepsExpose["$router"]>)["beforeEach"]>, (...args: never[]) => unknown>>[0]): () => void
$router.beforeResolve: (NonNullable<AsamStepsExpose["$router"]>)["beforeResolve"] — 依赖声明
添加导航确认之前执行的守卫，此时组件已获取且其他导航守卫已通过；返回移除此守卫的函数。
事件参数：(guard: Parameters<Extract<NonNullable<(NonNullable<AsamStepsExpose["$router"]>)["beforeResolve"]>, (...args: never[]) => unknown>>[0]): () => void
$router.afterEach: (NonNullable<AsamStepsExpose["$router"]>)["afterEach"] — 依赖声明
添加每次导航结束后执行的钩子，并返回移除此钩子的函数。
事件参数：(guard: Parameters<Extract<NonNullable<(NonNullable<AsamStepsExpose["$router"]>)["afterEach"]>, (...args: never[]) => unknown>>[0]): () => void
$router.onError: (NonNullable<AsamStepsExpose["$router"]>)["onError"] — 依赖声明
添加导航期间未捕获错误的处理函数，涵盖同步和异步异常、守卫返回或传给 next 的错误，以及路由异步组件解析错误。
事件参数：(handler: Parameters<Extract<NonNullable<(NonNullable<AsamStepsExpose["$router"]>)["onError"]>, (...args: never[]) => unknown>>[0]): () => void
$router.isReady: () => Promise<void> — 依赖声明
返回在初次导航完成后兑现的 Promise，此时关联的异步进入钩子与异步组件均已解析；导航已完成时立即兑现。可用于保持服务端与客户端渲染一致；服务端需手动推入初始位置，客户端从 URL 自动读取。
事件参数：(): Promise<void>
$router.install: (app: App) => void — 依赖声明
由 app.use(router) 自动调用，用户不应手动调用；客户端调用时会触发初次导航。
事件参数：(app: App<any>): void

AsamStepsStepInstance 公开类型视图

import type { ComponentPublicInstance, ComponentOptionsBase, ComponentProvideOptions, ComponentOptionsMixin, GlobalComponents, GlobalDirectives, WatchOptions, WatchStopHandle, ShallowRef, App } from 'vue';
import type { AsamStepsStepInstance, AsamStepsExpose, AsamTableColumnExpose, AsamStepProps, AsamStepSlots, AsamStepsStepProps, AsamStepsProps } from '@asam-ui/ui';

type PublicMember<T, K extends PropertyKey> = T extends unknown ? K extends keyof T ? T[K] : never : never;

// AsamStepsStepInstance
type PublicContract = {
	"$": AsamStepsExpose["$"];
	"$data": AsamTableColumnExpose;
	"$props": AsamStepProps;
	"$attrs": AsamStepsExpose["$attrs"];
	"$refs": AsamStepsExpose["$refs"];
	"$slots": AsamStepSlots;
	"$root": ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string, {}, {}, {}, string, ComponentProvideOptions>, {}, {}, "", {}, any> | null;
	"$parent": ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string, {}, {}, {}, string, ComponentProvideOptions>, {}, {}, "", {}, any> | null;
	"$host": Element | null;
	"$emit": (event: string, ...args: any[]) => void;
	"$el": any;
	"$options": (AsamStepsStepInstance)["$options"];
	"$forceUpdate": () => void;
	"$nextTick": (AsamStepsStepInstance)["$nextTick"];
	"$watch": (AsamStepsStepInstance)["$watch"];
	readonly "icon": AsamStepsStepInstance["icon"];
	readonly "title": string;
	readonly "description": string;
	readonly "status": "" | "finish" | "success" | "error" | "wait" | "process";
	"$route": AsamStepsExpose["$route"];
	"$router": AsamStepsExpose["$router"];
};

参数与事件说明

`title`

必填：否；声明来源：上游声明。

默认值与来源

未知 / 未声明

固定上游源码默认表达式：''（2.14.7；源码事实，未作为 ASAM 运行实测）

`icon`

必填：否；声明来源：上游声明。

icon 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

事件参数：(props: any, ctx: Parameters<Extract<NonNullable<AsamStepsStepInstance["icon"] | undefined>, (...args: never[]) => unknown>>[1]): any

icon.__isFragment: undefined — 依赖声明
icon.__isTeleport: undefined — 依赖声明
icon.__isSuspense: undefined — 依赖声明

默认值与来源

未知 / 未声明

固定上游源码未声明 default（2.14.7；源码事实，未作为 ASAM 运行实测）

`description`

必填：否；声明来源：上游声明。

默认值与来源

''（声明注释；上游声明）

固定上游源码默认表达式：''（2.14.7；源码事实，未作为 ASAM 运行实测）

`status`

必填：否；声明来源：上游声明。

status 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

枚举："" / "finish" / "success" / "error" / "wait" / "process"

默认值与来源

''（声明注释；上游声明）

固定上游源码默认表达式：''（2.14.7；源码事实，未作为 ASAM 运行实测）

AsamStepsStepProps 公开类型视图

import type { AsamStepsStepProps, AsamStepsProps, AsamStepsStepInstance, AsamStepsExpose } from '@asam-ui/ui';

type PublicMember<T, K extends PropertyKey> = T extends unknown ? K extends keyof T ? T[K] : never : never;

// AsamStepsStepProps
type PublicContract = {
	"title"?: string | undefined;
	"icon"?: AsamStepsStepInstance["icon"] | undefined;
	"description"?: string | undefined;
	"status"?: "" | "finish" | "success" | "error" | "wait" | "process" | undefined;
};

参数与事件说明

`title`

必填：否；声明来源：上游声明。

默认值与来源

未知 / 未声明

固定上游源码默认表达式：''（2.14.7；源码事实，未作为 ASAM 运行实测）

`icon`

必填：否；声明来源：上游声明。

icon 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

事件参数：(props: any, ctx: Parameters<Extract<NonNullable<(AsamStepsStepPropsPublic)["icon"]>, (...args: never[]) => unknown>>[1]): any

icon.__isFragment: undefined — 依赖声明
icon.__isTeleport: undefined — 依赖声明
icon.__isSuspense: undefined — 依赖声明

默认值与来源

未知 / 未声明

固定上游源码未声明 default（2.14.7；源码事实，未作为 ASAM 运行实测）

`description`

必填：否；声明来源：上游声明。

默认值与来源

未知 / 未声明

固定上游源码默认表达式：''（2.14.7；源码事实，未作为 ASAM 运行实测）

`status`

必填：否；声明来源：上游声明。

status 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

枚举："" / "finish" / "success" / "error" / "wait" / "process"

默认值与来源

未知 / 未声明

固定上游源码默认表达式：''（2.14.7；源码事实，未作为 ASAM 运行实测）

AsamStepsStepPropsPublic 公开类型视图

import type { AsamStepsStepPropsPublic, AsamStepsProps, AsamStepsExpose } from '@asam-ui/ui';

type PublicMember<T, K extends PropertyKey> = T extends unknown ? K extends keyof T ? T[K] : never : never;

// AsamStepsStepPropsPublic
type PublicContract = {
	readonly "title"?: string | undefined;
	readonly "icon"?: (AsamStepsStepPropsPublic)["icon"];
	readonly "description"?: string | undefined;
	readonly "status"?: (AsamStepsStepPropsPublic)["status"];
};

参数与事件说明

`change`

必填：是；声明来源：上游声明。

change 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

事件参数：(newVal: number, oldVal: number): boolean

AsamStepsEmits 公开类型视图

import type { AsamStepsEmits, AsamStepsExpose } from '@asam-ui/ui';

// AsamStepsEmits
type PublicContract = {
	"change": (newVal: number, oldVal: number) => boolean;
};

参数与事件说明

`direction`

必填：否；声明来源：上游声明。

direction 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

枚举："horizontal" / "vertical"

默认值与来源

未知 / 未声明

固定上游源码默认表达式：'horizontal'（2.14.7；源码事实，未作为 ASAM 运行实测）

`active`

必填：否；声明来源：上游声明。

默认值与来源

未知 / 未声明

固定上游源码默认表达式：0（2.14.7；源码事实，未作为 ASAM 运行实测）

`space`

必填：否；声明来源：上游声明。

默认值与来源

未知 / 未声明

固定上游源码默认表达式：''（2.14.7；源码事实，未作为 ASAM 运行实测）

`alignCenter`

必填：否；声明来源：上游声明。

alignCenter 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

枚举：false / true

默认值与来源

未知 / 未声明

固定上游源码未声明 default（2.14.7；源码事实，未作为 ASAM 运行实测）

`simple`

必填：否；声明来源：上游声明。

simple 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

枚举：false / true

默认值与来源

未知 / 未声明

固定上游源码未声明 default（2.14.7；源码事实，未作为 ASAM 运行实测）

`finishStatus`

必填：否；声明来源：上游声明。

finishStatus 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

枚举："finish" / "success" / "error" / "wait" / "process"

默认值与来源

未知 / 未声明

固定上游源码默认表达式：'finish'（2.14.7；源码事实，未作为 ASAM 运行实测）

`processStatus`

必填：否；声明来源：上游声明。

processStatus 参数与事件数据

下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。

枚举："finish" / "success" / "error" / "wait" / "process"

默认值与来源

未知 / 未声明

固定上游源码默认表达式：'process'（2.14.7；源码事实，未作为 ASAM 运行实测）

AsamStepsPropsPublic 公开类型视图

import type { AsamStepsPropsPublic, AsamStepsProps } from '@asam-ui/ui';

// AsamStepsPropsPublic
type PublicContract = {
	readonly "direction"?: (AsamStepsPropsPublic)["direction"];
	readonly "active"?: number | undefined;
	readonly "space"?: (AsamStepsPropsPublic)["space"];
	readonly "alignCenter"?: (AsamStepsPropsPublic)["alignCenter"];
	readonly "simple"?: (AsamStepsPropsPublic)["simple"];
	readonly "finishStatus"?: (AsamStepsPropsPublic)["finishStatus"];
	readonly "processStatus"?: (AsamStepsPropsPublic)["processStatus"];
};

组合契约按分支生效；请同时查看公开类型。

AsamStepsStatus 公开类型视图

import type { AsamStepsStatus } from '@asam-ui/ui';

// AsamStepsStatus
type PublicContract = AsamStepsStatus;

步骤条 AsamSteps

使用场景 ​

基础用法与状态 ​

基础用法与状态

使用约定 ​

完整使用场景 ​

基础用法 ​

基础用法

含状态的步骤条 ​

含状态的步骤条

居中的步骤条 ​

居中的步骤条

带描述的步骤栏 ​

文字描述

带图标的步骤条 ​

使用图标

垂直的步骤条 ​

垂直布局

简洁风格的步骤条 ​

简洁风格的步骤条

API

属性 AsamStepsProps

实例方法与状态 AsamStepsExpose

类型 AsamStepsInstance

插槽 AsamStepsSlots

类型 AsamStepsStepInstance

类型 AsamStepsStepProps

类型 AsamStepsStepPropsPublic

事件 AsamStepsEmits

类型 AsamStepsPropsPublic

类型 AsamStepsStatus

关联组件

参数与事件说明

space

默认值与来源

active

默认值与来源

direction

默认值与来源

alignCenter

默认值与来源

simple

默认值与来源

finishStatus

默认值与来源

processStatus

默认值与来源

onChange

key

ref

ref_for

ref_key

onVnodeBeforeMount

onVnodeMounted

onVnodeBeforeUpdate

onVnodeUpdated

onVnodeBeforeUnmount

onVnodeUnmounted

class

style

参数与事件说明

$

$data

$props

$attrs

$refs

$slots

$root

$parent

$host

$emit

$el

$options

$forceUpdate

$nextTick

$watch

direction

space

active

finishStatus

使用场景

基础用法与状态

使用约定

完整使用场景

基础用法

含状态的步骤条

居中的步骤条

带描述的步骤栏

带图标的步骤条

垂直的步骤条

简洁风格的步骤条

属性 `AsamStepsProps`

实例方法与状态 `AsamStepsExpose`

类型 `AsamStepsInstance`

插槽 `AsamStepsSlots`

类型 `AsamStepsStepInstance`

类型 `AsamStepsStepProps`

类型 `AsamStepsStepPropsPublic`

事件 `AsamStepsEmits`

类型 `AsamStepsPropsPublic`

类型 `AsamStepsStatus`

`space`

`active`

`direction`

`alignCenter`

`simple`

`finishStatus`

`processStatus`

`onChange`

`key`

`ref`

`ref_for`

`ref_key`

`onVnodeBeforeMount`

`onVnodeMounted`

`onVnodeBeforeUpdate`

`onVnodeUpdated`

`onVnodeBeforeUnmount`

`onVnodeUnmounted`

`class`

`style`

`$`

`$data`

`$props`

`$attrs`

`$refs`

`$slots`

`$root`

`$parent`

`$host`

`$emit`

`$el`

`$options`

`$forceUpdate`

`$nextTick`

`$watch`

`direction`

`space`

`active`

`finishStatus`

`processStatus`

`onChange`

`alignCenter`

`simple`

`$route`

`$router`

`$`

`$data`

`$props`

`$attrs`

`$refs`

`$slots`

`$root`

`$parent`

`$host`

`$emit`

`$el`

`$options`

`$forceUpdate`

`$nextTick`