使用场景
在 Tour 中描述一个目标及其操作说明。
步骤内容与局部目标
第一步指向按钮，第二步通过 header/default 插槽说明后续操作。
步骤内容与局部目标
<template>
<AsamButton type="default" native-type="button" @click="open = true">开始导览</AsamButton>
<AsamButton type="default" ref="target" native-type="button">导览目标</AsamButton>
<AsamTour v-model="open" v-model:current="current" @finish="finished++">
<AsamTourStep :target="target?.ref" title="第一步" description="这里展示目标说明。" />
<AsamTourStep title="完成导览">
<template #header>下一步操作</template>
<p class="example-paragraph">没有目标的步骤使用居中展示。</p>
</AsamTourStep>
<template #indicators="{ current: index, total }">{{ index + 1 }} / {{ total }}</template>
</AsamTour>
<p class="example-paragraph" role="status">当前步骤 {{ current + 1 }}；完成 {{ finished }} 次</p>
</template>
<script lang="ts" setup>
defineOptions({ name: 'AsamTourStepBasicDemo' });
import { ref } from 'vue';
import { AsamButton, type AsamButtonExpose, AsamTour, AsamTourStep } from '@asam-ui/ui';
const open = ref(false);
const current = ref(0);
const finished = ref(0);
const target = ref<AsamButtonExpose>();
</script>
<style scoped>
p:where(.example-paragraph) {
margin-block: 16px;
line-height: 1.8;
overflow-wrap: anywhere;
}
</style><template>
<AsamButton type="default" native-type="button" @click="open = true">开始导览</AsamButton>
<AsamButton type="default" ref="target" native-type="button">导览目标</AsamButton>
<AsamTour v-model="open" v-model:current="current" @finish="finished++">
<AsamTourStep :target="target?.ref" title="第一步" description="这里展示目标说明。" />
<AsamTourStep title="完成导览">
<template #header>下一步操作</template>
<p class="example-paragraph">没有目标的步骤使用居中展示。</p>
</AsamTourStep>
<template #indicators="{ current: index, total }">{{ index + 1 }} / {{ total }}</template>
</AsamTour>
<p class="example-paragraph" role="status">当前步骤 {{ current + 1 }}；完成 {{ finished }} 次</p>
</template>
<script setup>
defineOptions({ name: 'AsamTourStepBasicDemo' });
import { ref } from 'vue';
import { AsamButton, AsamTour, AsamTourStep } from '@asam-ui/ui';
const open = ref(false);
const current = ref(0);
const finished = ref(0);
const target = ref();
</script>
<style scoped>
p:where(.example-paragraph) {
margin-block: 16px;
line-height: 1.8;
overflow-wrap: anywhere;
}
</style>使用约定
target 可接收元素、选择器或目标函数；title/description 提供文案，header/default 插槽提供自定义内容。 完整说明。
组合职责与生命周期
仅在 AsamTour 下组织步骤，target 决定目标，title/description 或 header/default 插槽提供内容。 完整说明。
原生入口
根导入与组件 deep 入口均提供同一个 AsamTourStep。可在 AsamTour 中直接组织循环、条件与多组步骤；props、close 和 header/default 插槽使用原生签名。
API
属性 AsamTourStepProps
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
target | — | string | HTMLElement | (() => HTMLElement | null) | null | undefined | — |
title | — | string | undefined | — |
description | — | string | undefined | — |
showClose | — | boolean | undefined | undefined |
closeIcon | — | (AsamTourStepProps)["closeIcon"] | — |
showArrow | — | boolean | undefined | undefined |
placement | — | enum"top" | "bottom" | "right" | "left" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end"完整类型：AsamTourPlacement | undefined | "bottom" |
mask | — | (AsamTourStepProps)["mask"] | undefined |
contentStyle | — | import("vue").CSSProperties | undefined | — |
prevButtonProps | — | (AsamTourStepProps)["prevButtonProps"] | — |
nextButtonProps | — | (AsamTourStepProps)["nextButtonProps"] | — |
scrollIntoViewOptions | — | boolean | ScrollIntoViewOptions | undefined | undefined |
type | — | enum"default" | "primary"完整类型："default" | "primary" | undefined | — |
事件 AsamTourStepEmits
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
close | — | (AsamTourStepEmits)["close"] | — |
插槽 AsamTourStepSlots
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
default | — | (() => unknown) | undefined | — |
header | — | (() => unknown) | undefined | — |
用法与契约补充说明
使用约定
target 可接收元素、选择器或目标函数；title/description 提供文案，header/default 插槽提供自定义内容。步骤可覆盖 placement、mask、showArrow、scrollIntoViewOptions 与按钮属性；close 事件属于当前步骤。必须在 AsamTour 中使用，无目标步骤居中展示，无独立 size 或 expose。
组合职责与生命周期
仅在 AsamTour 下组织步骤，target 决定目标，title/description 或 header/default 插槽提供内容。placement/showArrow/mask/contentStyle/scrollIntoViewOptions 可覆盖父级；prevButtonProps/nextButtonProps 定制当前步骤导航，close 观察本步关闭。步骤可使用选择器、元素 ref 或函数目标，父级统一控制 current、finish 和生命周期。
关联组件
参数与事件补充说明
固定 2.14.7 公开参数；运行时默认值来自已安装组件。
参数与事件说明
target
必填：否；声明来源：ASAM 声明。
target 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(): HTMLElement | null
嵌套展开边界：大型实例类型；完整类型见公开类型视图。
默认值与来源
未知 / 未声明固定上游源码未声明 default（2.14.7；源码事实，未作为 ASAM 运行实测）
title
必填：否；声明来源：ASAM 声明。
description
必填：否；声明来源：ASAM 声明。
showClose
必填：否；声明来源：ASAM 声明。
showClose 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
undefined（已安装运行时；已安装组件）固定上游源码默认表达式：undefined（2.14.7；源码事实，未作为 ASAM 运行实测）
closeIcon
必填：否；声明来源：ASAM 声明。
closeIcon 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(props: any, ctx: Parameters<Extract<NonNullable<(AsamTourStepProps)["closeIcon"]>, (...args: never[]) => unknown>>[1]): any
closeIcon.__isFragment:undefined— 依赖声明closeIcon.__isTeleport:undefined— 依赖声明closeIcon.__isSuspense:undefined— 依赖声明
默认值与来源
未知 / 未声明固定上游源码未声明 default（2.14.7；源码事实，未作为 ASAM 运行实测）
showArrow
必填：否；声明来源：ASAM 声明。
showArrow 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
undefined（已安装运行时；已安装组件）固定上游源码默认表达式：undefined（2.14.7；源码事实，未作为 ASAM 运行实测）
placement
必填：否；声明来源：ASAM 声明。
placement 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举："top" / "bottom" / "right" / "left" / "top-start" / "top-end" / "bottom-start" / "bottom-end" / "right-start" / "right-end" / "left-start" / "left-end"
默认值与来源
"bottom"（已安装运行时；已安装组件）mask
必填：否；声明来源：ASAM 声明。
mask 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
mask.style:CSSProperties | undefined— 上游声明嵌套展开边界：大型实例类型；完整类型见公开类型视图。
mask.color:string | undefined— 上游声明
默认值与来源
undefined（已安装运行时；已安装组件）固定上游源码默认表达式：undefined（2.14.7；源码事实，未作为 ASAM 运行实测）
contentStyle
必填：否；声明来源：ASAM 声明。
contentStyle 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
嵌套展开边界：大型实例类型；完整类型见公开类型视图。
默认值与来源
未知 / 未声明固定上游源码未声明 default（2.14.7；源码事实，未作为 ASAM 运行实测）
prevButtonProps
必填：否；声明来源：ASAM 声明。
默认值与来源
未知 / 未声明固定上游源码未声明 default（2.14.7；源码事实，未作为 ASAM 运行实测）
nextButtonProps
必填：否；声明来源：ASAM 声明。
默认值与来源
未知 / 未声明固定上游源码未声明 default（2.14.7；源码事实，未作为 ASAM 运行实测）
scrollIntoViewOptions
必填：否；声明来源：ASAM 声明。
scrollIntoViewOptions 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
scrollIntoViewOptions.block:ScrollLogicalPosition | undefined— 依赖声明枚举：
"start"/"center"/"end"/"nearest"scrollIntoViewOptions.inline:ScrollLogicalPosition | undefined— 依赖声明枚举：
"start"/"center"/"end"/"nearest"scrollIntoViewOptions.behavior:ScrollBehavior | undefined— 依赖声明枚举：
"auto"/"smooth"/"instant"
默认值与来源
undefined（已安装运行时；已安装组件）固定上游源码默认表达式：undefined（2.14.7；源码事实，未作为 ASAM 运行实测）
type
必填：否；声明来源：ASAM 声明。
type 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举："default" / "primary"
默认值与来源
未知 / 未声明固定上游源码未声明 default（2.14.7；源码事实，未作为 ASAM 运行实测）
AsamTourStepProps 公开类型视图
import type { Attrs, CSSProperties } from 'vue';
import type { AsamTourStepProps, AsamTourPlacement } from '@asam-ui/ui';
type PublicMember<T, K extends PropertyKey> = T extends unknown ? K extends keyof T ? T[K] : never : never;
// AsamTourStepProps
type PublicContract = {
"target"?: string | HTMLElement | (() => HTMLElement | null) | null | undefined;
"title"?: string | undefined;
"description"?: string | undefined;
"showClose"?: boolean | undefined;
"closeIcon"?: (AsamTourStepProps)["closeIcon"];
"showArrow"?: boolean | undefined;
"placement"?: AsamTourPlacement | undefined;
"mask"?: (AsamTourStepProps)["mask"];
"contentStyle"?: import("vue").CSSProperties | undefined;
"prevButtonProps"?: (AsamTourStepProps)["prevButtonProps"];
"nextButtonProps"?: (AsamTourStepProps)["nextButtonProps"];
"scrollIntoViewOptions"?: boolean | ScrollIntoViewOptions | undefined;
"type"?: "default" | "primary" | undefined;
};参数与事件说明
close
必填：是；声明来源：ASAM 声明。
AsamTourStepEmits 公开类型视图
import type { AsamTourStepEmits } from '@asam-ui/ui';
// AsamTourStepEmits
type PublicContract = {
"close": (AsamTourStepEmits)["close"];
};参数与事件说明
default
必填：否；声明来源：ASAM 声明。
default 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(): unknown
header
必填：否；声明来源：ASAM 声明。
header 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(): unknown
AsamTourStepSlots 公开类型视图
import type { AsamTourStepSlots } from '@asam-ui/ui';
// AsamTourStepSlots
type PublicContract = {
"default"?: (() => unknown) | undefined;
"header"?: (() => unknown) | undefined;
};