y-tour v1.0.1

安装

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>

属性

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函数即可实现对渲染的结果的影响

事件

方法

插槽