Tour 漫游式引导
用于分步引导用户了解产品功能的气泡组件。 用来引导用户并介绍产品
基础用法
最简单的用法。
非模态
使用:mask="false"可以将引导变为非模态， 同时为了强调引导本身，建议与 type="primary" 组合使用。
位置
改变引导相对于目标的位置，共有 12 种位置可供选择。 当 target 为空时引导将会展示在正中央。
自定义遮罩样式
自定义遮罩样式。
自定义指示器
自定义指示器。
目标
可以传入目标的各种类型的参数。 自2.5.2以来支持字符串和函数类型。
Tour API
TIP
tour-step 组件上相同名称配置的优先级更高。
Tour 属性
| 属性 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| show-arrow | 是否显示箭头 | boolean | true |
| placement | 引导卡片相对于目标元素的位置 | enum | bottom |
| content-style | 为content自定义样式 | CSSProperties | - |
| mask | 是否启用遮罩，通过自定义属性改变遮罩样式以及填充的颜色 | boolean | Object | true |
| type | 类型，影响底色与文字颜色 | default | primary | default |
| model-value / v-model | 打开引导 | boolean | * |
| current / v-model:current | 当前值 | number | - |
| scroll-into-view-options | 是否支持当前元素滚动到视窗内，也可传入配置指定滚动视窗的相关参数 | boolean | ScrollIntoViewOptions | Object |
| z-index | Tour 的层级 | number | 2001 |
| show-close | 是否显示关闭按钮 | boolean | true |
| close-icon | 自定义关闭图标，默认Close | string | Component | * |
| close-on-press-escape | 是否可以通过按下 ESC 关闭引导 | boolean | true |
| target-area-clickable | 启用蒙层时，target 元素区域是否可以点击。 | boolean | true |
Tour 插槽
| 插槽名 | 说明 |
|---|---|
| default | tourStep 组件列表 |
| indicators | 自定义指示器, scope 参数是 { current, total } |
Tour 事件
| 事件名 | 描述 | 类型 |
|---|---|---|
| close | 关闭引导时的回调函数 | Function |
| finish | 引导完成时的回调 | Function |
| change | 步骤改变时的回调 | Function |
TourStep 属性
| 属性 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| target | 获取引导卡片指向的元素， 为空时居中于屏幕。 自2.5.2以来支持字符串和函数类型。 字符串类型是文档.querySelector的选择器。 | HTMLElement | string | Function | - |
| show-arrow | 是否显示箭头 | boolean | true |
| title | 标题 | string | * |
| description | 主要描述部分 | string | - |
| placement | 引导卡片相对于目标元素的位置 | enum | bottom |
| content-style | 为content自定义样式 | CSSProperties | * |
| mask | 是否启用蒙层，也可传入配置改变蒙层样式和填充色 | boolean | Object | true |
| type | 类型，影响底色与文字颜色 | default | primary | default |
| next-button-props | “下一步”按钮的属性 | Object | - |
| prev-button-props | “上一步”按钮的属性 | Object | * |
| scroll-into-view-options | 是否支持当前元素滚动到视窗内，也可传入配置指定滚动视窗的相关参数，默认跟随 Tour 的 scrollIntoViewOptions 属性 | boolean | ScrollIntoViewOptions | - |
| show-close | 是否显示关闭按钮 | boolean | true |
| close-icon | 自定义关闭图标，默认Close | string | Component | * |
TourStep 插槽
| 插槽名 | 描述 |
|---|---|
| default | 主要描述部分 |
| header | 头部 |
TourStep 事件
| 事件名 | 描述 | 参数 |
|---|---|---|
| close | 关闭引导时的回调函数 | Function |
赵添
btea
otto
sea
qiang
kooriookami
wzc520pyfm