Driver.js 引导

一、介绍
Driver.js 是一个轻量级（~ 4kb gzip），无需依赖但功能强大的原生 JavaScript 。兼容所有主流浏览器，可帮助你将用户的注意力集中在页面上。

特色功能：
突出显示页面上的任何任何项目
锁定用户交互
创建功能介绍
为用户添加聚焦器
高度可定制 – 可在任何地方使用，可覆盖
界面友好 – 可通过按键控制
轻量级 – gzip 压缩后只有约4kb
在所有主流浏览器中保持一致的行为

https://github.com/kamranahmedse/driver.js
https://kamranahmed.info/driver.js/

二、安装
vue：

npm install driver.js

import Driver from 'driver.js';
import 'driver.js/dist/driver.min.css';

Vue.prototype.$driver = new Driver();

或下载后直接引入

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

三、用法：
1、突出单个元素，无弹窗
示例1：突出显示

this.$driver.highlight('#status');

示例2：当用户与之交互时突出显示一个元素（文本框获得焦点时突出）

document.getElementById('creation-input')
  .addEventListener('focus', (e) => {
     
    this.$driver.focus('#creation-input');
  });

2、突出显示和弹出框
可以使用弹出窗口在突出显示的元素旁边显示其他详细信息。
ps：如果未指定位置或将其指定为auto，它将自动找到弹出框的合适位置并显示。
ps：title与description可指定html。

this.$driver.highlight({
     
	element: '#status',
    popover: {
     
		title: '弹窗标题',//也可以使用HTML标签
        description: '弹窗内容',//也可以使用HTML标签
        position: 'bottom',//位置，可选值： left, left-center, left-bottom, top, top-center, top-right, right, right-center, right-bottom, bottom, bottom-center, bottom-right, mid-center
        offset: 20,//位移大小
    }
});

3、设置分步引导介绍

this.$driver.defineSteps([
	{
     
		element: '#status1',
        popover: {
     
			title: '弹窗1',
            description: 'Body of the popover',
            position: 'left'
        }
    },
    {
     
	    element: '#status2',
        popover: {
     
	        title: '弹窗2',
            description: 'Body of the popover',
            position: 'top'
        }
    },
    {
     
	    element: '#status3',
        popover: {
     
	        title: '弹窗3',
            description: 'Body of the popover',
            position: 'right'
        }
    },
]);
this.$driver.start();

4、禁用外部点击关闭

const driver = new Driver({
     
    allowClose: false,//禁用外部点击关闭
});

driver.highlight({
     
  element: '#some-element',
  popover: {
     
    title: 'An italicized title',
    description: 'Description may also contain HTML'
  }
});

如果使用此选项，则对于多步驱动程序，将在完成弹出窗口后将其关闭，或者可以通过编程方式将其关闭。对于单元素弹出框，您需要正确关闭它，否则它不会被关闭。

driver.reset()

5、无遮罩层
只需要将不透明度设置为“ 0”。

const driver = new Driver({
     
    opacity: 0,
});

driver.highlight({
     
  element: '#run-element-without-popover',
  popover: {
     
    title: 'Title for the Popover',
    description: 'Description for it',
    position: 'top', // can be `top`, `left`, `right`, `bottom`
  }
});

6、api
驱动定义：

const driver = new Driver({
     
  className: 'scoped-class', // 包装类名
  animate: true,  // 动画
  opacity: 0.75,  // 遮罩层不透明度（0表示仅弹出且不覆盖）
  padding: 10,    // 边距
  allowClose: true, // 点击遮罩层是否关闭
  overlayClickNext: false, // Should it move to next step on overlay click
  doneBtnText: 'Done', // 最后一个按钮上的文本
  closeBtnText: 'Close', // “关闭”按钮上的文本
  nextBtnText: 'Next', // “下一步”按钮上的文本
  prevBtnText: 'Previous', // “上一步”按钮上的文本
  showButtons: false, // 不显示控制按钮（弹窗底部）
  keyboardControl: true, // 允许通过键盘进行控制（esc以关闭，箭头键移动）
  scrollIntoViewOptions: {
     }, // We use `scrollIntoView()` when possible, pass here the options for it if you want any
  onHighlightStarted: (Element) {
     }, // 在元素即将突出显示时调用
  onHighlighted: (Element) {
     }, // 当元素完全突出显示时调用
  onDeselected: (Element) {
     }, // 取消选择元素时调用
  onReset: (Element) {
     },        // 覆盖即将清除时调用
  onNext: (Element) => {
     },      // 在任何步骤转到下一步时调用
  onPrevious: (Element) => {
     },  // 在任何步骤转到上一步时调用
});

步骤定义：
会覆盖new Driver()定义的内容。

const stepDefinition = {
     
  element: '#some-item',       
  popover: {
                         
    className: 'popover-class', // 包装类名
    title: 'Title',             // 弹窗标题
    description: 'Description', // 弹窗内容
    showButtons: false,         // 不显示控制按钮（弹窗底部）
    closeBtnText: 'Close',      // “关闭”按钮上的文本
    nextBtnText: 'Next',        // “下一步”按钮上的文本
    prevBtnText: 'Previous',    // “上一步”按钮上的文本
  }
};

api方法：

const driver = new Driver(driverOptions);

const isActivated = driver.isActivated; //检查驱动程序是否处于活动状态

driver.defineSteps([ stepDefinition1, stepDefinition2, stepDefinition3 ]); // 步骤列表
driver.start(stepNumber = 0);  // 开始执行定义的步骤，stepNumber步骤索引
driver.moveNext();     // 转到步骤列表defineSteps中的下一步
driver.movePrevious(); // 转到步骤列表中的上一步
driver.hasNextStep(); // 检查是否有下一步
driver.hasPreviousStep(); // 检查是否有上一步

// 阻止当前移动。如果要执行某些异步任务并手动移到下一步，则在“onNext”或“onPrevious”中很有用
driver.preventMove();

driver.highlight(string|stepDefinition); // 使用查询选择器或步骤定义突出显示元素

driver.refresh(); // 重新定位弹出窗口和突出显示的元素

driver.reset(); // 重置覆盖并清除屏幕
//当你想在一个驱动程序运行时运行另一个驱动程序实例时，可以传递一个布尔参数来立即清除，而不执行动画等操作
driver.reset(clearImmediately = false);

driver.hasHighlightedElement(); // 检查是否有突出显示的元素
const activeElement = driver.getHighlightedElement(); // 获取屏幕上当前突出显示的元素
const lastActiveElement = driver.getLastHighlightedElement(); // 获取最后一个突出显示的元素
activeElement.getCalculatedPosition(); // 获取活动元素的屏幕坐标
activeElement.hidePopover();  // 隐藏弹窗
activeElement.showPopover();  // 显示弹窗

activeElement.getNode();  // 获取此元素后面的DOM元素