使用driverjs灵活设计页面用户引导

前言

driverjs是一款基于原生JavaScript开发的新用户引导库,适合需要轻量级、可定制引导系统的项目，本文介绍在完成业务需求过程中的基本使用、遇到的问题及解决方法。

基本使用

文档：

driverjs官网
 driverjs文档

安装方式:

bash 复制代码

yarn add driver.js
npm install driver.js

简单使用：

js 复制代码

import { driver } from "driver.js";
import "driver.js/dist/driver.css";

const driverObj = driver();
driverObj.highlight({
  element: "#some-element",
  popover: {
    title: "Title",
    description: "Description"
  }
});

功能实现及问题解决

功能本身是想借引导的方式，帮助用户理解如何添加流程。

样式调整

首先需要根据业务需求将driverjs的默认样式进行调整

如图示，需要调整的是

背景/按钮的样式
当前步骤进度的展示
上一步/下一步的展示限制

js 复制代码

const driverObj = driver({
  showProgress: true, // 显示步骤进度
  allowClose: false,
  progressText: `{{current}} / {{total}}`,  // 步骤进度文字
  showButtons: ["next", "close"], // 显示按钮范围
  nextBtnText: "下一步",
  doneBtnText: "确认",
  popoverClass: "custom-tour-class", // 自定义弹出框样式
  steps: [
	...
  ],
});

根据不同步骤进行功能展示

打开引导同时展示目标元素

功能需求：需要在打开引导时，将目标元素高亮展示。

分析：目标元素状态为opacity：0，鼠标移入时切换为opacity：1，需要在打开引导同时修改目标元素状态为opacity：1。

具体实现：由于组件封装，目标元素与引导组件并不在同一文件中，需要通过增加id属性，在打开引导时通过DOM API获取目标元素，并修改其样式。

如果目标元素为动态生成的，可以通过在id上拼接index达到唯一性。

js 复制代码

const showTour = () => {
  // 获取目标元素 并修改样式
  const highlightDropDownImg = document.querySelector(
    "#flat-flow #flat-drag .arrow-dropdown-action .img"
  ) as HTMLImageElement;
  if (highlightDropDownImg) {
    highlightDropDownImg.style.opacity = "1";
  }
  // 打开引导
  driverObj.drive();
};

切换步骤时页面切换至点击目标按钮效果

功能需求：需要在点击下一步时，页面切换至点击目标元素的效果。

分析：点击目标元素后，页面变化，出现选项，目标元素本身需要回到opacity: 0的状态。

具体实现：每一步指定的高亮元素，也需要通过增加id属性，赋值给steps中的element。

js 复制代码

const driverObj = driver({
  ...
  steps: [
    {
      element: "#flat-flow #flat-drag .arrow-dropdown-action",
      popover: {
        description: "鼠标悬浮在此处，点击 + 添加流程",
        onNextClick: () => {
          // 获取目标元素 移除上一步增加的样式
          // 使用移除而不是直接修改样式的原因：
          // 避免影响后续使用，如此处直接修改opacity会影响后续hover的展示效果
          const highlightDropDownImg = document.querySelector(
            "#flat-flow #flat-drag .arrow-dropdown-action .img"
          ) as HTMLImageElement;
          highlightDropDownImg.style.removeProperty("opacity");

          // js触发点击事件
          // 此处直接触发事件比修改样式更方便，由于点击后出现的选项位置是变化的
          const event = document.createEvent("MouseEvents");
          event.initEvent("click", true, true);
          highlightDropDownImg.dispatchEvent(event);

          // 切换步骤
          driverObj.moveNext();
        },
      },
    },
    {
      element: "#flat-flow",
      popover: { description: "在菜单栏中选择您想进行的操作" },
    },
  ],
});

总结

driver.js的实现，主要是在整个页面顶部绘制了一个canvas蒙层，然后切掉要高亮显示的元素上方的部分实现高亮显示或不高亮显示。

除了用户引导，也可以用于模拟弹框、提示窗口等场景。