|
|
---
|
|
|
category: Components
|
|
|
type: 数据展示
|
|
|
title: Tour
|
|
|
subtitle: 漫游式引导
|
|
|
cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*8CC_Tbe3_e4AAAAAAAAAAAAADrJ8AQ/original
|
|
|
coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*nF6hQpM0XtEAAAAAAAAAAAAADrJ8AQ/original
|
|
|
tag: New
|
|
|
---
|
|
|
|
|
|
用于分步引导用户了解产品功能的气泡组件。自 `4.0.0` 版本开始提供该组件。
|
|
|
|
|
|
## 何时使用
|
|
|
|
|
|
常用于引导用户了解产品功能。
|
|
|
|
|
|
## API
|
|
|
|
|
|
### Tour
|
|
|
|
|
|
| 属性 | 说明 | 类型 | 默认值 | 版本 |
|
|
|
| --- | --- | --- | --- | --- |
|
|
|
| arrow | 是否显示箭头，包含是否指向元素中心的配置 | `boolean` \| `{ pointAtCenter: boolean}` | `true` | |
|
|
|
| placement | 引导卡片相对于目标元素的位置 | `left` `leftTop` `leftBottom` `right` `rightTop` `rightBottom` `top` `topLeft` `topRight` `bottom` `bottomLeft` `bottomRight` | `bottom` | |
|
|
|
| mask | 是否启用蒙层，也可传入配置改变蒙层样式和填充色 | `boolean` \| `{ style?: CSSProperties; color?: string; }` | `true` | |
|
|
|
| type | 类型，影响底色与文字颜色 | `default` \| `primary` | `default` | |
|
|
|
| open | 打开引导 | `boolean` | - | |
|
|
|
| current(v-model) | 当前处于哪一步 | `number` | - | |
|
|
|
| scrollIntoViewOptions | 是否支持当前元素滚动到视窗内，也可传入配置指定滚动视窗的相关参数 | `boolean` \| `ScrollIntoViewOptions` | `true` | |
|
|
|
| indicatorsRender | 自定义指示器 | `v-slot:indicatorsRender="{current, total}"` | - | |
|
|
|
| zIndex | Tour 的层级 | `number` | `1001` | |
|
|
|
|
|
|
### Tour events
|
|
|
|
|
|
| 事件名称 | 说明 | 回调参数 | 版本 |
|
|
|
| -------- | ---------------------------------------- | --------------------------- | ---- | --- |
|
|
|
| close | 关闭引导时的回调函数 | `Function` | - | |
|
|
|
| finish | 引导完成时的回调 | `Function` | - | |
|
|
|
| change | 步骤改变时的回调，current 为当前前的步骤 | `(current: number) => void` | - | |
|
|
|
|
|
|
### TourStep 引导步骤卡片
|
|
|
|
|
|
| 属性 | 说明 | 类型 | 默认值 | 版本 |
|
|
|
| --- | --- | --- | --- | --- |
|
|
|
| target | 获取引导卡片指向的元素，为空时居中于屏幕 | `() => HTMLElement` \| `HTMLElement` | - | |
|
|
|
| arrow | 是否显示箭头，包含是否指向元素中心的配置 | `boolean` \| `{ pointAtCenter: boolean}` | `true` | |
|
|
|
| cover | 展示的图片或者视频 | `VueNode` | - | |
|
|
|
| title | 标题 | `VueNode` | - | |
|
|
|
| description | 主要描述部分 | `VueNode` | - | |
|
|
|
| placement | 引导卡片相对于目标元素的位置 | `left` `leftTop` `leftBottom` `right` `rightTop` `rightBottom` `top` `topLeft` `topRight` `bottom` `bottomLeft` `bottomRight` `bottom` | | |
|
|
|
| mask | 是否启用蒙层，也可传入配置改变蒙层样式和填充色，默认跟随 Tour 的 `mask` 属性 | `boolean` \| `{ style?: CSSProperties; color?: string; }` | `true` | |
|
|
|
| type | 类型，影响底色与文字颜色 | `default` \| `primary` | `default` | |
|
|
|
| nextButtonProps | 下一步按钮的属性 | `{ children: VueNode; onClick: Function }` | - | |
|
|
|
| prevButtonProps | 上一步按钮的属性 | `{ children: VueNode; onClick: Function }` | - | |
|
|
|
| scrollIntoViewOptions | 是否支持当前元素滚动到视窗内，也可传入配置指定滚动视窗的相关参数，默认跟随 Tour 的 `scrollIntoViewOptions` 属性 | `boolean` \| `ScrollIntoViewOptions` | `true` | |
|
|
|
|
|
|
### TourStep events
|
|
|
|
|
|
| 事件名称 | 说明 | 回调参数 | 版本 |
|
|
|
| -------- | -------------------- | ---------- | ---- | --- |
|
|
|
| close | 关闭引导时的回调函数 | `Function` | - | |
|
