Tour 漫游式引导
用于分步引导用户了解产品功能的气泡组件。
ts
import { createApp } from 'vue'
import { ElTour, ElTourStep } from '@szhn/dh-design-pc'
const app = createApp()
app.use(ElTour)
app.use(ElTourStep)基础用法
最简单的用法，通过 steps 属性描述每一步的目标与内容。
使用 TourStep 组件
也可以使用 el-tour-step 以插槽方式声明步骤，便于自定义内容。
非模态
设置 :mask="false" 可以将引导变为非模态，建议与 type="primary" 组合使用以强调引导。
位置
通过 placement 属性改变引导相对于目标的位置，共有 12 种位置可选。
主题类型
通过 type="primary" 切换引导主题风格。
自定义遮罩样式
通过 mask 传入对象，可自定义遮罩颜色、样式以及与目标元素之间的间距。
自定义指示器
使用 indicators 插槽可以完全自定义底部的步骤指示器。
目标
target 支持 string（选择器）、HTMLElement、() => HTMLElement 以及空值（居中展示）。
API
Tour Attributes
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| model-value / v-model | 是否打开引导 | boolean | false |
| current / v-model:current | 当前步骤 | number | 0 |
| mask | 是否启用遮罩，也可传入 { color, style } 自定义 | boolean | object | true |
| type | 主题类型 | 'default' | 'primary' | default |
| placement | 卡片相对于目标的位置 | enum（12 种） | bottom |
| content-style | content 自定义样式 | CSSProperties | — |
| show-arrow | 是否显示箭头 | boolean | true |
| show-close | 是否显示关闭按钮 | boolean | true |
| close-icon | 自定义关闭图标 | string | Component | — |
| close-on-press-escape | 是否可以通过 ESC 关闭 | boolean | true |
| target-area-clickable | 启用蒙层时 target 区域是否可点击 | boolean | true |
| gap | 遮罩与目标之间的透明间距 | TourGap | { offset: 6, radius: 2 } |
| append-to | 挂载到的 DOM 元素 | CSSSelector | HTMLElement | body |
| scroll-into-view-options | 滚动到视窗的参数 | boolean | ScrollIntoViewOptions | {} |
| z-index | Tour 的层级 | number | 2001 |
Tour Events
| 事件名 | 说明 | 参数 |
|---|---|---|
| close | 关闭引导时的回调 | (current: number) => void |
| finish | 完成引导时的回调 | () => void |
| change | 步骤切换时的回调 | (current: number) => void |
Tour Slots
| 插槽名 | 说明 | 作用域 |
|---|---|---|
| default | TourStep 组件列表 | — |
| indicators | 自定义指示器 | { current, total } |
TourStep Attributes
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| target | 目标元素 | string | HTMLElement | () => HTMLElement | — |
| title | 步骤标题 | string | — |
| description | 步骤描述 | string | — |
| placement | 卡片位置 | enum | bottom |
| content-style | content 自定义样式 | CSSProperties | — |
| mask | 是否启用蒙层（可覆盖 Tour 的 mask） | boolean | object | — |
| type | 主题类型 | 'default' | 'primary' | — |
| show-arrow | 是否显示箭头 | boolean | — |
| show-close | 是否显示关闭按钮 | boolean | — |
| close-icon | 自定义关闭图标 | string | Component | — |
| next-button-props | "下一步" 按钮属性 | object | — |
| prev-button-props | "上一步" 按钮属性 | object | — |
| scroll-into-view-options | 滚动参数（跟随 Tour） | boolean | ScrollIntoViewOptions | — |
TourStep Slots
| 插槽名 | 说明 |
|---|---|
| default | 自定义描述内容 |
| header | 自定义 header 内容 |
TourStep Events
| 事件名 | 说明 | 参数 |
|---|---|---|
| close | 关闭引导时的回调 | () => void |
更多内容见 Element Plus Tour 文档。