---
title: Tour 漫游引导
---

# Tour 漫游引导

A popup component for guiding users through a product. Use when you want to guide users through a product.

## Basic usage

The most basic usage

:::example

tour/basic

:::

## Non modal

Use `:mask="false"` to make Tour non-modal. At the meantime it is recommended to use with `type="primary"` to emphasize the guide itself.

:::example

tour/non-modal

:::

## Placement

Change the placement of the guide relative to the target, there are 12 placements available. When `target` is empty the guide will show in the center.

:::example

tour/placement

:::

## Custom mask style

Custom mask style.

:::example

tour/mask

:::

## Custom indicator

Custom indicator.

:::example

tour/indicator

:::

## Target

Various parameter passing types of target. The string and Function types are supported since ^(2.5.2).

:::example

tour/target

:::

## Tour API

:::tip
tour-step component configuration with the same name has higher priority
:::

### Tour Attributes

| Property                  | Description                                                                      | Type                                                                                                                                                                        | Default                            |
| ------------------------- | -------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------- |
| append-to                 | which element the TourContent appends to                                         | ^[CSSSelector] / ^[HTMLElement]                                                                                                                                             | `body`                             |
| show-arrow                | whether to show the arrow                                                        | `boolean`                                                                                                                                                                   | true                               |
| placement                 | position of the guide card relative to the target element                        | ^[enum]`'top' \| 'top-start' \| 'top-end' \| 'bottom' \| 'bottom-start' \| 'bottom-end' \| 'left' \| 'left-start' \| 'left-end' \| 'right' \| 'right-start' \| 'right-end'` | `bottom`                           |
| content-style             | custom style for content                                                         | `CSSProperties`                                                                                                                                                             | —                                  |
| mask                      | whether to enable masking, change mask style and fill color by pass custom props | `boolean` \| ^[Object]`{ style?: CSSProperties; color?: string; }`                                                                                                          | `true`                             |
| gap                       | transparent gap between mask and target                                          | `TourGap`                                                                                                                                                                   | ^[Object]`{ offset: 6, radius: 2}` |
| type                      | type, affects the background color and text color                                | `default` \| `primary`                                                                                                                                                      | `default`                          |
| model-value / v-model     | open tour                                                                        | `boolean`                                                                                                                                                                   | `false`                            |
| current / v-model:current | what is the current step                                                         | `number`                                                                                                                                                                    | `0`                                |
| scroll-into-view-options  | support pass custom scrollIntoView options                                       | `boolean` \| `ScrollIntoViewOptions`                                                                                                                                        | ^[Object]`{ block: 'center' }`     |
| z-index                   | Tour's zIndex                                                                    | `number`                                                                                                                                                                    | `2001`                             |
| show-close                | whether to show a close button                                                   | `boolean`                                                                                                                                                                   | `true`                             |
| close-icon                | custom close icon, default is Close                                              | `string` \| `Component`                                                                                                                                                     | —                                  |
| close-on-press-escape     | whether the Dialog can be closed by pressing ESC                                 | `boolean`                                                                                                                                                                   | `true`                             |
| target-area-clickable     | whether the target element can be clickable, when using mask                     | `boolean`                                                                                                                                                                   | `true`                             |

### Tour slots

| Name       | Description             | Type                                          |
| ---------- | ----------------------- | --------------------------------------------- |
| default    | tourStep component list | —                                             |
| indicators | custom indicator        | ^[object]`{ current: number, total: number }` |

### Tour events

| Name   | Description                    | Type                                   |
| ------ | ------------------------------ | -------------------------------------- |
| close  | callback function on shutdown  | ^[Function]`(current: number) => void` |
| finish | callback function on finished  | ^[Function]`() => void`                |
| change | callback when the step changes | ^[Function]`(current: number) => void` |

## TourStep API

### TourStep Attributes

| Property                 | Description                                                                                                                                                                                            | Type                                                                                                                                                                        | Default   |
| ------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------- |
| target                   | get the element the guide card points to. Empty makes it show in center of screen. the string and Function types are supported since ^(2.5.2). the string type is selectors of document.querySelector. | `HTMLElement` \| `string` \| ^[Function]`() => HTMLElement`                                                                                                                 | —         |
| show-arrow               | whether to show the arrow                                                                                                                                                                              | `boolean`                                                                                                                                                                   | —         |
| title                    | title                                                                                                                                                                                                  | `string`                                                                                                                                                                    | —         |
| description              | description                                                                                                                                                                                            | `string`                                                                                                                                                                    | —         |
| placement                | position of the guide card relative to the target element                                                                                                                                              | ^[enum]`'top' \| 'top-start' \| 'top-end' \| 'bottom' \| 'bottom-start' \| 'bottom-end' \| 'left' \| 'left-start' \| 'left-end' \| 'right' \| 'right-start' \| 'right-end'` | `bottom`  |
| content-style            | custom style for content                                                                                                                                                                               | `CSSProperties`                                                                                                                                                             | —         |
| mask                     | whether to enable masking, change mask style and fill color by pass custom props                                                                                                                       | `boolean` \| ^[Object]`{ style?: CSSProperties; color?: string; }`                                                                                                          | —         |
| type                     | type, affects the background color and text color                                                                                                                                                      | `default` \| `primary`                                                                                                                                                      | `default` |
| next-button-props        | properties of the Next button                                                                                                                                                                          | ^[Object]`{ children: VueNode \| string; onClick: Function }`                                                                                                               | —         |
| prev-button-props        | properties of the previous button                                                                                                                                                                      | ^[Object]`{ children: VueNode \| string; onClick: Function }`                                                                                                               | —         |
| scroll-into-view-options | support pass custom scrollIntoView options, the default follows the `scrollIntoViewOptions` property of Tour                                                                                           | `boolean` \| `ScrollIntoViewOptions`                                                                                                                                        | —         |
| show-close               | whether to show a close button                                                                                                                                                                         | `boolean`                                                                                                                                                                   | —         |
| close-icon               | custom close icon, default is Close                                                                                                                                                                    | `string` \| `Component`                                                                                                                                                     | —         |

### TourStep slots

| Name    | Description           |
| ------- | --------------------- |
| default | custom description    |
| header  | custom header content |

### TourStep events

| Name  | Description                   | Arguments               |
| ----- | ----------------------------- | ----------------------- |
| close | callback function on shutdown | ^[Function]`() => void` |