示例图片

基础用法

<template>
  <V3Guide v-model="visible" :steps="steps" ref="tour">
    <!-- 自定义头部(可以不需要) -->
    <template #header>
      头部
    </template>

     <!-- 自定义底部(可以不需要) -->
    <template #footer>
      底部
    </template>
  </V3Guide>
</template>

<script setup>
import { ref } from 'vue';
import { V3Guide } from 'v3-guide'

const tour = ref()
const visible = ref(false)
const steps = ref([
    {
      el: '第一步的dom元素',
      vnode: '第一步的内容  传入.vue组件即可',
    },
    {
      el: '第二步的dom元素',
      vnode: '第二步的内容  传入.vue组件即可',
    },
                        .
                        .
                        .
    {
      el: '第 n 步的dom元素',
      vnode: '第 n 步的内容  传入.vue组件即可',
    }
])
</script>

v3-guide

| 属性| 说明 | 类型 | 默认值 | | --- | --- | --- | --- | | steps | 包含dom的步骤数据 | array | [ ] | | offset | 偏移量 | number | 10 | | title | 标题 | string | - | | padding | 窗口内边距 | number | 6 | | block | 出现在可视区域的位置 | string | center | | whiteScreenDuration | 等待scrollIntoview完毕的时间, 如出现白屏可适当增大此值 | number | 80(ms) | | placemant | 引导卡片相对于目标元素的位置 | top | topLeft | topRight | bottom | bottomLeft | bottomRight | left | leftTop | leftBottom | right | rightTop | rightBottom | top |

v3-guide events (ref实例)

guideRef.value.instance.{ next, prev, close, currentIndex }

| 属性| 说明 | 类型 | 默认值 | | --- | --- | --- | --- | | instance | ref实例上的方法及属性入口 | object | { next, prev, close, currentIndex } |