脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → Driver.js引导页组件

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

 更新时间：2022年02月10日 10:10:54   作者：一枚小辣鸡  
Driver.js是一个引导插件，本文主要介绍了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 install：

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提供了较为不错的引导界面，通过数组对象的方式写好引导相关配置，提供了较为丰富的接口，可以修改按钮标题、引导页背景色、事件回调等。但是美中的是好像引导也没有提供修改样式的接口？获取是我没找的原因…？

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

您可能感兴趣的文章:

相关文章

最新评论