安装
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(); // 下一步的回调函数，可以自定义，若不写，则默认为下一步},},},{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(); // 下一步的回调函数，可以自定义，若不写，则默认为下一步},
