• ? Github Star:21.8k^[1]

• ? 官網(wǎng)^[2]

1、Driver.js 是什么？

Driver.js 是一個(gè)輕量級(jí)、無依賴的原生 JavaScript 庫(kù)，用于在頁(yè)面中創(chuàng)建用戶引導(dǎo)功能。它可以幫助開發(fā)者在網(wǎng)頁(yè)上添加引導(dǎo)步驟，指導(dǎo)用戶完成特定任務(wù)或了解新功能。Driver.js 的主要特點(diǎn)包括簡(jiǎn)單易用、高度可定制、能夠突出顯示頁(yè)面上的任意元素，以及提供了一系列強(qiáng)大的 API 來滿足不同的引導(dǎo)需求。

特性

• ? 輕量級(jí)：Driver.js 的大小僅約為 4kb，使用簡(jiǎn)單，獨(dú)立無依賴。

• ? 可定制：提供豐富的 API，可以根據(jù)需求自定義各種引導(dǎo)效果。

• ? 交互性：支持動(dòng)畫過渡，提供流暢的用戶體驗(yàn)。

• ? 顯示任何內(nèi)容：通過 Driver.js 可以突出顯示頁(yè)面上的任何 DOM 元素；支持幾乎所有瀏覽器，包含 IE。

2、快速開始

在項(xiàng)目使用 Driver.js，需要通過 npm 和 yarn 進(jìn)行安裝：

npm install driver.js
# 或者使用 yarn
yarn add driver.js

然后在項(xiàng)目中引入 Driver.js 和他的 css 文件：

import { onMounted } from 'vue'
// 引入 Driver.js 和 樣式
import { driver as Driver } from 'driver.js'
import 'driver.js/dist/driver.css'
// 創(chuàng)建 driver 對(duì)象
const driver = Driver({
  showProgress: true, // 顯示進(jìn)度
  steps: [ // 定義 Steps
    {
      element: '.animated-tour',
      popover: {
        title: '新手導(dǎo)航',
        description: '這是新手導(dǎo)航',
        side: 'left',
        align: 'start',
      },
    },
    {
      element: '.line:nth-child(1)',
      popover: {
        title: '新手導(dǎo)航',
        description: '第一步',
        side: 'bottom',
        align: 'start',
      },
    },
    // ...
  ],
})
onMounted(() => {
  driver.drive() // 開始預(yù)覽 “步驟”
})

3、常見屬性

全局配置：可以通過傳遞配置對(duì)象到 driver 函數(shù)調(diào)用或使用 setConfig 方法來全局配置 Driver.js。

const driver = new Driver({
  className: 'scoped-class', // 用于包裹 Driver.js 彈窗的類名
  animate: true, // 是否啟用動(dòng)畫
  opacity: 0.75, // 背景透明度
  padding: 10, // 元素與邊緣的距離
  allowClose: true, // 是否允許點(diǎn)擊遮罩關(guān)閉
  doneBtnText: '完成', // 完成按鈕上的文本
  // ... 其他配置選項(xiàng)
});

配置選項(xiàng)：

• ? steps: 步驟數(shù)組，用于設(shè)置產(chǎn)品導(dǎo)覽。

• ? animate: 是否對(duì)產(chǎn)品導(dǎo)覽進(jìn)行動(dòng)畫效果，默認(rèn)為 true。

• ? overlayColor: 覆蓋層顏色，默認(rèn)為黑色。

• ? smoothScroll: 是否平滑滾動(dòng)到突出顯示的元素，默認(rèn)為 false。

• ? allowClose: 是否允許通過點(diǎn)擊背景關(guān)閉彈出窗口，默認(rèn)為 true。

• ? overlayOpacity: 背景的不透明度，默認(rèn)為 0.5。

• ? stagePadding: 突出顯示元素與裁剪區(qū)域之間的距離，默認(rèn)為 10。

• ? stageRadius: 突出顯示元素周圍裁剪區(qū)域的半徑，默認(rèn)為 5。

• ? allowKeyboardControl: 是否允許鍵盤導(dǎo)航，默認(rèn)為 true。

• ? disableActiveInteraction: 是否禁用與突出顯示元素的交互，默認(rèn)為 false。

• ? popoverClass: 為彈出窗口添加自定義類。

• ? popoverOffset: 彈出窗口與突出顯示元素之間的距離，默認(rèn)為 10。

• ? showButtons: 彈出窗口中顯示的按鈕數(shù)組，默認(rèn)為 ["next", "previous", "close"]。

• ? disableButtons: 禁用的按鈕數(shù)組。

• ? showProgress: 是否在彈出窗口中顯示進(jìn)度文本，默認(rèn)為 false。

• ? progressText: 進(jìn)度文本模板。

• ? nextBtnText, prevBtnText, doneBtnText: 按鈕文本。

• ? 各種回調(diào)函數(shù)和鉤子（hooks），用于在不同階段執(zhí)行自定義邏輯。

Popover 配置：Popover 是 Driver.js 的主要 UI 元素，用于突出顯示目標(biāo)元素并顯示步驟內(nèi)容。可以全局或針對(duì)每個(gè)步驟配置 Popover。

Drive Step 配置：傳遞給 highlight 方法或 drive 方法的 steps 數(shù)組的配置對(duì)象。可以為每個(gè)步驟配置 Popover 和目標(biāo)元素。

狀態(tài)訪問：可以通過調(diào)用 getState 方法訪問 Driver.js 的當(dāng)前狀態(tài)，狀態(tài)對(duì)象也傳遞給鉤子和回調(diào)。

4、總結(jié)

Driver.js 是一個(gè)功能強(qiáng)大且易于使用的頁(yè)面引導(dǎo)工具，它可以幫助開發(fā)者改善用戶體驗(yàn)，提升產(chǎn)品的易用性。無論是在單頁(yè)應(yīng)用還是在傳統(tǒng)的網(wǎng)頁(yè)設(shè)計(jì)中，Driver.js 都能提供一種高效的方式來引導(dǎo)用戶注意并解釋重要的界面元素。