介紹

driver.js是一個網頁端的使用者操作分步引導操作，可以在整個頁面上引導使用者操作，用這種方式來引導使用者在進入頁面後的操作，以便於使用者更快的熟悉系統功能！

Github

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

特性

driver.js與所有主要瀏覽器相容，可以用於任何覆蓋需要。功能介紹、焦點轉移、行動要求只是幾個例子。

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

在最簡單的情況下，它將畫布放在整個頁面的頂部，然後剪下要高亮顯示的元素上的部分，並在高亮顯示、高亮顯示或取消高亮顯示元素時為您提供多個掛鉤，使其高度可定製。

安裝使用

yarn add driver.jsnpm install driver.js

引入

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

突出顯示單個元素

const driver = new Driver();driver.highlight('#create-post');

Popover和突出顯示

可以使用popover在高亮顯示的元素旁邊顯示其他詳細資訊。

const driver = new Driver();driver.highlight({  element: '#some-element',  popover: {    title: 'Title for the Popover',    description: 'Description for it',  }});

定位Popover

預設情況下，會自動為popover找到合適的位置並顯示它。可以使用“position”屬性覆蓋它。

const driver = new Driver();driver.highlight({  element: '#some-element',  popover: {    title: 'Title for the Popover',    description: 'Description for it',    position: 'left',    //還可以使用offset    offset: 20,  }});

最基本的完整建立功能介紹

const driver = new Driver();// 定義介紹步驟driver.defineSteps([  {    element: '#first-element-introduction',    popover: {      className: 'first-step-popover-class',      title: 'Title on Popover',      description: 'Body of the popover',      position: 'left'    }  },  {    element: '#second-element-introduction',    popover: {      title: 'Title on Popover',      description: 'Body of the popover',      position: 'top'    }  },  {    element: '#third-element-introduction',    popover: {      title: 'Title on Popover',      description: 'Body of the popover',      position: 'right'    }  },]);// 開始介紹driver.start();

等等後續可訪問官方的demo

APIdriver.js定義

const driver = new Driver({  className: 'scoped-class',          animate: true,                      opacity: 0.75,                     padding: 10,                       allowClose: true,                  overlayClickNext: false,            doneBtnText: 'Done',                closeBtnText: 'Close',             stageBackground: '#ffffff',       nextBtnText: 'Next',               prevBtnText: 'Previous',            showButtons: false,                keyboardControl: true,              scrollIntoViewOptions: {},          onHighlightStarted: (Element) => {},   onHighlighted: (Element) => {},        onDeselected: (Element) => {},         onReset: (Element) => {},              onNext: (Element) => {},                      onPrevious: (Element) => {},               });

步驟定義

const stepDefinition = {  element: '#some-item',         stageBackground: '#ffffff',     popover: {                        className: 'popover-class',     title: 'Title',                 description: 'Description',     showButtons: false,             doneBtnText: 'Done',            closeBtnText: 'Close',          nextBtnText: 'Next',            prevBtnText: 'Previous',     },  onNext: () => {},               onPrevious: () => {},         };

const driver = new Driver(driverOptions);driver.defineSteps([    stepDefinition1,    stepDefinition2,    stepDefinition3,    stepDefinition4,]);

總結

driver.js是一個非常值得使用的外掛，對於一個系統，對於一個新使用者而言，有一個簡單的步驟引導可以更加快速的熟悉接下來的操作功能！