前端使用Driver.js快速實現(xiàn)新手指引全步驟及實現(xiàn)原理

更新時間：2025年09月09日 10:21:30 作者：yuan溜溜

Driver.js?是一個功能強大且高度可定制的基于原生JavaScript開發(fā)的新用戶引導庫,這篇文章主要介紹了前端使用Driver.js快速實現(xiàn)新手指引全步驟及實現(xiàn)原理的相關資料,文中通過代碼介紹的非常詳細,需要的朋友可以參考下

前言

在當今復雜的前端應用生態(tài)中，一個清晰、友好的新手指引（Tour Guide）對于提升用戶體驗和留存率至關重要。它能夠幫助用戶快速熟悉產(chǎn)品功能，降低學習成本。在眾多的指引庫中，Driver.js 以其輕量、靈活和無依賴的特性脫穎而出。

本文將帶你快速上手 Driver.js，并深入剖析其背后的實現(xiàn)原理，讓你不僅會使用，更能理解其工作機制。

一、什么是 Driver.js？

Driver.js 是一個輕量級（~4kB）、無外部依賴、高度可定制且強大的引導庫。它能夠通過高亮、彈窗解釋和聚焦的方式，將用戶的注意力吸引到頁面的特定元素上，從而完成產(chǎn)品引導、功能介紹或焦點聚焦等任務。

核心特點：

零依賴：基于純 JavaScript 實現(xiàn)，不依賴 jQuery、React 等。
輕量級：極小的體積，對項目性能影響微乎其微。
高可定制性：可以自定義彈出框的樣式、文字、位置、動畫等。
強大的 API：提供豐富的生命周期鉤子和方法，滿足各種復雜交互。
無障礙支持：對屏幕閱讀器友好，遵循可訪問性最佳實踐。

二、快速上手：5分鐘實現(xiàn)新手指引

步驟 1：安裝

你可以通過 npm/yarn 安裝，也可以直接通過 CDN 引入。

方式一：NPM/Yarn

npm install driver.js
# 或
yarn add driver.js

方式二：CDN (直接在 HTML 中引入)

<!-- 引入 CSS -->
<link rel="stylesheet"  rel="external nofollow" />

<!-- 引入 JS -->
<script src="https://cdn.jsdelivr.net/npm/driver.js@1.0.1/dist/driver.js.iife.js"></script>

步驟 2：初始化并啟動引導

假設我們有一個react頁面，需要引導用戶使用

JavaScript 代碼:

import React, { useEffect, useRef } from 'react'
import { driver } from 'driver.js'
import "driver.js/dist/driver.css";
import './test.less'
const Driver = () => {
  const driverRef = useRef(null);
  // 添加全局函數(shù)供彈出框使用
  window.handleGuideClick = () => {
    driverRef.current.destroy();
  };
  const WELCOME_IMAGE = 'https://images.unsplash.com/photo-1533750349088-cd871a92f312?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80';
  const guide = () => {
    if (driverRef.current) {
      driverRef.current.destroy();
    }
    driverRef.current = driver({
      allowClose: false, // 是否有關閉按鈕
      popoverClass: 'custom-driver-popover', // 添加自定義class
      showProgress: false, // 首先確保配置中關閉進度顯示
      steps: [{
        element: ".step1-pop",
        popover: {
          popoverClass:'step1',
          title: "歡迎使用",
          description: ` <div class="custom-popover-content">
                <p>這是一個功能強大的應用程序，將幫助您提高工作效率。</p>
                <img src="${WELCOME_IMAGE}" alt="歡迎" />
                <div class="button-container">
                  <button class="custom-button" onclick="handleGuideClick()">跳過</button>
                </div>
              </div>`,
          showButtons: ["next"],
          nextBtnText: "下一步",
          onNext: () => {
            console.log("正在從第一步移動到第二步");
            return true; // 返回false可阻止繼續(xù)
          }
        }
      },
      {
        element: ".step2-pop",
        popover: {
          popoverClass:'step2',
          description:'step2',
          // showButtons: ["next", "previous"],
          nextBtnText: "下一步",
          prevBtnText: "上一步",
        }
      },
      {
        element: ".step3-pop",
        popover: {
          title: "完成",
          description: "done",
          nextBtnText: "關閉",
          prevBtnText: "上一步"
        }
      }]
    })
    driverRef.current.drive()
  }
  useEffect(()=>{
    guide()
  },[])
 

  return (
   <div>
    <div className='step1-pop'>步驟一</div>
    <div  className='step2-pop'>步驟二</div>
    <div  className='step3-pop'>步驟三</div>
   </div>
  )
}
export default Driver

less 代碼:

.custom-driver-popover {
    // text-align: left;
    background-color: #fff;
    height: auto;

}
.custom-popover-content img {
    width: 100%;
    border-radius: 5px;
    margin: 10px 0;
}
.custom-button {
    background-color: #3b82f6;
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 4px;
    margin-top: 10px;
    cursor: pointer;
}

