Driver.js-分步指引外掛

Driver.js是一個用於凸顯頁面的某一部分的外掛。改外掛可以在直接引入到頁面中使用，也可引入到vue專案中使用，但如果在vue專案中使用到UI框架，或在分步指引中斷層，小編不推薦使用該外掛來實現分步指引。
1、直接引入js、css使用

<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">

2、npm 安裝使用

npm install driver.js

初始化：

const driver = new Driver();

初始化（帶有配置引數）：

const driver = new Driver({
{
  className: 'scoped-class', // className to wrap driver.js popover 蒙層類名
  animate: true,  // Animate while changing highlighted element 在切換上一步或下一步時是否使用動畫效果
  opacity: 0.75,  // Background opacity (0 means only popovers and without overlay) 蒙層透明度
  padding: 10,    // Distance of element from around the edges 突出的元素padding值
  allowClose: true, // Whether clicking on overlay should close or not 是否允許點選蒙層關閉
  overlayClickNext: false, // Should it move to next step on overlay click 點選蒙層是否跳至下一步
  doneBtnText: 'Done', // Text on the final button 最後一步後需要執行的按鈕文案
  closeBtnText: 'Close', // Text on the close button for this step 關閉按鈕文案
  nextBtnText: 'Next', // Next button text for this step 下一步的按鈕文案
  prevBtnText: 'Previous', // Previous button text for this step 上一步的按鈕文案
  showButtons: false, // Do not show control buttons in footer 是否顯示以上提到的這些按鈕
  keyboardControl: true, // Allow controlling through keyboard (escape to close, arrow keys to move) 是否允許鍵盤按鍵控制
  scrollIntoViewOptions: {}, // We use `scrollIntoView()` when possible, pass here the options for it if you want any 突出區域滾動配置
  onHighlightStarted: (Element) {}, // Called when element is about to be highlighted 元素高亮/凸顯開始時
  onHighlighted: (Element) {}, // Called when element is fully highlighted 元素高亮/凸顯時
  onDeselected: (Element) {}, // Called when element has been deselected 元素高亮/凸顯取消時
  onReset: (Element) {},        // Called when overlay is about to be cleared 元素高亮/凸顯關閉時
  onNext: (Element) => {},      // Called when moving to next step on any step 下一步需執行
  onPrevious: (Element) => {},  // Called when moving to next step on any step 上一步需執行
}
})

使用：
1、若只用一個元素需要凸顯且只有一步時

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

2、存在多步時

driver.defineSteps([
  {
    element: '#first-element-introduction',
    popover: {
      className: 'first-step-popover-class',
      title: 'Title on Popover',
      description: 'Body of the popover',
      position: 'left' //提示框的位置 `top`, `left`, `right`, `bottom`,類似於tootip文字提示的位置
    }
  },
  {
    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'
    }
  },
]);
// Start the introduction
driver.start();

有些同學可能會說，哪怕只有一步，是不是也可以這麼寫：

driver.defineSteps([
  {
    element: '#first-element-introduction',
    popover: {
      className: 'first-step-popover-class',
      title: 'Title on Popover',
      description: 'Body of the popover',
      position: 'left'
    }
  }
]);
// Start the introduction
driver.start();

NO,NO,NO,小編起初也是這麼想的，想的挺美，但事實太殘酷。如果這樣寫，系統會丟擲錯誤，找不到下一步在哪兒，如果只有一步的時候非要用多步的寫法，就寫個空的元素類名。例如，只是想突出test1而已，就需要一個不需要的test2,就可以採用以下寫法。

<div class"test1">1111</div>
<div class="test2"></div>
driver.defineSteps([
  {
    element: '.test1',
    popover: {
      className: 'first-step-popover-class',
      title: 'Title on Popover',
      description: 'Body of the popover',
      position: 'left'
    },
    {
    	 element: '.test2',
    }
  }
]);
// Start the introduction
driver.start();

方法（API）:

const isActivated = driver.isActivated; // Checks if the driver is active or not 檢查當前是否正在高亮元素
driver.moveNext();     // Moves to next step in the steps list 移動到下一步
driver.movePrevious(); // Moves to previous step in the steps list 移動到上一步
driver.start(stepNumber = 0);  // Starts driving through the defined steps 指定從哪一步開始
driver.highlight(string|stepDefinition); // highlights the element using query selector or the step definition 高亮的元素
driver.reset(); // Resets the overlay and clears the screen 多用於單元素彈出框關閉，如果不手動正確關閉它不會自動正確關閉
driver.hasHighlightedElement(); // Checks if there is any highlighted element 檢查是否存在高亮的元素
driver.hasNextStep(); // Checks if there is next step to move to 檢查是否存在下一步
driver.hasPreviousStep(); // Checks if there is previous step to move to 檢查是否存在上一步

// Prevents the current move. Useful in `onNext` or `onPrevious` if you want to
// perform some asynchronous task and manually move to next step
driver.preventMove(); //停止移動

const activeElement = driver.getHighlightedElement(); //獲取正在高亮的元素
const lastActiveElement = driver.getLastHighlightedElement(); //獲取最後一個高亮的元素
activeElement.getCalculatedPosition(); // Gets screen co-ordinates of the active element 獲取正在高亮的元素位置
activeElement.hidePopover();  // Hide the popover 隱藏提示框
activeElement.showPopover();  // Show the popover 顯示提示框

activeElement.getNode();  // Gets the DOM Element behind this element  獲取目前正在高亮的元素的下一個元素節點

最後，小編有句話不知道當講不當講，Driver.js還不夠完善，對於樣式複雜的分步指引是不適合的。個人認為，在vue中，如果只有UI框架，還不如直接使用UI框架的彈出框搭配遮罩層（Overlay ），自己佈局控制顯隱來得快。小編在剛結束的專案中，一開始就是用Driver.js花了一兩天的時間來實現，結果通過自己來佈局控制顯隱只花了一個小時不到，而且還沒有bug，就算有bug也清楚問題出在哪兒。

官網連結地址：https://kamranahmed.info/driver.js/
gitlab地址：https://github.com/kamranahmedse/driver.js