Tour 漫游式引导
用于分步引导用户了解产品功能的气泡组件。通过高亮目标区域并展示引导提示，帮助用户快速熟悉产品功能。
综合演示
模拟一个简洁的管理后台界面，点击「开始引导」开启完整的漫游式引导流程。
1,280
总订单
86%
完成率
¥52.8k
总收入
快捷操作区
基础用法
最简单的引导，通过 steps 定义引导步骤，使用 v-model:open 控制显隐。
弹出位置
通过 placement 属性设置气泡弹出方向，支持 12 个方位。
无遮罩模式
设置 mask 为 false 关闭遮罩，用户可以正常操作页面其他区域。
自定义按钮文字
通过 prevText、nextText、finishText 自定义底部按钮文字。
自定义步骤内容
使用 #step-{index} 作用域插槽自定义每一步的描述内容。
事件回调
监听 change、close、finish 事件，获取引导流程的状态变化。
Props
| 参数 | 类型 | 默认值 | 说明 |
|---|---|---|---|
steps | TourStep[] | — | 引导步骤数据（必填） |
current | number | 0 | 当前步骤索引，支持 v-model:current |
open | boolean | false | 是否显示引导，支持 v-model:open |
placement | Placement | 'bottom' | 气泡默认弹出位置，可被步骤单独覆盖 |
mask | boolean | true | 是否显示遮罩 |
showClose | boolean | true | 是否显示关闭按钮 |
closeOnOverlay | boolean | true | 点击遮罩是否关闭引导 |
scrollIntoView | boolean | true | 是否自动滚动到目标元素 |
prevText | string | '上一步' | 上一步按钮文字 |
nextText | string | '下一步' | 下一步按钮文字 |
finishText | string | '完成' | 完成按钮文字 |
gap | number | 8 | 气泡与目标元素的间距（px） |
TourStep
| 参数 | 类型 | 默认值 | 说明 |
|---|---|---|---|
target | string | — | 目标元素 CSS 选择器（必填） |
title | string | — | 步骤标题 |
description | string | — | 步骤描述内容 |
placement | Placement | — | 该步骤的弹出位置，优先级高于全局 placement |
Events
| 事件名 | 类型 | 说明 |
|---|---|---|
change | (current: number) => void | 当前步骤变化时触发 |
close | (current: number) => void | 关闭引导时触发 |
finish | () => void | 引导完成时触发 |
Slots
| 插槽名 | 说明 |
|---|---|
step-{index} | 自定义第 index 步的内容，作用域参数 { step, current } |
Methods
| 方法名 | 类型 | 说明 |
|---|---|---|
updatePos | () => void | 手动更新气泡位置 |