y-tour

安装

npm install -s y-tour

使用

<template>
  <!-- ...
    模版里随便写些内容，加上class或id
  ... -->
  <!-- 使用组件 -->
  <Tour ref="tourRef" v-model:show="showTour" :steps="steps">
      <!-- 使用插槽 -->
      <template #title="data">
        {{data.title}}
      </template>
  </Tour>
</template>

<script setup lang="ts">
import {onMounted, reactive, Ref, ref} from "vue";
import {Step} from "y-tour/src/TourHandler";
// 引入组件
import Tour from "y-tour";

// 控制导航是否展示
const showTour = ref(false)
// 导航组件实例
const tourRef = ref()

// 定义步骤信息
const steps: Step[] = [{
  el: ()=>document.getElementsByClassName('first-but')[0] as HTMLElement,
  beforeActive:(run)=>{
    // 有些情况dom元素不在窗口内，需要先滚动滚动条，然后调用run方法
    document.getElementsByClassName('tour-text')[0].scrollTo({top: 0})
    run()
  },
  title: '下一步',
  description: '点击这里可进行下一步操作'
},{
  el: ()=>document.getElementsByClassName('step-two')[0] as HTMLElement,
  placement: 'top',
  beforeActive:(run, getRect)=>{
    const {targetRect} = getRect()
    let scroll = targetRect.bottom<0? 10-targetRect.bottom:targetRect.bottom
    document.getElementsByClassName('tour-text')[0].scrollTo({top: scroll})
    run()
  },
  title: '第二部',
  description: '点击这个进入第二步'
},{
  el: ()=>document.getElementsByClassName('logo')[0] as HTMLElement,
},{
  el: ()=>document.getElementsByClassName('step-aaa')[0] as HTMLElement,
  beforeActive:(run, getRect)=>{
    const {targetRect} = getRect()
    let scroll = targetRect.top<0? -targetRect.top-10:targetRect.top
    document.getElementsByClassName('tour-text')[0].scrollTo({top: scroll})
    run()
  },
  title: '取消',
  description: '点击这里可取消操作'
},{
  el: ()=>document.getElementsByClassName('four-but')[0] as HTMLElement,
  beforeActive:(run)=>{
    document.getElementsByClassName('tour-text')[0].scrollTo({top: 0})
    run()
  }
},{
  el: ()=>document.getElementsByClassName('five-step')[0] as HTMLElement,
  beforeActive:(run)=>{
    document.getElementsByClassName('tour-text')[0].scrollTo({top: 0})
    run()
  }
},]

// 必须等页面挂在完成后才可以开始导航，否则获取不到dom节点
onMounted(()=>{
  // 打开导航可以使用v-model:show，也可以直接调用组件的open方法
  showTour.value = true
  // tourRef.value.open()
})
</script>

属性

属性名	说明	类型	默认值
show / v-model:show	是否显示	boolean	false
current / v-model:current	当前步骤	number	0
steps	步骤列表	Step[]	[]
mask	是否显示遮罩层	boolean	true

Step

interface Step{
    el: ()=>HTMLElement,
    title?: string,
    description?: string,
    placement?: 'top'|'bottom'|'left'|'right',
    beforeActive?: (run: (rectMap?: RectMap)=>void, getRect: ()=>RectMap)=>void,
    afterActive?: ()=>void
}

• beforeActive钩子函数的参数为 run函数和getRect函数。

• 调用getRect可以获得这次窗口渲染的位置信息RectMap。

• 调用run函数才能渲染本次步骤

• run函数接受RectMap作为参数

• 可以调用getRect获取RectMap，并对其进行修改，最后调用run函数即可实现对渲染的结果的影响

事件

事件名	说明	类型
open	导航被打开	Function
close	导航被关闭	Function
change	步骤切换	Function
next	点击了下一步	Function
last	点击了上一步	Function

方法

方法名	说明	类型
open	打开导航	Function
close	关闭导航	Function
last	切换上一步	Function
next	切换下一步	Function

插槽

名称	说明
default	覆盖整个弹窗
title	覆盖标题
close	覆盖关闭按钮
description	覆盖描述
footer	覆盖底部