Tour

The Tour component is used to create interactive user guidance processes, highlighting specific elements on the page and providing corresponding explanations.

Basic Usage

The guidance process is created using the OlTourProvider and OlTourStep components.

在 github 中打开

展开代码

复制代码

<script lang="ts" setup>
import { ref } from 'vue'

const showTour = ref(false)
function handle() {
  showTour.value = !showTour.value
}
</script>

<template>
  <OlButton size="sm" class="mb-4" @click="handle">
    Begin Tour
  </OlButton>

  <OlTourProvider v-model:active="showTour" class="space-x-4">
    <OlTourStep index="1" title="Step 1" description="This is the first step description">
      <OlButton size="md">
        Step 1
      </OlButton>
    </OlTourStep>
    <OlTourStep index="2" title="Step 2" description="This is the second step description">
      <OlButton type="outline" size="md">
        Step 2
      </OlButton>
    </OlTourStep>
    <OlTourStep index="3" title="Step 3" description="This is the third step description">
      <OlButton icon="i-mi-heart" link size="2xl" />
    </OlTourStep>
  </OlTourProvider>
</template>

Attributes

OlTourProvider Attributes

Attribute	Description	Type	Default
active	Whether to display the guide	boolean	false
v-model:active	Two-way binding for the display state of the guide	boolean	false

OlTourStep Attributes

Attribute	Description	Type	Default
index	Step index (required)	string | number	-
title	Step title	string	''
description	Step description	string	''