网站引导driver

main.ts

//引入网页引导
import “driver.js/dist/driver.min.css”;
import { DriverUtil } from “./utils/index”;
const driverUtil = new DriverUtil();

app.provide(“driver”, driverUtil.driver());

driver.ts

import Driver from “driver.js”;
import GuidanceSteps from “./GuidanceSteps”;

class DriverUtil {
private checkedDriver:boolean = false;
driver() {
return new Driver({
className: “scoped-class”,
// animate: false,
allowClose: false, //禁止点击外部关闭
opacity: 0.3,
doneBtnText: “完成”, // 完成按钮标题
closeBtnText: “关闭”, // 关闭按钮标题
nextBtnText: “下一步”, // 下一步按钮标题
prevBtnText: “上一步”, // 上一步按钮标题
stageBackground: “#fff”, // 引导对话的背景色
scrollIntoViewOptions: {
behavior: “auto”,
block: “center”,
},
onHighlightStarted: (Element) => {
const content = (
document.querySelector(“.ant-layout-content”)
);
content.style.height = “auto”;
this.addCheckDriver();
},
onHighlighted: (Element) => {
// const tableCell = document.querySelector(“.driver-highlighted-element”) as HTMLElement;
// if(tableCell.className.indexOf(‘operation-btn’) !== -1){
// setTimeout(()=>{
// (tableCell.parentNode as HTMLElement).style[‘position’] = “relative”
// document.querySelectorAll(“.ant-table-cell-fix-right”).forEach((item:any)=>{
// item.style[‘position’] = “relative”
// console.log(item)
// })
// console.log((tableCell.parentNode as HTMLElement).style)
// },1000)
// }

  },
  onDeselected: (Element) => {
  },
  onReset: (Element) => {
    const content = <HTMLImageElement>(
      document.querySelector(".ant-layout-content")
    );
    content.style.height = "calc(100vh - 64px)";
    let guidanceStepsData: Array<string> = [];
    if (this.checkedDriver) {
      GuidanceSteps.map((value: any) => {
        guidanceStepsData.push(value.page);
      });
    } else {
      if (localStorage.getItem("guidanceStepsData")) {
        guidanceStepsData = JSON.parse(
          localStorage.getItem("guidanceStepsData") as string
        );
      }
     
    }
    localStorage.setItem("guidanceStepsData", JSON.stringify(guidanceStepsData));
    location.reload();
  },
  onNext: (Element) => {
  },
  onPrevious: (Element) => {
  },
});

}
addCheckDriver() {
setTimeout(() => {
const driverPopover = (
document.querySelector(“.driver-popover-footer”)
);
const close = (
document.querySelector(“.driver-close-btn”)
);
const label = document.createElement(“label”);
const input = document.createElement(“input”);
const span = document.createElement(“span”);
label.className = “close-all-driver”;
input.type = “checkbox”;
// input.className = “close-all-driver”;
input.checked = this.checkedDriver;
input.onchange = (e: any) => {
this.checkedDriver = e.target.checked;
};
span.innerHTML = “跳过所有”;
// span.style.color = “#FFBB00”;
label.appendChild(input);
label.appendChild(span);
driverPopover.insertBefore(label, close);
}, 350);
}
}
export default DriverUtil;

guidanceSteps.ts

const guidanceSteps: any = [
{
page: “home-1”,
steps: [
{
element: “#process-container”,
popover: {
title: “业务流程图，用于指导每条流程的前后操作关系”,
description: “系统内部提供了‘产品流程’和‘项目流程’两类研发流程。其中产品信息是由配置管理员负责创建；而项目信息是在‘项目管理平台’创建后同步而来。”,
},
},
}]
export default guidanceSteps;

Home.vue

import {GuidanceSteps } from “@/utils/index”;
const driver: any = inject(“driver”);
GuidanceSteps.map((value: any) => {
if (value.page == “home-1”) {
driver.defineSteps(value.steps);
driver.start();
}
});