vue3 driverjs

安装

npm i driver.js
// 或者
yarn add driver.js

引入

import {driver } from 'driver.js';
import "driver.js/dist/driver.css"

使用

onMounted(async () => {
  handelInitTour()
  // 调接口 启动
  // setTimeout(()=>{
  //   driverObj.drive()
  // },3000)
});

// 引导页
const arrDriver:any = ref([
    {
     element: "#step1tour44",// 提示框出现的位置
      popover: {
        className: "first-step-popover-class",// 自定义样式
        title: "这是第一步",//标头文字
        side: "left",//提示框所在位置
        nextBtnText: "下一步",//下一步文字
        prevBtnText: "上一步",//上一步文字
        onNextClick: async() => {
          const element:any = await document.getElementById('step1tour');
          await element.click()
          driverObj.moveNext();  // 下一步的回调函数，可以自定义，若不写，则默认为下一步
        },
        onCloseClick: () => {
            handleCloseDriver();
            driverObj.destroy();
      },
      },
    },
    {
      element: "#step3tour44",
      popover: {
        className: "three-step-popover-class",
        title: "这是第三步",
        position: "right",
        nextBtnText: "下一步",
        prevBtnText: "上一步",
        onNextClick: async () => {
          const element:any = await document.getElementById('step3tour');
          await element.click()
          setTimeout(()=>{
             console.log(document.getElementById('step4tour'))
             driverObj.moveNext();
          },100)
        },
      },
    },
    
  ]);

// Driver 实例
let driverObj:any = null;
function handelInitTour(){
  driverObj = driver({
    showButtons: ["next", "previous", "close"],// 是否显示按钮
    showProgress: false, // 是否显示步骤进度
    steps: arrDriver.value, // 步骤列表
    allowClose: true, // 是否点击蒙层进行关闭
  });
}

 解决：下一步依赖上一步触发的事件

onNextClick: async() => {
          const element:any = await document.getElementById('step1tour');
          await element.click()
          driverObj.moveNext();  // 下一步的回调函数，可以自定义，若不写，则默认为下一步
        },

关闭：

 onCloseClick: () => {
        handleCloseDriver();
        driverObj.destroy();
      },