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

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.

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.

Custom mask style ​

Custom mask style.

Custom indicator ​

Custom indicator.

Target ​

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

Tour API ​

TIP

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

Tour Attributes ​

Property Description Type Default
show-arrow whether to show the arrow boolean true
placement position of the guide card relative to the target element enum 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 true
type type, affects the background color and text color default | primary default
model-value / v-model open tour boolean —
current / v-model:current what is the current step number —
scroll-into-view-options support pass custom scrollIntoView options boolean | ScrollIntoViewOptions Object
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
default tourStep component list
indicators custom indicator, The scope parameter is { current, total }

Tour events ​

Name Description Type
close callback function on shutdown Function
finish callback function on finished Function
change callback when the step changes Function

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 —
show-arrow whether to show the arrow boolean true
title title string —
description description string —
placement position of the guide card relative to the target element enum 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 true
type type, affects the background color and text color default | primary default
next-button-props properties of the Next button Object —
prev-button-props properties of the previous button Object —
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 true
close-icon custom close icon, default is Close string | Component —

TourStep slots ​

Name Description
default description
header header

TourStep events ​

Name Description Arguments
close callback function on shutdown Function

Source ​

Component • Style • Docs

Contributors ​