---
url: /components/tour.md
---
# Tour 新手引导

分步引导组件：聚光遮罩高亮目标元素（超大 box-shadow 挖洞），卡片自动避让定位，滚动/缩放自动跟随。支持 v-model 步进、键盘操作（Esc 跳过、←→ 步进）。

## 基础用法

## 用法说明

```vue
<eb-tour v-model="step" :steps="steps" @finish="onFinish" />

// steps: [{ target: '#id 或 Element', title, description }]
```

`v-model` 为当前步骤索引，置 `-1` 关闭；目标元素不存在时该步自动跳过定位。

## Tour API

### Props

| 名称 | 类型 | 默认值 | 说明 |
| --- | --- | --- | --- |
| steps | Array | `[]` | 步骤定义 `{ target, title, description, placement? }` |
| modelValue | Number | `-1` | 当前步骤（v-model） |
| gap | Number | `8` | 高亮框四周留白 |
| mask-color | String | `rgba(0,0,0,.5)` | 遮罩颜色 |
| close-on-mask | Boolean | `false` | 点击遮罩跳过 |
| keyboard | Boolean | `true` | 键盘步进/跳过 |
| z-index | Number | `3000` | 层级 |

### 事件

`change(index)`、`finish`、`skip`；插槽 `title`、`default` 自定义卡片内容。