vue2 +driver 实现页面导航提示引导

简介及使用教程

Driver.js是一个功能强大且高度可定制的基于原生JavaScript开发的新用户引导库。它没有依赖项，支持所有主要浏览器。

特点：

简单：简单易用，完全没有外部依赖
高度可定制：有一个强大的api，可以用于你希望突出显示任何内容
高亮显示：页面功能介绍上的任意元素(字面上的任意)
功能介绍：为你的web应用程序创建强大的功能介绍
焦点移位器：为用户友好添加焦点移位器
用户友好：通过键盘行为控制一切
一致行为：所有浏览器(包括著名的IE)都可以使用

1.安装

因为我需要修改driver.min.css文件的代码，所以我把js、css都下载到本地了（版本号：0.9.3）

cdn driver.js下载链接（下载js和css）

javascript 复制代码

https://cdnjs.com/libraries/driver.js/0.9.3

1.1定义driver.js文件

我的所有引导组件都在弹窗中，所以需要单独的方法处理，需要传递父节点,就进行dom添加操作。并且增加了引导完成标识位，默认只引导一次。标识位存入到本地存储中（支持多个文件）

javascript 复制代码

import Driver from './driver.min' // import driver.js
import './driver.min.css' // import driver.js css
let driver = new Driver({
  opacity: 0.75,
  allowClose: true, // 不允许关闭
  keyboardControl: true, // 禁用键盘控制（ESC 无效）
  nextBtnText: '下一步',
  prevBtnText: '上一步',
  closeBtnText: '关闭',
  doneBtnText: '关闭',
  onReset: (data) => { // 引导结束触发
    // 这段代码目的是引导完成之后回到页面顶部
    let top = document.documentElement.scrollTop || document.body.scrollTop;
    let timer = setInterval(() => {
      let ispeed = Math.floor(-top / 5)
      top = document.documentElement.scrollTop = document.body.scrollTop = top + ispeed
      if (top === 0) {
        clearInterval(timer)
      }
    }, 20);

    //引导页完成
    if (driver.guideKey) {
      localStorage.setItem(driver.guideKey, 'true');
    }
  },
  onNext: (data) => { // 引导进入下一步触发

  },
})

export function dri(cls, type, guideKey) {
  setTimeout(() => {
    driv(cls, type, guideKey)
  }, 500)
}

export function resetDri() {
  // 重置遮罩并且清屏
  driver.reset()
}

function driv(cls, type, guideKey) {
  driver.guideKey = guideKey;
  driver.defineSteps(type)
  driver.start()
  setTimeout(() => {
    // 如果传入了父节点,就进行dom添加操作
    if (cls) {
      let driver_one = document.querySelector('#driver-page-overlay')
      let driver_two = document.querySelector(
        '#driver-highlighted-element-stage'
      )
      let obj = document.querySelector(cls)
      let pa = obj.parentNode
      pa.appendChild(driver_one)
      pa.appendChild(driver_two)
    }
  })
}

1.2定义driverStepe.js文件

javascript 复制代码

/**
 * 引导元素信息配置
 * 上一步下一步按钮文字都可以配置
 */
export default {
  testList: [{
      element: '#test1',
      popover: {
        title: '标题1',
        description: '描述1',
        position: 'top',
        className: 'spareemailstyle',
        nextBtnText: '(1/3)下一步',
        prevBtnText: '上一步',
        closeBtnText: "跳过"
      }
    },
    {
      element: '#test2',
      popover: {
        title: '标题2',
        description: '描述2',
        position: 'top',
        className: 'spareemailstyle',
        nextBtnText: '(2/3)下一步',
        prevBtnText: '上一步',
        closeBtnText: "跳过"
      }
    },
    {
      element: '#test3',
      popover: {
        title: '标题3',
        description: '描述三',
        position: 'top',
        className: 'spareemailstyle',
        nextBtnText: '(3/3)下一步',
        prevBtnText: '上一步',
        doneBtnText: '完成',
        closeBtnText: "跳过"
      }
    },
  ]
  // 还可以继续补充
};

1.3 main.js中全局注册dri方法

javascript 复制代码

//界面引导组件
import { dri } from "@/utils/driver.js";
Vue.prototype.$dri = dri;

1.4在.vue文件里面的使用

如果不是在弹窗组件中使用不需要添加父级类名 this.$dri第一个参数可传空字符串

javascript 复制代码

<template>
  <div>
    <!-- 测试 -->
    <el-dialog
      title="提示"
      :visible.sync="areaShow"
      width="30%"
      :before-close="handleClose"
      custom-class="add-area-dialog"
    >
      <el-input id="test1" placeholder="测试引导1"></el-input>
      <el-input id="test2" placeholder="测试引导2"></el-input>
      <el-input id="test3" placeholder="测试引导3"></el-input>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <el-button @click="testBtn">测试</el-button>
  </div>
</template>

<script>
import driverStep from "@/utils/driverStepe";
export default {
  name: "attachmentTest",
  data() {
    return {
      areaShow: false,
    };
  },
  mounted() {},

  methods: {
    testBtn() {
      this.areaShow = true;
      this.$nextTick(() => {
        let driver = localStorage.getItem("testList");
        if (!driver) {
          this.$dri(".add-area-dialog", driverStep.testList, "testList");
        }
      });
    },
    handleClose() {
      this.areaShow = false;
    },
  },
};
</script>

1.5效果图