.step1-pop,.step2-pop,.step3-pop{
    position: fixed;
    width: 100px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: #fff;
    font-weight: 600;
}
.step1-pop{
    left: 100px;
    top: 100px;
    background-color: pink;
}
.step2-pop{
    left: 100px;
    bottom: 100px;
    background-color: palegreen;
}
.step3-pop{
    right: 100px;
    bottom: 100px;
    background-color: orange;
}

只需以上幾步，一個基礎但完整的新手指引功能就實現(xiàn)了！

效果：

進階配置：生命周期鉤子

Driver.js 提供了強大的生命周期鉤子，讓你在引導的各個階段執(zhí)行自定義邏輯。

  onHighlightStarted: (element) => {
    console.log('開始高亮元素:', element);
    // 例如，可以在高亮前先滾動到該元素
    element.scrollIntoView({ behavior: 'smooth' });
  },
  onHighlighted: (element) => {
    console.log('元素高亮完成:', element);
  },
  onDeselected: (element) => {
    console.log('元素取消高亮:', element);
  },
  onReset: (element) => {
    console.log('引導被關閉或完成');
  }

三、實現(xiàn)原理剖析

理解了如何使用，我們再深入一層，看看 Driver.js 是如何在幕后工作的。其核心原理可以概括為以下幾點：

1. 元素高亮與聚焦

這是 Driver.js 最核心的視覺效果。它通過動態(tài)計算目標元素的位置和尺寸來實現(xiàn)。

計算位置：使用 Element.getBoundingClientRect() API 獲取目標元素相對于視口（viewport）的精確位置（top, left, width, height）。
創(chuàng)建高亮層：在頁面中動態(tài)插入一個 div 作為高亮層。這個層的尺寸和位置被設置為與目標元素完全一致（加上配置的 padding）。
CSS 樣式：為該高亮層應用特定的樣式，通常是 border（如發(fā)光效果）和 box-shadow，并設置 z-index 為一個極高的值（如 10000），確保它浮在所有常規(guī)內(nèi)容之上。
遮罩背景：在整個頁面上創(chuàng)建一個巨大的遮罩層（Overlay），覆蓋整個視口。這個遮罩層通常有一個半透明的背景色（由 opacity 配置），并設置 pointer-events: auto 來攔截頁面上的點擊。然后，在高亮層對應的區(qū)域使用 clip-path 或 CSS Mask 等技術“挖”一個洞，或者更簡單的，在高亮層區(qū)域設置 pointer-events: none 來讓點擊“穿透”到目標元素。Driver.js 采用的是后一種 pointer-events 方案，它創(chuàng)建了一個全屏遮罩，但將高亮層區(qū)域的 pointer-events 設為 none。

2. 彈窗定位

解釋性彈窗（Popover）的位置是動態(tài)計算的。

可用空間檢查：根據(jù)配置的 position（如 'top'），Driver.js 會檢查那個方向是否有足夠的空間來顯示彈窗（不會超出屏幕邊界）。
動態(tài)定位：如果首選方向空間不足，它會自動尋找最佳位置（例如，如果 top 不夠，就嘗試 bottom）。
CSS 絕對定位：彈窗使用 position: fixed 定位，并通過 JavaScript 動態(tài)計算并設置其 top 和 left 值，使其精確地出現(xiàn)在高亮元素的旁邊。

四、總結

Driver.js 通過巧妙的 動態(tài) DOM 操作、精確的幾何計算 和 簡單的狀態(tài)管理，為我們提供了一個強大而易用的新手指引解決方案。

它的優(yōu)勢在于：

開箱即用：簡單配置即可實現(xiàn)大部分常見需求。
侵入性低：不需要修改你現(xiàn)有的業(yè)務組件代碼。
原理清晰：理解了其原理后，可以更好地應對各種邊界情況和自定義需求。

附：Driver.js導入報錯解決方案

使用driver.js進行系統(tǒng)流程引導時，發(fā)現(xiàn)怎么導入都報錯，官方代碼是這樣的

import { driver } from "driver.js";
import "driver.js/dist/driver.css";

const driverObj = driver();
driverObj.highlight({
  element: "#some-element",
  popover: {
    title: "Title",
    description: "Description"
  }
});

這里我使用的是driver.js@1.3.6，代碼如下

import { Driver } from 'driver.js';
import 'driver.js/dist/driver.css';
const driver = new Driver({
  animate: true,
  overlayColor: 'rgba(0, 0, 0, 0.7)',
  opacity: 0.7,
  padding: 10,
  allowClose: true,
  doneBtnText: '完成',
  nextBtnText: '下一步',
  prevBtnText: '上一步',

  stageBackground: '#fff',
  primaryColor: '#409EFF',
});
export const startTour = (steps: any) => {
  driver.defineSteps(steps);
  driver.start();
};

export default driver;

