Tour 漫游式引导
用于分步引导用户了解产品功能的气泡组件。当你希望引导用户了解某个产品时使用。
基础用法
最基本的使用
非模态
使用 :mask="false" 来让引导变为非模态。同时建议配合使用 type="primary" 以强调引导本身。
位置
改变引导相对于目标的位置，有 12 个可用的位置。当 target 为空时，引导将显示在中心。
自定义遮罩层样式
自定义遮罩层样式。
自定义指示器
自定义指示器。
目标
target 的多种参数传递类型。字符串和函数类型自 2.5.2 起支持。
Tour API
提示
tour-step 组件的同名配置具有更高的优先级
Tour 属性
| 属性 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| append-to | TourContent 附加到的元素 | CSSSelector / HTMLElement | body |
| show-arrow | 是否显示箭头 | boolean | true |
| placement | 引导卡片相对于目标元素的位置 | 枚举 | bottom |
| content-style | 内容的自定义样式 | CSSProperties | — |
| mask | 是否启用遮罩，通过传递自定义属性来更改遮罩样式和填充颜色 | boolean | Object | true |
| gap | 遮罩和目标之间的透明间隙 | TourGap | 对象 |
| type | 类型，影响背景颜色和文本颜色 | default | primary | default |
| model-value / v-model | 打开引导 | boolean | false |
| current / v-model:current | 当前是哪一步 | number | 0 |
| scroll-into-view-options | 支持传递自定义的 scrollIntoView 选项 | boolean | ScrollIntoViewOptions | 对象 |
| z-index | Tour 的 zIndex | number | 2001 |
| show-close | 是否显示关闭按钮 | boolean | true |
| close-icon | 自定义关闭图标，默认为 Close | string | Component | — |
| close-on-press-escape | 是否可以通过按 ESC 关闭对话框 | boolean | true |
| target-area-clickable | 使用遮罩时，目标元素是否可点击 | boolean | true |
Tour 插槽
| 名称 | 描述 | 类型 |
|---|---|---|
| default | tourStep 组件列表 | — |
| indicators | 自定义指示器 | object |
Tour 事件
| 名称 | 描述 | 类型 |
|---|---|---|
| 关闭 | 关闭时的回调函数 | Function |
| finish | 完成时的回调函数 | Function |
| change | 步骤改变时的回调 | Function |
TourStep API
TourStep 属性
| 属性 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| target | 获取引导卡片指向的元素。为空时使其在屏幕中央显示。字符串和函数类型自 2.5.2 起支持。字符串类型是 document.querySelector 的选择器。 | HTMLElement | string | Function | — |
| show-arrow | 是否显示箭头 | boolean | — |
| title | title | string | — |
| description | description | string | — |
| placement | 引导卡片相对于目标元素的位置 | 枚举 | bottom |
| content-style | 内容的自定义样式 | CSSProperties | — |
| mask | 是否启用遮罩，通过传递自定义属性来更改遮罩样式和填充颜色 | boolean | Object | — |
| type | 类型，影响背景颜色和文本颜色 | default | primary | default |
| next-button-props | “下一步”按钮的属性 | 对象 | — |
| prev-button-props | “上一步”按钮的属性 | 对象 | — |
| scroll-into-view-options | 支持传递自定义的 scrollIntoView 选项，默认遵循 Tour 的 scrollIntoViewOptions 属性 | boolean | ScrollIntoViewOptions | — |
| show-close | 是否显示关闭按钮 | boolean | — |
| close-icon | 自定义关闭图标，默认为 Close | string | Component | — |
TourStep 插槽
| 名称 | 描述 |
|---|---|
| default | 自定义描述 |
| header | 自定义头部内容 |
TourStep 事件
| 名称 | 描述 | 参数 |
|---|---|---|
| 关闭 | 关闭时的回调函数 | Function |
来源
贡献者
