dirver.js vue3中使用的问题

1 首先下载依赖包 

     npm I driver.js

2、一般创建两个文件夹个人习惯

 driver-example.js

import Driver from "driver.js";
import diverSteps from "./driver";
import "driver.js/dist/driver.min.css";

const driver = new Driver({
  allowClose: false, //禁止点击外部关闭
  doneBtnText: "完成", // 完成按钮标题
  closeBtnText: "关闭", // 关闭按钮标题
  stageBackground: "transparent", // 引导对话的背景色
  nextBtnText: "", // 下一步按钮标题
  prevBtnText: "", // 上一步按钮标题
  onDeselected: (Element) => {
    //取消按钮
    console.log(Element, "Element");
  },
  onPrevious: (Element) => {
  },
  onNext: (Element) => {
    console.log(Element, "onNext");
  },
  onHighlightStarted: (Element) => {
    // console.log('onHighlightStarted');
  },
  onHighlighted: (Element) => {
    sessionStorage.setItem("control", true);
    // console.log('onHighlighted');
  },
  onReset: (Element) => {
    // console.log('onReset');
    sessionStorage.setItem("control", false); //点击关闭活完成按钮将control改为false
    sessionStorage.setItem("stepNum", 0);
  },
});
export default driver;

driver.js 文件

这里面写步骤，就是弹窗的第一步或者第二部     element就是需要绑定的id

需要注意的是，如果没有相对应的id  会不会显示出来，id且唯一

export default [
  {
    element: "#sceneManage",
    popover: {
      title: "展开实体弹窗",
      description: "需要先展开添加实体弹窗界面。",
      position: "left",
      backgroundColor: "transparent",
    },
  },
  {
    element: "#entityID",
    popover: {
      title: "选择实体",
      description: "请选择任意一个实体。",
      position: "left",
    },
  },
  {
    element: "#entityComfirm",
    popover: {
      title: "添加实体",
      description: "选择实体,并且添加实体。",
      position: "bottom",
    },
  },
  {
    element: "#redTreeStyle",
    popover: {
      title: "添加卫星",
      description: "请点击卫星右侧 ＋ 弹窗添加卫星窗口 。",
      position: "right",
    },
  },
  {
    element: "#satelliteTable",
    popover: {
      title: "选择卫星",
      description: "请勾选一个卫星信息。",
      position: "bottom",
    },
  },
  {
    element: "#satelliteConfirm",
    popover: {
      title: "确认",
      description: "确认添加卫星。",
      position: "bottom",
    },
  },
  {
    element: "#redTreeStyle",
    popover: {
      title: "添加地面站",
      description: "请点击地面站右侧 ＋ 弹窗添加地面站窗口",
      position: "right",
    },
  },
  {
    element: "#FacTable",
    popover: {
      title: "添加地面站",
      description: "请勾选一个地面站信息。",
      position: "bottom",
    },
  },
  {
    element: "#facConfirm",
    popover: {
      title: "确认",
      description: "确认添加地面站信息。",
      position: "bottom",
    },
  },
  // 卫星过站分析
  {
    element: "#missTheStation",
    popover: {
      title: "卫星过站分析",
      description: "请点击可见性分析下，卫星过站分析右侧计算器图标。 ",
      position: "left",
    },
  },
  {
    element: "#computeConfirm",
    popover: {
      title: "计算",
      description:
        "请勾选计算元素和非计算元素 , 计算元素和非计算元素至少有一个勾选的数据 ， 否则计算失败然后计算,点击确认计算。",
      position: "bottom",
    },
  },
];

在vue中使用

import driver from "../utils/driver-example.js";
import diverSteps from "../utils/driver.js";

const getpreview = (idx) => {
  driverExample = driver;
  driverExample.defineSteps(diverSteps);
  driverExample.start(0);
  
};