Driver.js 前端引导页组件的具体使用

一、介绍

Driver.js Powerful, highly customizable vanilla JavaScript engine to drive the user’s focus across the page No external dependencies, supports all major browsers and highly customizable

Driver.js 是一个轻量级（约 4kb gzip 压缩后），无需外部依赖但功能强大的原生 JavaScript 库。它兼容所有主流浏览器，旨在帮助用户将注意力集中在页面的特定区域，本质上是一个用户引导插件。

主要特色功能包括：

• 高亮显示页面上的任意元素
• 锁定用户交互操作
• 创建功能介绍流程
• 为用户提供视觉聚焦效果
• 高度可定制——可在任意位置使用，支持覆盖配置
• 界面友好——支持键盘按键控制
• 轻量级——gzip 压缩后仅约 4kb
• 在所有主流浏览器中保持行为一致
• 个人和商业用途免费

二、官方地址

GitHub 仓库：https://github.com/kamranahmedse/driver.js

用法和用例介绍：https://kamranahmed.info/driver.js/

简单的安装使用介绍（中文，非官方）：http://f2ex.cn/driver-js/

三、使用方法

提供两种安装方式： 方式一：通过 npm 安装：

npm install driver.js

方式二：通过链接直接引用。

<script src="https://unpkg.com/driver.js/dist/driver.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/driver.js/dist/driver.min.css" rel="external nofollow" >

通常建议采用 npm 方式，特别是在 Vue 项目中使用。首先在外层创建一个 driver.js 配置文件，写入相关初始化代码，然后在入口文件（如 main.js）中引入该配置。

import Vue from 'vue';
import Driver from 'driver.js'
import 'driver.js/dist/driver.min.css'

Vue.prototype.$driver = new Driver({
    allowClose: false, //禁止点击外部关闭
    doneBtnText: '完成', // 完成按钮标题
    closeBtnText: '关闭', // 关闭按钮标题
    stageBackground: '#fff', // 引导对话的背景色
    nextBtnText: '下一步', // 下一步按钮标题
    prevBtnText: '上一步', // 上一步按钮标题
})

一般使用时，需为需要引导的页面创建相应的数组对象并导出。例如，创建一个 guide.js 文件。

export default [
    {
	 	element: '#demo1',
      	popover: {
        	title: '演示标题1',
        	description: '这是详细描述\n',
        	position: 'bottom-center'
      	}
    }
]

随后在具体的页面组件中引入该配置，例如在 home.vue 中使用。

<template>
    <div id="demo1">演示1</div>
</template>

<script>
import guide from '../guide/guide'

export default {
    name: 'Home',
    mounted() {
        this.$driver.defineSteps(guide);
        this.$driver.start();
    },
}
</script>

四、效果演示

五、使用感受

Driver.js 提供了较为完善的引导界面，通过数组对象方式编写引导配置，并提供了丰富的接口，允许修改按钮标题、引导页背景色及事件回调等。美中不足的是，似乎未提供直接修改引导弹窗样式的接口（也可能是尚未找到相关配置）。

到此这篇关于 Driver.js 前端引导页组件的具体使用的文章就介绍到这了，更多相关 Driver.js 引导页组件内容请搜索本站以前的文章或继续浏览下面的相关文章，希望大家以后多多支持本站！