Tour 漫游式引导

用于分步引导用户了解产品功能的气泡组件。 用来引导用户并介绍产品

基础用法

最简单的用法。

非模态

使用:mask="false"可以将引导变为非模态, 同时为了强调引导本身,建议与 type="primary" 组合使用。

位置

改变引导相对于目标的位置,共有 12 种位置可供选择。 当 target 为空时引导将会展示在正中央。

自定义遮罩样式

自定义遮罩样式。

自定义指示器

自定义指示器。

目标

可以传入目标的各种类型的参数。 自2.5.2以来支持字符串和函数类型。

Tour API

TIP

tour-step 组件上相同名称配置的优先级更高。

Tour 属性

属性描述类型默认值
show-arrow是否显示箭头booleantrue
placement引导卡片相对于目标元素的位置enumbottom
content-style为content自定义样式CSSProperties
mask是否启用遮罩,通过自定义属性改变遮罩样式以及填充的颜色boolean | Objecttrue
type类型,影响底色与文字颜色default | primarydefault
model-value / v-model打开引导boolean
current / v-model:current当前值number
scroll-into-view-options是否支持当前元素滚动到视窗内,也可传入配置指定滚动视窗的相关参数boolean | ScrollIntoViewOptionsObject
z-indexTour 的层级number2001
show-close是否显示关闭按钮booleantrue
close-icon自定义关闭图标,默认Closestring | Component
close-on-press-escape是否可以通过按下 ESC 关闭引导booleantrue
target-area-clickable启用蒙层时,target 元素区域是否可以点击。booleantrue

Tour 插槽

插槽名说明
defaulttourStep 组件列表
indicators自定义指示器, scope 参数是 { current, total }

Tour 事件

事件名描述类型
close关闭引导时的回调函数Function
finish引导完成时的回调Function
change步骤改变时的回调Function

TourStep 属性

属性描述类型默认值
target获取引导卡片指向的元素, 为空时居中于屏幕。 自2.5.2以来支持字符串和函数类型。 字符串类型是文档.querySelector的选择器。HTMLElement | string | Function
show-arrow是否显示箭头booleantrue
title标题string
description主要描述部分string
placement引导卡片相对于目标元素的位置enumbottom
content-style为content自定义样式CSSProperties
mask是否启用蒙层,也可传入配置改变蒙层样式和填充色boolean | Objecttrue
type类型,影响底色与文字颜色default | primarydefault
next-button-props“下一步”按钮的属性Object
prev-button-props“上一步”按钮的属性Object
scroll-into-view-options是否支持当前元素滚动到视窗内,也可传入配置指定滚动视窗的相关参数,默认跟随 Tour 的 scrollIntoViewOptions 属性boolean | ScrollIntoViewOptions
show-close是否显示关闭按钮booleantrue
close-icon自定义关闭图标,默认Closestring | Component

TourStep 插槽

插槽名描述
default主要描述部分
header头部

TourStep 事件

事件名描述参数
close关闭引导时的回调函数Function

源代码

组件样式文档

贡献者