Driver.js-分步指引插件

Driver.js是一个用于凸显页面的某一部分的插件。改插件可以在直接引入到页面中使用，也可引入到vue项目中使用，但如果在vue项目中使用到UI框架，或在分步指引中断层，小编不推荐使用该插件来实现分步指引。
1、直接引入js、css使用

<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">

2、npm 安装使用

npm install driver.js

初始化：

const driver = new Driver();

初始化（带有配置参数）：

const driver = new Driver({
{
  className: 'scoped-class', // className to wrap driver.js popover 蒙层类名
  animate: true,  // Animate while changing highlighted element 在切换上一步或下一步时是否使用动画效果
  opacity: 0.75,  // Background opacity (0 means only popovers and without overlay) 蒙层透明度
  padding: 10,    // Distance of element from around the edges 突出的元素padding值
  allowClose: true, // Whether clicking on overlay should close or not 是否允许点击蒙层关闭
  overlayClickNext: false, // Should it move to next step on overlay click 点击蒙层是否跳至下一步
  doneBtnText: 'Done', // Text on the final button 最后一步后需要执行的按钮文案
  closeBtnText: 'Close', // Text on the close button for this step 关闭按钮文案
  nextBtnText: 'Next', // Next button text for this step 下一步的按钮文案
  prevBtnText: 'Previous', // Previous button text for this step 上一步的按钮文案
  showButtons: false, // Do not show control buttons in footer 是否显示以上提到的这些按钮
  keyboardControl: true, // Allow controlling through keyboard (escape to close, arrow keys to move) 是否允许键盘按键控制
  scrollIntoViewOptions: {}, // We use `scrollIntoView()` when possible, pass here the options for it if you want any 突出区域滚动配置
  onHighlightStarted: (Element) {}, // Called when element is about to be highlighted 元素高亮/凸显开始时
  onHighlighted: (Element) {}, // Called when element is fully highlighted 元素高亮/凸显时
  onDeselected: (Element) {}, // Called when element has been deselected 元素高亮/凸显取消时
  onReset: (Element) {},        // Called when overlay is about to be cleared 元素高亮/凸显关闭时
  onNext: (Element) => {},      // Called when moving to next step on any step 下一步需执行
  onPrevious: (Element) => {},  // Called when moving to next step on any step 上一步需执行
}
})

使用：
1、若只用一个元素需要凸显且只有一步时

driver.highlight({
  element: '#some-element',
  popover: {
    title: '<em>An italicized title</em>', //突出框标题
    description: 'Description may also contain <strong>HTML</strong>'//突出框描述
  }
});

2、存在多步时

driver.defineSteps([
  {
    element: '#first-element-introduction',
    popover: {
      className: 'first-step-popover-class',
      title: 'Title on Popover',
      description: 'Body of the popover',
      position: 'left' //提示框的位置 `top`, `left`, `right`, `bottom`,类似于tootip文字提示的位置
    }
  },
  {
    element: '#second-element-introduction',
    popover: {
      title: 'Title on Popover',
      description: 'Body of the popover',
      position: 'top'
    }
  },
  {
    element: '#third-element-introduction',
    popover: {
      title: 'Title on Popover',
      description: 'Body of the popover',
      position: 'right'
    }
  },
]);
// Start the introduction
driver.start();

有些同学可能会说，哪怕只有一步，是不是也可以这么写：

driver.defineSteps([
  {
    element: '#first-element-introduction',
    popover: {
      className: 'first-step-popover-class',
      title: 'Title on Popover',
      description: 'Body of the popover',
      position: 'left'
    }
  }
]);
// Start the introduction
driver.start();

NO,NO,NO,小编起初也是这么想的，想的挺美，但事实太残酷。如果这样写，系统会抛出错误，找不到下一步在哪儿，如果只有一步的时候非要用多步的写法，就写个空的元素类名。例如，只是想突出test1而已，就需要一个不需要的test2,就可以采用以下写法。

<div class"test1">1111</div>
<div class="test2"></div>
driver.defineSteps([
  {
    element: '.test1',
    popover: {
      className: 'first-step-popover-class',
      title: 'Title on Popover',
      description: 'Body of the popover',
      position: 'left'
    },
    {
    	 element: '.test2',
    }
  }
]);
// Start the introduction
driver.start();

方法（API）:

const isActivated = driver.isActivated; // Checks if the driver is active or not 检查当前是否正在高亮元素
driver.moveNext();     // Moves to next step in the steps list 移动到下一步
driver.movePrevious(); // Moves to previous step in the steps list 移动到上一步
driver.start(stepNumber = 0);  // Starts driving through the defined steps 指定从哪一步开始
driver.highlight(string|stepDefinition); // highlights the element using query selector or the step definition 高亮的元素
driver.reset(); // Resets the overlay and clears the screen 多用于单元素弹出框关闭，如果不手动正确关闭它不会自动正确关闭
driver.hasHighlightedElement(); // Checks if there is any highlighted element 检查是否存在高亮的元素
driver.hasNextStep(); // Checks if there is next step to move to 检查是否存在下一步
driver.hasPreviousStep(); // Checks if there is previous step to move to 检查是否存在上一步

// Prevents the current move. Useful in `onNext` or `onPrevious` if you want to
// perform some asynchronous task and manually move to next step
driver.preventMove(); //停止移动

const activeElement = driver.getHighlightedElement(); //获取正在高亮的元素
const lastActiveElement = driver.getLastHighlightedElement(); //获取最后一个高亮的元素
activeElement.getCalculatedPosition(); // Gets screen co-ordinates of the active element 获取正在高亮的元素位置
activeElement.hidePopover();  // Hide the popover 隐藏提示框
activeElement.showPopover();  // Show the popover 显示提示框

activeElement.getNode();  // Gets the DOM Element behind this element  获取目前正在高亮的元素的下一个元素节点

最后，小编有句话不知道当讲不当讲，Driver.js还不够完善，对于样式复杂的分步指引是不适合的。个人认为，在vue中，如果只有UI框架，还不如直接使用UI框架的弹出框搭配遮罩层（Overlay ），自己布局控制显隐来得快。小编在刚结束的项目中，一开始就是用Driver.js花了一两天的时间来实现，结果通过自己来布局控制显隐只花了一个小时不到，而且还没有bug，就算有bug也清楚问题出在哪儿。

官网链接地址：https://kamranahmed.info/driver.js/
gitlab地址：https://github.com/kamranahmedse/driver.js