Driver.js 引導

錦歲發表於2020-06-02
JS

一、介紹
Driver.js 是一個輕量級（~ 4kb gzip），無需依賴但功能強大的原生 JavaScript 。相容所有主流瀏覽器，可幫助你將使用者的注意力集中在頁面上。

特色功能：
突出顯示頁面上的任何任何專案
鎖定使用者互動
建立功能介紹
為使用者新增聚焦器
高度可定製 – 可在任何地方使用，可覆蓋
介面友好 – 可通過按鍵控制
輕量級 – gzip 壓縮後只有約4kb
在所有主流瀏覽器中保持一致的行為

https://github.com/kamranahmedse/driver.js
https://kamranahmed.info/driver.js/

二、安裝
vue：

npm install driver.js

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

Vue.prototype.$driver = new Driver();

或下載後直接引入

<link rel="stylesheet" href="/dist/driver.min.css">
<script src="/dist/driver.min.js"></script>

三、用法：
1、突出單個元素，無彈窗
示例1：突出顯示

this.$driver.highlight('#status');

在這裡插入圖片描述
示例2：當使用者與之互動時突出顯示一個元素（文字框獲得焦點時突出）

document.getElementById('creation-input')
  .addEventListener('focus', (e) => {
    this.$driver.focus('#creation-input');
  });

在這裡插入圖片描述

2、突出顯示和彈出框
可以使用彈出視窗在突出顯示的元素旁邊顯示其他詳細資訊。
ps：如果未指定位置或將其指定為auto，它將自動找到彈出框的合適位置並顯示。
ps：title與description可指定html。

this.$driver.highlight({
	element: '#status',
    popover: {
		title: '彈窗標題',//也可以使用HTML標籤
        description: '彈窗內容',//也可以使用HTML標籤
        position: 'bottom',//位置，可選值： left, left-center, left-bottom, top, top-center, top-right, right, right-center, right-bottom, bottom, bottom-center, bottom-right, mid-center
        offset: 20,//位移大小
    }
});

在這裡插入圖片描述
3、設定分步引導介紹

this.$driver.defineSteps([
	{
		element: '#status1',
        popover: {
			title: '彈窗1',
            description: 'Body of the popover',
            position: 'left'
        }
    },
    {
	    element: '#status2',
        popover: {
	        title: '彈窗2',
            description: 'Body of the popover',
            position: 'top'
        }
    },
    {
	    element: '#status3',
        popover: {
	        title: '彈窗3',
            description: 'Body of the popover',
            position: 'right'
        }
    },
]);
this.$driver.start();

在這裡插入圖片描述
4、禁用外部點選關閉

const driver = new Driver({
    allowClose: false,//禁用外部點選關閉
});

driver.highlight({
  element: '#some-element',
  popover: {
    title: '<em>An italicized title</em>',
    description: 'Description may also contain <strong>HTML</strong>'
  }
});

如果使用此選項，則對於多步驅動程式，將在完成彈出視窗後將其關閉，或者可以通過程式設計方式將其關閉。對於單元素彈出框，您需要正確關閉它，否則它不會被關閉。

driver.reset()

5、無遮罩層
只需要將不透明度設定為“ 0”。

const driver = new Driver({
    opacity: 0,
});

driver.highlight({
  element: '#run-element-without-popover',
  popover: {
    title: 'Title for the Popover',
    description: 'Description for it',
    position: 'top', // can be `top`, `left`, `right`, `bottom`
  }
});

在這裡插入圖片描述
6、api
驅動定義：

const driver = new Driver({
  className: 'scoped-class', // 包裝類名
  animate: true,  // 動畫
  opacity: 0.75,  // 遮罩層不透明度（0表示僅彈出且不覆蓋）
  padding: 10,    // 邊距
  allowClose: true, // 點選遮罩層是否關閉
  overlayClickNext: false, // Should it move to next step on overlay click
  doneBtnText: 'Done', // 最後一個按鈕上的文字
  closeBtnText: 'Close', // “關閉”按鈕上的文字
  nextBtnText: 'Next', // “下一步”按鈕上的文字
  prevBtnText: 'Previous', // “上一步”按鈕上的文字
  showButtons: false, // 不顯示控制按鈕（彈窗底部）
  keyboardControl: true, // 允許通過鍵盤進行控制（esc以關閉，箭頭鍵移動）
  scrollIntoViewOptions: {}, // We use `scrollIntoView()` when possible, pass here the options for it if you want any
  onHighlightStarted: (Element) {}, // 在元素即將突出顯示時呼叫
  onHighlighted: (Element) {}, // 當元素完全突出顯示時呼叫
  onDeselected: (Element) {}, // 取消選擇元素時呼叫
  onReset: (Element) {},        // 覆蓋即將清除時呼叫
  onNext: (Element) => {},      // 在任何步驟轉到下一步時呼叫
  onPrevious: (Element) => {},  // 在任何步驟轉到上一步時呼叫
});

步驟定義：
會覆蓋new Driver()定義的內容。

const stepDefinition = {
  element: '#some-item',       
  popover: {                    
    className: 'popover-class', // 包裝類名
    title: 'Title',             // 彈窗標題
    description: 'Description', // 彈窗內容
    showButtons: false,         // 不顯示控制按鈕（彈窗底部）
    closeBtnText: 'Close',      // “關閉”按鈕上的文字
    nextBtnText: 'Next',        // “下一步”按鈕上的文字
    prevBtnText: 'Previous',    // “上一步”按鈕上的文字
  }
};

api方法：

const driver = new Driver(driverOptions);

const isActivated = driver.isActivated; //檢查驅動程式是否處於活動狀態

driver.defineSteps([ stepDefinition1, stepDefinition2, stepDefinition3 ]); // 步驟列表
driver.start(stepNumber = 0);  // 開始執行定義的步驟，stepNumber步驟索引
driver.moveNext();     // 轉到步驟列表defineSteps中的下一步
driver.movePrevious(); // 轉到步驟列表中的上一步
driver.hasNextStep(); // 檢查是否有下一步
driver.hasPreviousStep(); // 檢查是否有上一步

// 阻止當前移動。如果要執行某些非同步任務並手動移到下一步，則在“onNext”或“onPrevious”中很有用
driver.preventMove();

driver.highlight(string|stepDefinition); // 使用查詢選擇器或步驟定義突出顯示元素

driver.refresh(); // 重新定位彈出視窗和突出顯示的元素

driver.reset(); // 重置覆蓋並清除螢幕
//當你想在一個驅動程式執行時執行另一個驅動程式例項時，可以傳遞一個布林引數來立即清除，而不執行動畫等操作
driver.reset(clearImmediately = false);

driver.hasHighlightedElement(); // 檢查是否有突出顯示的元素
const activeElement = driver.getHighlightedElement(); // 獲取螢幕上當前突出顯示的元素
const lastActiveElement = driver.getLastHighlightedElement(); // 獲取最後一個突出顯示的元素
activeElement.getCalculatedPosition(); // 獲取活動元素的螢幕座標
activeElement.hidePopover();  // 隱藏彈窗
activeElement.showPopover();  // 顯示彈窗

activeElement.getNode();  // 獲取此元素後面的DOM元素

相關文章