快捷導(dǎo)航

Driver.js前端引導(dǎo)頁(yè)組件的具體使用

更新時(shí)間：2022年02月10日 10:10:54 作者：一枚小辣雞

Driver.js是一個(gè)引導(dǎo)插件，本文主要介紹了Driver.js前端引導(dǎo)頁(yè)組件的具體使用，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

一、介紹

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 是一個(gè)輕量級(jí)（~ 4kb gzip），無(wú)需依賴但功能強(qiáng)大的原生 JavaScript 。兼容所有主流瀏覽器，可幫助你將用戶的注意力集中在頁(yè)面上。即它是一個(gè)引導(dǎo)插件。

特色功能：

突出顯示頁(yè)面上的任何任何項(xiàng)目
鎖定用戶交互
創(chuàng)建功能介紹
為用戶添加聚焦器
高度可定制 – 可在任何地方使用，可覆蓋
界面友好 – 可通過(guò)按鍵控制
輕量級(jí) – gzip 壓縮后只有約4kb
在所有主流瀏覽器中保持一致的行為
免費(fèi)用于個(gè)人和商業(yè)用途

二、官方地址

github：https://github.com/kamranahmedse/driver.js

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

簡(jiǎn)單的安裝使用介紹（中文，非官方）：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"  rel="external nofollow" >

老樣子，感覺(jué)我已經(jīng)化身插件大師了，當(dāng)然是選擇npm…還是vue項(xiàng)目中使用。先在外創(chuàng)建一個(gè)driver.js的配置，寫入下面內(nèi)容，然后在入口引用(這里是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, //禁止點(diǎn)擊外部關(guān)閉
    doneBtnText: '完成', // 完成按鈕標(biāo)題
    closeBtnText: '關(guān)閉', // 關(guān)閉按鈕標(biāo)題
    stageBackground: '#fff', // 引導(dǎo)對(duì)話的背景色
    nextBtnText: '下一步', // 下一步按鈕標(biāo)題
    prevBtnText: '上一步', // 上一步按鈕標(biāo)題
})

一般使用都是給要引導(dǎo)的頁(yè)面創(chuàng)建相應(yīng)的數(shù)組對(duì)象導(dǎo)出使用。例如創(chuàng)建一個(gè)guide.js

export default [
    {
	 	element: '#demo1',
      	popover: {
        	title: '演示標(biāo)題1',
        	description: '這是詳細(xì)描述\n',
        	position: 'bottom-center'
      	}
    }
]

然后在相應(yīng)的頁(yè)面引用，例如，在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提供了較為不錯(cuò)的引導(dǎo)界面，通過(guò)數(shù)組對(duì)象的方式寫好引導(dǎo)相關(guān)配置，提供了較為豐富的接口，可以修改按鈕標(biāo)題、引導(dǎo)頁(yè)背景色、事件回調(diào)等。但是美中的是好像引導(dǎo)也沒(méi)有提供修改樣式的接口？獲取是我沒(méi)找的原因…？

到此這篇關(guān)于Driver.js前端引導(dǎo)頁(yè)組件的具體使用的文章就介紹到這了,更多相關(guān)Driver.js引導(dǎo)頁(yè)組件內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: