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

PropertyDescriptionTypeDefault
show-arrowwhether to show the arrowbooleantrue
placementposition of the guide card relative to the target elementenumbottom
content-stylecustom style for contentCSSProperties
maskwhether to enable masking, change mask style and fill color by pass custom propsboolean | Objecttrue
typetype, affects the background color and text colordefault | primarydefault
model-value / v-modelopen tourboolean
current / v-model:currentwhat is the current stepnumber
scroll-into-view-optionssupport pass custom scrollIntoView optionsboolean | ScrollIntoViewOptionsObject
z-indexTour's zIndexnumber2001
show-closewhether to show a close buttonbooleantrue
close-iconcustom close icon, default is Closestring | Component
close-on-press-escapewhether the Dialog can be closed by pressing ESCbooleantrue
target-area-clickablewhether the target element can be clickable, when using maskbooleantrue

Tour slots

NameDescription
defaulttourStep component list
indicatorscustom indicator, The scope parameter is { current, total }

Tour events

NameDescriptionType
closecallback function on shutdownFunction
finishcallback function on finishedFunction
changecallback when the step changesFunction

TourStep Attributes

PropertyDescriptionTypeDefault
targetget 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-arrowwhether to show the arrowbooleantrue
titletitlestring
descriptiondescriptionstring
placementposition of the guide card relative to the target elementenumbottom
content-stylecustom style for contentCSSProperties
maskwhether to enable masking, change mask style and fill color by pass custom propsboolean | Objecttrue
typetype, affects the background color and text colordefault | primarydefault
next-button-propsproperties of the Next buttonObject
prev-button-propsproperties of the previous buttonObject
scroll-into-view-optionssupport pass custom scrollIntoView options, the default follows the scrollIntoViewOptions property of Tourboolean | ScrollIntoViewOptions
show-closewhether to show a close buttonbooleantrue
close-iconcustom close icon, default is Closestring | Component

TourStep slots

NameDescription
defaultdescription
headerheader

TourStep events

NameDescriptionArguments
closecallback function on shutdownFunction

Source

ComponentStyleDocs

Contributors