漫游

一个用于引导用户浏览产品的弹出式组件。当您想要引导用户浏览产品时使用。

基础用法

最基本的使用

使用 :mask="false" 使漫游变为非模态。同时，建议与 type="primary" 一起使用以强调引导本身。

位置

更改引导相对于目标的位置，共有12个位置可用。当 target 为空时，引导将显示在中心。

自定义遮罩样式

自定义遮罩样式。

自定义指示器

自定义指示器。

目标

目标的各种参数传递类型。字符串和函数类型自 2.5.2 起支持。

漫游 API

提示

同名的 tour-step 组件配置具有更高的优先级

漫游属性

属性	描述	类型	默认值
append-to	TourContent 附加到的元素	`CSSSelector` / `HTMLElement`	`body`
show-arrow	是否显示箭头	`boolean`	true
placement	引导卡相对于目标元素的位置	`枚举`	`bottom`
内容样式	内容的自定义样式	`CSSProperties`	—
遮罩	是否启用遮罩，通过传递自定义属性来更改遮罩样式和填充颜色	`boolean` \| `Object`	`true`
间隙	遮罩和目标之间的透明间隙	`TourGap`	`对象`
type	类型，影响背景颜色和文本颜色	`default` \| `primary`	`default`
model-value / v-model	打开漫游	`boolean`	—
当前 / v-model:current	当前是第几步	`number`	—
scroll-into-view-options	支持传递自定义的 scrollIntoView 选项	`boolean` \| `ScrollIntoViewOptions`	`对象`
z-index	漫游的 zIndex	`number`	`2001`
show-close	是否显示关闭按钮	`boolean`	`true`
close-icon	自定义关闭图标，默认为 Close	`string` \| `Component`	—
close-on-press-escape	对话框是否可以通过按 ESC 关闭	`boolean`	`true`
target-area-clickable	使用遮罩时，目标元素是否可点击	`boolean`	`true`

漫游插槽

名称	描述
default	tourStep 组件列表
指示器	自定义指示器，作用域参数为 `{ current, total }`

漫游事件

名称	描述	类型
关闭	关闭时的回调函数	`Function`
finish	完成时的回调函数	`Function`
change	步骤改变时的回调	`Function`

TourStep 属性

属性	描述	类型	默认值
target	获取引导卡指向的元素。为空时显示在屏幕中央。字符串和函数类型自 2.5.2 起支持。字符串类型是 document.querySelector 的选择器。	`HTMLElement` \| `string` \| `Function`	—
show-arrow	是否显示箭头	`boolean`	`true`
title	title	`string`	—
description	description	`string`	—
placement	引导卡相对于目标元素的位置	`枚举`	`bottom`
内容样式	内容的自定义样式	`CSSProperties`	—
遮罩	是否启用遮罩，通过传递自定义属性来更改遮罩样式和填充颜色	`boolean` \| `Object`	`true`
type	类型，影响背景颜色和文本颜色	`default` \| `primary`	`default`
next-button-props	“下一步”按钮的属性	`对象`	—
prev-button-props	“上一步”按钮的属性	`对象`	—
scroll-into-view-options	支持传递自定义的 scrollIntoView 选项，默认遵循 Tour 的 `scrollIntoViewOptions` 属性	`boolean` \| `ScrollIntoViewOptions`	—
show-close	是否显示关闭按钮	`boolean`	`true`
close-icon	自定义关闭图标，默认为 Close	`string` \| `Component`	—

TourStep 插槽

名称	描述
default	description
header	header

TourStep 事件

名称	描述	参数
关闭	关闭时的回调函数	`Function`

来源

组件 • 样式 • 文档

贡献者