Tour 引导

Tour组件用于创建交互式的用户引导流程,通过突出显示页面的特定元素并提供相应说明。

基础用法

通过OlTourProvider和OlTourStep组件来创建引导流程。

在 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>

属性

OlTourProvider 属性

属性	描述	类型	默认值
v-model:active	双向绑定引导的显示状态	boolean	false

OlTourStep 属性

属性	描述	类型	默认值
index	步骤索引(必填)	string | number	-
title	步骤标题	string	''
description	步骤描述	string	''