用户引导库driver.jsDriver.js是一个功能强大且高度可定制的基于原生JavaScript开发的新用户引导库

Driver.js是一个功能强大且高度可定制的基于原生JavaScript开发的新用户引导库。它没有依赖项，支持所有主要浏览器。

driver.js的实现，主要是在整个页面顶部绘制了一个canvas蒙层，然后切掉要高亮显示的元素上方的部分实现高亮显示或不高亮显示，在显示高亮或关闭高亮显示时还提供了几个钩子，使其高度可定制。

这个库很小，有官方文档和对应的github，学习成本低。

主要应用场景

用户引导界面（主要应用场景）
模拟弹窗
气泡提示窗口

安装方式

使用npm 或者yarn

npm i driver.js
 
yarn add driver.js

或者通过CDN引入

<script src="https://unpkg.com/driver.js/dist/driver.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/driver.js/dist/driver.min.css">

基本使用

driver.js高亮显示单个元素

<template>
  <div class="container">
    <div class="box1">box1</div>
    <div class="box2">box2</div>
    <div class="box3">box3</div>
  </div>
</template>
<script setup>
import { driver } from "driver.js"; // 引入库
import "driver.js/dist/driver.css";// 引入样式
import { onMounted } from "vue";

onMounted(() => {
  const driver1 = new driver();
  driver1.highlight({
    element: ".box1",
  });
});
</script>
<style>
* {
  margin: 0;
  padding: 0;
}
.container {
  display: flex;
}
.container div {
  width: 100%;
  height: 200px;
  background: rgb(255, 158, 158);
  margin: 10px;
  line-height: 200px;
  text-align: center;
}
</style>

可以通过控制台查看driver1实例对象上的方法属性

通过driver1.getConfig()可以查看实例的弹窗属性配置

结合实例了解库的使用

弹窗

<template>
  <button @click="handleClick">open dialog</button>

  <div class="dialog" v-if="show">
    <span @click="handleClose">×</span>
    <div>这是一个弹窗，可以根据需要定制内容</div>
  </div>
</template>
<script setup>
import { driver } from "driver.js";
import "driver.js/dist/driver.css";
import { nextTick, ref } from "vue";

const show = ref(false);
const driver1 = new driver({
 allowClose: false,
});
const handleClick = () => {
  show.value = true;
  nextTick(() => { 
    driver1.highlight({
      element: ".dialog",
    });
  });
};

const handleClose = () => {
  driver1.destroy();
  show.value = false;
};
</script>
<style>
* {
  margin: 0;
  padding: 0;
}
.dialog {
  height: 200px;
  width: 400px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  padding: 20px;
}
button {
  padding: 10px;
  border-radius: 4px;
}
span {
  position: absolute;
  right: 0;
  top: 0;
  font-size: 26px;
  cursor: pointer;
}
</style>

关注点：

需要使用nextTick()或其他异步函数，确保实例对象作用元素已经存在。

在新建实例，可通过配置项配置相关信息，例如【是否允许点击关闭蒙版】allowClose

通过使用driver1.destroy();销毁对应的driver对象。

气泡弹窗

<template>
  <button class="button" @click="handleClick">open dialog</button>
</template>
<script setup>
import { driver } from "./driver.js.mjs";
import "driver.js/dist/driver.css";

const handleClick = () => {
  const driver1 = new driver({
    overlayColor: "#fff",
  });
  driver1.highlight({
    element: ".button",
    popover: {
      title: "我是标题",
      description: "我是描述",
      side: "top", // bottom, top
      align: "center",
    },
  });
};
</script>
<style>
* {
  margin: 0;
  padding: 0;
}
button {
  padding: 10px;
  border-radius: 4px;
  margin: 130px 350px;
}
</style>

关注点：

通过配置参数 overlayColor: "#fff"消除蒙版

用户引导

<template>
  <div class="conatiner">
    <div class="box1">box1</div>
    <div class="box2">box2</div>
    <div class="box3">box3</div>
  </div>
</template>
<script setup>
import { onMounted } from "vue";
import { driver } from "driver.js";
import "driver.js/dist/driver.css";

onMounted(() => {
  const driver1 = new driver({
    allowClose: false,
    element: ".conatiner",
    doneBtnText: "完成",
    prevBtnText: "上一步",
    nextBtnText: "下一步",
  });
  driver1.setSteps([
    {
      element: ".box1",
      popover: {
        title: "Popover标题",
        description: "Popover描述",
        position: "left",
      },
    },
    {
      element: ".box2",
      popover: {
        title: "Popover标题",
        description: "Popover描述",
      },
    },
    {
      element: ".box3",
      popover: {
        title: "Popover标题",
        description: "Popover描述",
      },
    },
  ]);
  driver1.drive();
});
</script>
<style>
/* 重置样式 */
* {
  margin: 0;
  padding: 0;
}
.conatiner {
  display: flex;
}
.conatiner div {
  width: 100%;
  text-align: center;
  height: 200px;
  line-height: 200px;
  margin: 20px 10px;
  background: rgb(240, 241, 177);
}
</style>

关注点：

可以在new driver的时候修改步骤提示语。

在driver1.setSteps中设置引导流程。

总结

driver.js使用起来很简单，通过打印driver1=new driver() 和 driver1.getConfig() 的信息可以获取实例的方法和属性，完成基本的设置。

更多的用法可以参考官方网站driver.employleague.cn/。

另外需要注意一点driver.js的版本，官网的用法可能会滞后。目前项目中用到的版本是 "driver.js": "^1.3.1",