ant-design-vue/components/tour/index.zh-CN.md
2023-11-11 10:25:16 +08:00

62 lines
3.7 KiB
Markdown
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

---
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` | - | |