報錯Driver only refers to a type, but is being used as a value here
查看driver.js發(fā)現(xiàn)Drivers只是一個接口類型，而實際創(chuàng)建實例的是driver()工廠函數(shù),創(chuàng)建實例的方式是通過driver(options)函數(shù)創(chuàng)建實例而非new Driver()（這個只是接口，不能實例化）

另外還需要導入類型定義，用于TypeScript類型提示

更正后代碼如下

tour.ts

import { driver } from 'driver.js';
import 'driver.js/dist/driver.css';
// 導入類型定義（可選，用于 TypeScript 類型提示）
import type { Config, DriveStep } from 'driver.js';
// 通過 driver() 函數(shù)創(chuàng)建實例（傳入配置項）
const driverInstance = driver({
  animate: true,
  overlayColor: 'rgba(0, 0, 0, 0.7)',
  opacity: 0.7,
  padding: 10,
  allowClose: true,
  doneBtnText: '完成',
  nextBtnText: '下一步',
  prevBtnText: '上一步',
  stageBackground: '#fff',
  primaryColor: '#409EFF',
} as Config); // 類型斷言確保配置符合 Config 類型
// 定義步驟類型（直接使用 driver.js 的 DriveStep 接口）
export const startTour = (steps: DriveStep[]) => {
  driverInstance.setSteps(steps);
  driverInstance.drive(); 
};

export default driverInstance;

這時候就能夠在其他組件中使用了

<script setup lang="ts">
import { startTour } from '../tour.ts';
const startGuide = () => {
  startTour([
    {
      element: '.aside-class', 
      popover: {
        title: '',
        description: ''
      }
    },{
      element: '.aside-class-1',
      popover: {
        title: '',
        description: ''
      }
    },
  ])
};
</script>

<template>
 <el-button id="re_main" @click="startGuide">功能引導</el-button>
</template>

<style scoped>

</style>

driver.js是能夠跨組件引導的，只要元素已掛載到DOM中，并且通過element參數(shù)傳入css選擇器或者直接傳入DOM元素對象，driver.js都能夠識別并引導，當然跨組件引導的核心是確保目標元素的選擇器唯一且在引導執(zhí)行時已存在于 DOM 中

到此這篇關于前端使用Driver.js快速實現(xiàn)新手指引全步驟及實現(xiàn)原理的文章就介紹到這了,更多相關前端Driver.js實現(xiàn)新手指引內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

Javascript iframe交互并兼容各種瀏覽器的解決方法
這篇文章主要介紹了Javascript iframe交互并兼容各種瀏覽器的解決方法的相關資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下
2016-07-07
Html+CSS+JS輪播圖實現(xiàn)源碼(手動輪播,自動輪播)
今天做網(wǎng)站的時候需要用上JS輪播圖代碼,而且還要求是原生的JS代碼,下面這篇文章主要給大家介紹了關于Html+CSS+JS輪播圖實現(xiàn)的相關資料,文中介紹的方法包括手動輪播和自動輪播,需要的朋友可以參考下
2023-06-06
不使用ajax實現(xiàn)無刷新提交表單
這篇文章主要介紹了不使用ajax實現(xiàn)無刷新提交表單的方法,需要的朋友可以參考下
2014-12-12
跨域表單提交狀態(tài)的變相判斷代碼
通過表單在iframe內(nèi)向一個跨域的url提交的時候，如何判斷提交成功了呢？這個，基本上，很難，因為瀏覽器安全沙箱的限制，我們沒有辦法通過獲得iframe內(nèi)部不同域頁面的信息。
2009-11-11
layui實現(xiàn)把數(shù)據(jù)表格時間戳轉換為時間格式的例子
今天小編就為大家分享一篇layui實現(xiàn)把數(shù)據(jù)表格時間戳轉換為時間格式的例子，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2019-09-09
微信小程序對圖片進行canvas壓縮的方法示例詳解
這篇文章主要給大家介紹了關于微信小程序對圖片進行canvas壓縮的相關資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2020-11-11
教你JS中的運算符乘方、開方及變量格式轉換
本文運用實例教大家JS中的運算符乘方、開方及變量格式轉換，代碼簡單明了，有需要的可以參考學習。
2016-08-08
js觀察者模式的介紹及使用
這篇文章主要介紹了java設計模式中觀察者模式，全文通過舉例子及代碼的形式進行了一個簡單的介紹，希望大家能夠理解并且學習到其中知識
2021-08-08
你所不了解的javascript操作DOM的細節(jié)知識點(一)
這篇文章主要介紹了你所不了解的javascript操作DOM的細節(jié)知識點的相關資料,需要的朋友可以參考下
2015-06-06
javascript實現(xiàn)簡單的html5視頻播放器
網(wǎng)頁視頻音頻播放器大家并不陌生，在IE中我們可以運行ActiveX來嵌入微軟的Media Player或者其他的本地播放器，當然可能大部分我們都是使用Flash來制作播放器。在HTML5發(fā)展迅速的今天，讓我們嘗試用HTML5來制作網(wǎng)頁播放器吧，畢竟無論是PC還是移動設備，HTML5是未來的趨勢
2015-05-05