vue3 driver.js 引导页 使用方法

先展示一下效果,ps:不要在意没对齐

 第一步：下载 deiver.js

npm i driver

第二步: 在组件中引入 

import Driver from "driver.js";
import "driver.js/dist/driver.min.css";
import { steps } from "./steps";
const squareUrl = ref(require("../../../assets/background/引导页.png"));
//先定义一下
let driver;
//在DOM加载之后展示
onMounted(() => {
  driver = new Driver({//这里需要new一个实例出来
    animate: false, 
    opacity: 0.75, 
    padding: 10, 
    allowClose: false, 
    overlayClickNext: false, 
    doneBtnText: "Done", 
    //下面这些都是按钮名称
    closeBtnText: "Close", 
    stageBackground: "#ffffff", 
    nextBtnText: "Next",
    prevBtnText: "Previous",
//有些事件,我这里不需要,所有没有引入.需要的朋友可以去官方查看
});
});

第三步 : 新建一个 JS 文件,定义一下数据源

export const steps = [
  {
    element: "#driver", //绑定对应的id将其显示
    popover: {
      title: "引导页,后续项目完成进行更新",//标题名称
      description: "Body of the popover",//描述
      position: "left",//显示的位置
    },
  },
];

第四步:绑定 ID 开始使用啦!!!!

在需要的元素上面绑定 ID 和点击事件，我这里使用的 ID = driver 点击事件 = handelClcik

 <div class="box" id="driver" @click.prevent.stop="handelClcik">

然后引入刚刚创建好的数据源

import {steps} from './steps'

大功告成！开始使用咯

const handelClcik = () => {
  driver.defineSteps(steps)
  driver.start()//启动!!!!!
}