安装

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 | 覆盖底部 |