分步引导driver.js在vue中使用

1. 引入使用

1.1 安装

Driver.js的官网地址：Driver.js

npm安装：

npm install driver.js`

1.2 引入

全局引入：

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>

在组件内引入使用：

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

2.完整示例

2.1 html部分

<template>
  <div>
    <el-button type="primary" @click.prevent.stop="guide">
      展示引导
    </el-button>
  </div>
</template>

2.2 js部分

steps是分布引导的主题部分，创建的Driver用于控制主体的通用样式以及文本

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

export default {
  name: 'Guide',
  data() {
    return {
      driver: null
    }
  },
  mounted() {
    this.guide()
  },
  methods: {
    guide() {
      this.$nextTick(function() {
        this.driver = new Driver({
          doneBtnText: '完成', // 结束按钮的文字
          animate: true, // 动画
          stageBackground: '#ffffff', // 突出显示元素的背景颜色
          nextBtnText: '下一步', // 下一步按钮的文字
          prevBtnText: '上一步', // 上一步按钮的文字
          closeBtnText: '关闭' // 关闭按钮的文字
        })
        this.driver.defineSteps(steps)
        this.driver.start()
      })
    }
  }
}

在vue中使用需要加this.$nextTick(（）函数否则不生效，上面是主要使用部分，下面将全部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) => {},  // 在任何步骤转到上一步时调用
});

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元素

2.3 编写分步结构js文件

可以直接在index.vue文件内编写,推荐外文件引入方式，本次示例外部引入方式steps.js
其中
element ： DOM节点
stageBackground ： 内容的背景颜色样式
popover : 分步内容的主体
className ： 该节点的类名
title ： HTML标签title
description ： 分布引导中的描述部分
position ： 相对于高亮的部分，分步内容的位置

const steps = [
  {
    element: '#guide-navbar',
    popover: {
      className: 'guide-navbar',
      title: '<h4 class="head">头部导航栏</h4>',
      description: '<div class="detail">包括“菜单切换”、“风格切换”、“个性化设置”、“即时消息”等功能选项</div>',
      position: 'bottom'
    }
  },
  {
    element: '#guide-styleDown',
    stageBackground: '#364252',
    popover: {
      className: 'guide-navbar',
      title: '<h4 class="head">风格切换</h4>',
      description: '<div style="padding-right:80px;margin-top:38px;" class="detail">有“经典风格”、“清新风格”两个主题风格选项可供选择</div>',
      position: 'bottom'
    }
  },
  {
    element: '#guide-personalStyle',
    stageBackground: '#364252',
    popover: {
      className: 'guide-navbar',
      title: '<h4 class="head">个性化设置</h4>',
      description: '<div style="padding: 66px 120px 20px 40px" class="detail">用于设置展示风格、个性主题</div>',
      position: 'bottom'
    }
  },
  {
    element: '#guide-currentMsg',
    stageBackground: '#364252',
    popover: {
      className: 'guide-navbar',
      title: '<h4 class="head">即时消息通知</h4>',
      description: '<div style="padding: 45px 100px 15px 50px" class="detail">用于展示即时消息通知，点击可查看消息详情并可进行处理操作</div>',
      position: 'bottom'
    }
  },
  {
    element: '#guide-menu',
    stageBackground: '#001529',
    popover: {
      className: 'guide-navbar',
      title: '<h4 class="head">菜单栏</h4>',
      description: '<div style="padding:35px 80px 25px 40px;margin-bottom:-50px;" class="detail">此处显示所有的导航菜单，有“常规菜单”、“定制菜单”两种菜单，支持搜索功能，便于快捷查找菜单，点击菜单直接跳转到菜单界面</div>',
      position: 'right'
    }
  },
  {
    element: '#guide-quick-menu',
    popover: {
      className: 'guide-navbar',
      title: '<h4 class="head">快捷菜单</h4>',
      description: '<div style="padding:35px 80px 10px 40px;" class="detail">用于展示常用菜单，方便快速进入目标页面，并且可根据用户习惯添加删减快捷菜单</div>',
      position: 'bottom'
    }
  }
]

export default steps

2.4 样式调节部分

分步结构时 添加className属性值，再在index.vue文件中将想要的样式写在class里面（最好也是单独写一个css文件再引入，规范些），例如

    element: '#guide-quick-menu',
    popover: {
      className: 'guide-navbar',//此处类名用于修改这一步的样式
      title: '<h4 class="head">快捷菜单</h4>',
      description: '<div style="padding:35px 80px 10px 40px;" class="detail">用于展示常用菜单，方便快速进入目标页面，并且可根据用户习惯添加删减快捷菜单</div>',
      position: 'bottom'
    }

index.vue文件中：

.guide-navbar {
  height: 260px;
  max-width: 380px !important;
  background: url(./image/u266.png) no-repeat right !important;
}

这样就修改了这一步的宽高背景
但是由于权重问题，会有很多class不生效的问题，所以此处对样式的调节，我采用对标题跟详情描述通过添加标签的方式，对标签实现样式的修改（可通过行内样式修改）
然而对于driver.js的按钮（上一步、下一步、关闭）的样式调节就需要，f12查找样式来进行点对点修改并且通过！important来进行覆盖，这里我的修改如下

/* 标题样式 */
.head {
  color:#67C23A;
  margin-top: -10px;
}
.guide-navbar {
  height: 260px;
  max-width: 380px !important;
  background: url(./image/u266.png) no-repeat right !important;
}
/* 第一步详情 */
.detail {
  color: aqua;
  padding: 45px 50px 0;
  margin-bottom: 60px;
}
/* 上一步按钮 */
.driver-prev-btn{
  font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
  color:#fff !important;
  background-color: #409eff !important;
  text-shadow: 1px 1px 0 #409eff !important;
  border-color: #409eff !important;
  display: inline-block !important;
  line-height: 1 !important;
  white-space: nowrap;
  cursor: pointer;
  -webkit-appearance: none!important;
  text-align: center !important;
  box-sizing: border-box !important;
  outline: none !important;
  transition: .1s !important;
  font-weight: 400 !important;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  padding: 12px 20px !important;
  font-size: 14px !important;
  border-radius: 4px !important;
}
#driver-popover-item .driver-popover-footer {
  margin-top: 25% !important;
}
/* 按钮外的盒子 */
#driver-popover-item  .driver-btn-group {
  padding-left: 10% !important;
  float:none !important;
}
/* 下一步按钮 */
.driver-next-btn{
  margin-left: 30% !important;
  font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
  color:#fff !important;
  background-color: #409eff !important;
  text-shadow: 1px 1px 0 #409eff !important;
  border-color: #409eff !important;
  display: inline-block !important;
  line-height: 1 !important;
  white-space: nowrap;
  cursor: pointer;
  -webkit-appearance: none!important;
  text-align: center !important;
  box-sizing: border-box !important;
  outline: none !important;
  transition: .1s !important;
  font-weight: 400 !important;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  padding: 12px 20px !important;
  font-size: 14px !important;
  border-radius: 4px !important;
}
/* 关闭按钮 */
.driver-close-btn {
  display: none !important;
}
/* 整体盒子样式 */
 #driver-popover-item {
   -webkit-box-shadow: none !important;
   box-shadow: none !important;
 }

以上除了自定义的类名外，全是driver.js原生的底层样式