在部分网站中，我们会发现一个挺有意思的功能，那就是 功能引导

• 当前是在 vue项目中使用

安装 driver.js

• 官网地址：https://kamranahmed.info/driver.js/
• 使用 npm i driver.js@0.9.8，安装完成后，在 main.js 中进行配置

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

Vue.prototype.$driver = new Driver({
  className: 'scoped-class', // className to wrap driver.js popover
  animate: true, // Animate while changing highlighted element
  stageBackground: 'transparent',
  opacity: 0.75, // Background opacity (0 means only popovers and without overlay)
  padding: 0, // Distance of element from around the edges
  allowClose: true, // Whether clicking on overlay should close or not
  overlayClickNext: false, // Should it move to next step on overlay click
  doneBtnText: '完成', // Text on the final button
  closeBtnText: '关闭Esc', // Text on the close button for this step
  nextBtnText: '下一条->', // Next button text for this step
  prevBtnText: '<-上一条' // Previous button text for this step
})

页面使用

<button onClick="openDriver">功能引导</button>

// 导入 功能引导配置
import guideConfigs from '@/guides'

openDriver() {
  // 当前是使用 router name 作为的 功能引导配置的 key
  if(this.$route.name != undefined) return
  
  // 通过 router name 获取当前页面的 功能引导配置
  const driverConfig = guide[this.$route.name]
  if(!driverConfig) return
  
  // 开启 功能引导
  this.$driver.defineSteps(driverConfig)
  this.$driver.start()
}

配置

文件目录 src/guides

// src/guides/index.js

/**
 * 获取 ./ 文件下所有文件
 * @param {string}：路径
 * @param {boolean}：是否拷贝子文件内容
 * @param {RegExp}：以 .js 结尾的所有文件
 */
const modules = require.context('./', true, /\.js$/i)

export default modules.keys().reduce((reduce, key) => {
  return { ...reduce, ...modules(key).default }
})

模块

文件目录 src/guides/modules

• 新建页面配置，例：sysHome.js(sysHome 为 router name ，方便后期维护)
• 有需要前提下，可以通过不同 文件夹名称，来对配置进行分组(index.js中已经做了工程化导入)
  • src/guides/modules/user/login.js
• 真实效果 如图

/**
 * 首页 功能引导 配置
 * path: src/guides/modules/sysHome.js
 */
export default {
  // router name
  sysHome: [
    // 面包屑
    {
      element: '#breadCrumb', // 选择器，通过 document.querySelector 来进行节点的获取
      popover: {
        title: '面包屑导航', // 标题
        description: '点击名称进入对应界面',// 详细描述
        position: 'bottom'// 功能引导显示在当前 dom节点的 那个位置
      }
    },
    // 查询区域
    {
      element: '.query-wrap .select-item .data-picker',
      popover: {
        title: '查询区域',
        description: '通过条件查询对应数据',
        position: 'bottom-right'
      }
    }
  ]
}

position取值

• 如其名，通过名字即可明白展示位置

 left, left-center, left-bottom, 
 top, top-center, top-right, 
 right, right-center, right-bottom,
 bottom, bottom-center, bottom-right, 
 mid-center

写在最后

如有问题，欢迎指教，共同学习

更多配置，请进入官网查看

• 官网地址：https://kamranahmed.info/driver.js/