简单实用的Driver.js教程（vue）

Driver.js是什么？

当点击进这篇文章的同学，看到标题，脸上会出现大大的问号，Driver.js是什么？有什么用。别急接下来，我将来讲解，什么是Driver.js.

Driver.js 是一个强大的，轻量级，使用原生 JavaScript 引擎开发的库，用于在页面聚焦用户的关注点。它支持所有主流浏览器，并且可高度自定义。

以下为其官网：

https://driverjs.com/

食用指南（vue版）

快速入手

效果展示

我们先来看一下driver.js的效果

效果图的代码讲解（引入driver.js）

接下来，我们看看vue的代码

<template>
  <div class="slide">
        <div class="slide_part" id='first'>
          <p>First</p>
        </div>
        <div class="slide_part"  id='second'>
          <p>Second</p>
        </div>
      </div>
</template>

<script>
import { driver } from "driver.js";
import "driver.js/dist/driver.css";
export default {
  data() {
    return {
      arr: [{
        element: '#first', // 这是需要高亮的元素
        popover: { // 引导展示数据
          title: '标题', // 这是标题
        }
      },
      {
        element: '#second',
        popover: {
          title: '标题', // 这是标题
        }
      },
      ]
    }
  },
  mounted() {
const driverObj = driver({
  showProgress: true,
  steps:this.arr
});
driverObj.drive();
  }
}
</script>

从代码上面来看

html:

我们创建了两个div标签作为两个盒子，分别放进了两句话，Frist、Second.

js:

在js上面我们导入了driver.js的库，并在data里面写入table数组，里面放了两个对象，其中对象的结构分别为element属性(相应的标签的id/需要高亮的元素)，popover对象（引导展示数据）里面又放了一个title属性（对相应标签的说明）。在钩子函数mounted中，我们创建了driver的实现类，这个类里面传递这几个属性，showProgress是否展示标签页，steps属性，告诉driver去对谁进行漫游。最后通过这个实现类的方法.drive()，去开启功能。

详细介绍

下载

官网提供了三种下载方式

# Using npm
npm install driver.js

# Using pnpm
pnpm install driver.js

# Using yarn
yarn add driver.js

导包

下载后，我们需要使用就得在对应的页面导包，如果全局都想要使用直接放main.js文件

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

使用

drive实例属性

我们先来谈一下：drive实例

创建实例

