el-tour

Tour Component

Tour is a popup component for guiding users through a product with step-by-step instructions.

When to Use

• Product onboarding
• Feature tours
• User guidance
• Tutorial walkthroughs

Basic Usage

<template>
  <el-button ref="buttonRef">Start Tour</el-button>
  
  <el-tour v-model="open">
    <el-tour-step
      :target="buttonRef?.$el"
      title="Start Tour"
      description="Click this button to start the tour"
    />
    <el-tour-step
      :target="inputRef?.$el"
      title="Input Field"
      description="This is an input field"
    />
  </el-tour>
</template>

<script setup>
import { ref } from 'vue'

const open = ref(false)
const buttonRef = ref()
const inputRef = ref()
</script>

Non-modal

<template>
  <el-tour v-model="open" :mask="false" type="primary">
    <el-tour-step
      :target="targetRef"
      title="Non-modal Tour"
      description="This tour doesn't block interactions"
    />
  </el-tour>
</template>

Custom Placement

<template>
  <el-tour v-model="open">
    <el-tour-step
      :target="targetRef"
      placement="right"
      title="Right Placement"
      description="The guide appears on the right"
    />
  </el-tour>
</template>

Custom Mask Style

<template>
  <el-tour
    v-model="open"
    :mask="{
      style: { boxShadow: '0 0 10px rgba(0,0,0,0.3)' },
      color: 'rgba(0, 0, 0, 0.5)'
    }"
  >
    <el-tour-step :target="targetRef" title="Custom Mask" />
  </el-tour>
</template>

API Reference

Tour Attributes

Name	Description	Type	Default
model-value / v-model	Open tour	boolean	false
current / v-model:current	Current step	number	0
placement	Default placement	Placement enum	'bottom'
mask	Mask configuration	boolean | { style?, color? }	true
type	Tour type	'default' | 'primary'	'default'
show-arrow	Show arrow	boolean	true
show-close	Show close button	boolean	true
close-on-press-escape	Close on ESC	boolean	true
scroll-into-view-options	Scroll options	boolean | ScrollIntoViewOptions	{ block: 'center' }
z-index	Z-index	number	2001