Driverjs实现新用户指引

一、driver.js是基于原生JavaScript开发的新用户指导库。

Driver.js官网地址：Driver

GitHub地址：GitHub - kamranahmedse/driver.js: A light-weight, no-dependency, vanilla JavaScript engine to drive the user's focus across the page

二、安装、引入依赖

npm i driver.js --save

yarn add driver.js

import Driver from 'driver.js';  // 引入库

import 'driver.js/dist/driver.min.css';  // 引入CSS

 三、配置说明

defineSteps()方法的参数为数组类型，数组中元素就是要执行的引导步骤。step 选项包括：

[{
  element: '#item',                          // 需要被高亮的元素选择器
  popover: {                                    // 弹框内容，如果为空将不会显示弹窗
    className: 'popover-class',     // 额外指定的当前步骤弹窗类名
    title: '第一步',                            // 弹窗的标题
    description: '该步骤是用于xxx', // 弹窗的主体内容
    showButtons: false,                  // 是否在弹窗底部显示控制按钮
    closeBtnText: '关闭',                 // 关闭按钮的文本
    nextBtnText: '下一步',               // 当前步骤的下一步按钮文本
    prevBtnText: '上一步',              // 当前步骤的上一步按钮文本
    doneBtnText: '完成'                 // 最后一步完成按钮文本
  }
}]

 diver对象配置参数说明：

const driver = new Driver({
  className: '类名',           //包裹driver.js弹窗的类名
  animate: true,                                // 高亮元素改变时是否显示动画
  opacity: 0.75,                                 //背景透明度(0 表示只有弹窗并且没有遮罩)
  padding: 10,                                  // 元素与边缘的距离
  allowClose: true,                           // 是否允许点击遮罩时关闭
  overlayClickNext: false,                //是否允许点击遮罩时移到到下一步
  doneBtnText: 'Done',                    // 最终按钮上的文本
  closeBtnText: 'Close',                   // 当前步骤关闭按钮上的文本
  nextBtnText: 'Next',                      //当前步骤下一步按钮上的文本
  prevBtnText: 'Previous',               // 当前步骤上一步按钮上的文本
  showButtons: false,                     //是否在底部显示控制按钮
  keyboardControl: true,                 // 是否允许通告键盘控制(escape关闭，箭头键用于移动)
  scrollIntoViewOptions: {},             //  `scrollIntoView()` 方法的选项
  onHighlightStarted: (Element) {}, // 元素开将要高亮时调用
  onHighlighted: (Element) {},        // 元素开完全高亮时调用
  onDeselected: (Element) {},        // 取消选择时调用
  onReset: (Element) {},                 // 遮罩将要关闭时调用
  onNext: (Element) => {},             // 任何步骤中移到到下一步时调用
  onPrevious: (Element) => {},      // 任何步骤中移到到上一步时调用
});

driver 对象还提供一系列强大的API方法，如下：

const isActivated = driver.isActivated; // 检查driver是否激活
driver.moveNext();     // 移动到步骤列表中的下一步
driver.movePrevious(); // 移动到步骤列表中的上一步
driver.start(stepNumber = 0);  // 从指定的步骤开始
driver.highlight(string|stepDefinition); // 高亮通过查询选择器指定的或步骤定义的元素 
driver.reset(); // 重置遮罩并且清屏
driver.hasHighlightedElement(); //检查是否有高亮元素
driver.hasNextStep(); // 检查是否有可移动到的下一步元素
driver.hasPreviousStep(); // 检查是否有可移动到的上一步元素
driver.preventMove();// 阻止当前移动。如果要执行某些异步任务并手动移动到下一步，则在“onNext”或“onPrevious”中很有用

const activeElement = driver.getHighlightedElement();// 获取屏幕上当前高亮元素
const lastActiveElement = driver.getLastHighlightedElement();
activeElement.getCalculatedPosition(); // 获取活动元素的屏幕坐标
activeElement.hidePopover();  // 隐藏弹窗
activeElement.showPopover();  // 显示弹窗
activeElement.getNode();  // 获取此元素后面的DOM元素

四、代码实现

 <template>
  <div class="test-guide">
    <h1>测试driver.js</h1>
    <el-button id="first-ele" type="primary">首页</el-button>
    <el-button id="second-intro" type="warning">帮助</el-button>
    <el-button id="third-des" type="primary">联系我们</el-button>
  </div>
</template>
<script>
import "driver.js/dist/driver.min.css";
import Driver from "driver.js";
export default {
  mounted() {
      this.showTips();
  },
  methods: {
    showTips() {
      const driver = new Driver({
        prevBtnText: "上一步",
        nextBtnText: "下一步",
        doneBtnText: "我知道了",
        closeBtnText: "关闭",
      });
      const steps = [
        {
          element: "#first-ele",
          popover: {
            title: "这是本站首页",
            description: "本站首页是一些展示性的信息",
            position: "bottom"
          }
        },
        {
          element: "#second-intro",
          popover: {
            title: "这是帮助",
            description: "点此处可获取一些本站的相关说明",
            position: "top"
          }
        },
        {
          element: "#third-des",
          popover: {
            title: "联系我们",
            description: "点击这里可获取我们的相关信息",
            position: "right"
          }
        }
      ];
      driver.defineSteps(steps);
      driver.start();
    }
  }
};
</script>
<style lang="scss">
.test-guide {
  color: #ffa0a0;
}
</style>