const driverObj = driver({里面写实例属性}）；
//或者这样写实例属性
driverObj.alloClose=true

实例属性介绍：

allowClose（bool）：点击覆盖是否应该关闭

就是你鼠标点击其他地方会不会关闭显示效果

这是allowClose为true的时候，点击其他地方，这些页面引导就没了，如果是false你点击其他地方，它也还在

opacity(0-1)：背景不透明度

这个没有什么好说明的

animate（bool）：动画时改变突出显示的元素

就是在切换下一个需要引导的点的时候动画更加流畅

如果是false就会是这样效果，看着不流畅。默认true

padding：元素到周围边缘的距离

这个也没啥好说的

popoverOffset（int）：弹窗与元素偏移距离

字面意思，你这个弹窗和元素距离多远喏

我把popoverOffset设置为100

发现偏移距离会很大

showProgress：是否显示弹窗进度

看到上面那张图1 0f 2了吧，你要是把这个设置成false，那个就没了

doneBtnText：最后一个按钮上的文本

doneBtnText:"羊羊羊"

nextBtnText：下一个按钮文本

prevBtnText：上一个按钮文本

上面nextBtnText与prevBtnText我放一起说

prevBtnText:"234",

nextBtnText:"123"

其实这里我有个疑惑，只有两个按钮嘛？因为我只引了两个阶段，如果我引三个阶段会发生上面？

我发现他好像就是把这两个按钮命名成下一个按钮和上一个按钮，所以上一个按钮一直叫“234”，下一个按钮一直叫“123”，想想drive.js的作用就是做新手引导的，似乎这样设计也没问题。

keyboardControl：允许通过键盘控制(escape键关闭，箭头键移动)

允许键盘控制喏

steps 属性（数组）：（重点）

举个例子：

const stepDefinition = {
  element: '#some-item',       
  popover: {                    
    className: 'popover-class',
    title: 'Title',             
    description: 'Description', 
    showButtons: false,         
    closeBtnText: 'Close',      
    nextBtnText: 'Next',       
    prevBtnText: 'Previous',  
    popoverClass: "driverjs-theme",
  }
};

element：要突出显示的查询选择器字符串或节点

如上面代码，'#some-item'，就是一个标签它的id叫some-item，我们要引导的东西就是这元素了，所以就写成 element: '#some-item',

popover

className：className来包装这个特定的步骤弹出窗口，除了驱动程序选项中的一般

classNametitle：弹出窗口上的标题

description：弹出窗口上的描述信息

showButtons：在页脚不显示控制按钮

closeBtnText：此步骤的关闭按钮上的文本

nextBtnText：此步骤的下一个按钮文本

prevBtnText：此步骤的上一个按钮文本

popoverClass：弹窗的自定义样式名

drive实例方法

常用方法介绍

const driver = new Driver(driverOptions);
 
const isActivated = driver.isActivated; 
driver.moveNext();     
driver.movePrevious(); 
driver.start(stepNumber = 0);  
driver.highlight(string|stepDefinition); 
driver.reset(); 
driver.hasHighlightedElement(); 
driver.hasNextStep(); 
driver.hasPreviousStep(); 
driver.preventMove();
 
const activeElement = driver.getHighlightedElement();
const lastActiveElement = driver.getLastHighlightedElement();
activeElement.getCalculatedPosition(); 
activeElement.hidePopover();  
activeElement.showPopover();  
 
activeElement.getNode();

isActivated：检查驱动程序是否激活

moveNext：移动到步骤列表中的下一步

movePrevious：移动到步骤列表中的上一步

start：开始执行定义的步骤

highlight：使用查询选择器或步骤定义突出显示元素

reset：重置覆盖并清除屏幕

hasHighlightedElement：检查是否有突出显示的元素

hasNextStep：检查是否有下一步要进行

hasPreviousStep：检查是否有上一步要移动

preventMove：阻止当前移动。有用的' onNext '或' onPrevious '，如果你想；执行一些异步任务并手动移动到下一步

getCalculatedPosition：获取屏幕上当前突出显示的元素

getCalculatedPosition：获取活动元素的屏幕坐标

hidePopover：隐藏弹出窗口

showPopover：显示弹出窗口

getNode：获取该元素背后的DOM元素

highlight

const driverObj = driver({
  popoverClass: "driverjs-theme",
  stagePadding: 4,
});

driverObj.highlight({
  element: "#highlight-me",
  popover: {
    side: "bottom",
    title: "This is a title",
    description: "This is a description",
  }
})

看这个代码就懂，为啥我highlight（）方法说和直接给steps放数组一样

退出时确认

覆盖，如果关闭覆盖，我们可以点击其他地方来退出，或者使用键盘的esc也可以退出，为了多一部在用户试图退出浏览时添加确认对话框或其他逻辑。我们可以利用onDestroyStarted钩子函数来做一次判断

 onDestroyStarted: () => {
    if (!driverObj.hasNextStep() || confirm("Are you sure?")) {
      driverObj.destroy();
    }
  },

Popover Position 弹出框位置

可以使用 side 和 align 选项控制弹出框的位置。 side 选项控制将显示弹出框的元素的一侧， align 选项控制弹出框与元素的对齐。

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

const driverObj = driver();
driverObj.highlight({
  element: '#left-start',
  popover: {
    title: 'Animated Tour Example',
    description: 'Here is the code example showing animated tour. Let\'s walk you through it.',
    side: "left",
    align: 'start'
  }
});

注意这里面的side: 与 align: 可以通过下方的页面去试下面按钮的值分别对应side与align的值

https://driverjs.com/docs/popover-position

小demo

感谢各位能够看到这里，我这里准备了一份代码给各位，快去试试吧！！！！！

<template>
  <div>
  <input type="text" id="name" v-on:focus="w1">
  </div>
</template>

<script>
import { driver } from "driver.js";
import "driver.js/dist/driver.css";
export default {
  data() {
    return {
      driverObj: new driver({ popoverClass: "driverjs-theme",
      stagePadding: 0,}),
    }
  },
  methods: {
    w1() {
      this.driverObj.highlight({
    element: "#name",
    popover: {
      title: "Name",
      description: "Enter your name here",
    },
  });
    },
  },
}
</script>