概述

在訪問某些網站的時候，第一次進去你會發現有個操作指引，本文引用driver.js，教你在你的頁面也加入這般高大上的操作指引。

實現效果

操作指引

高亮區域

實現

driver.js簡介

driver.js是一個功能強大且高度可定制的基于原生JavaScript開發的新用戶引導庫。它沒有依賴項，支持所有主要瀏覽器。

• 官網地址：https://kamranahmed.info/driver.js
• 配置項： https://driverjs.com/docs/configuration
• API：https://driverjs.com/docs/api

安裝

可通過NPM的方式引入。

npm i driver.js
// 或者
yarn add driver.js

或者CDN的方式引入

<script src="https://unpkg.com/driver.js/dist/driver.min.js"></script>
<link rel="stylesheet" >

特性

• 簡單：簡單易用，完全沒有外部依賴

• 高度可定制：有一個強大的api，可以用于你希望突出顯示任何內容

• 高亮顯示：頁面功能介紹上的任意元素(字面上的任意)

• 功能介紹：為你的web應用程序創建強大的功能介紹

• 焦點移位器：為用戶友好添加焦點移位器

• 用戶友好：通過鍵盤行為控制一切

• 一致行為：所有瀏覽器(包括著名的IE)都可以使用

• MIT聲明：免費用于個人和商業用途。

實現

高亮

const driverObj = driver({
  popoverClass: "my-custom-popover-class",
});
driverObj.highlight({
  element: ".form-start-position",
  popover: {
    title: "起點",
    description: "<p>輸入起點關鍵詞，選擇正確的起點</p>",
  },
});

操作指引

const tipsKey = `page-tips`;
if (localStorage.getItem(tipsKey)) return;
const stepsData = [
  {
    element: ".form-start-position",
    popover: {
      title: "起點",
      description: "<p>輸入起點關鍵詞，選擇正確的起點</p>",
      side: "bottom",
      align: "center",
    },
  },
  {
    element: ".form-end-position",
    popover: {
      title: "終點",
      description: "<p>輸入終點關鍵詞，選擇正確的終點</p>",
      side: "bottom",
      align: "center",
    },
  },
  {
    element: ".query-button",
    popover: {
      title: "查詢",
      description: "<p>點擊查詢按鈕，開始查詢規劃路徑并在地圖上展示</p>",
      side: "bottom",
      align: "center",
    },
  },
  {
    element: ".map-button",
    popover: {
      title: "地圖",
      description: "<p>展示地圖和路徑規劃</p>",
      side: "bottom",
      align: "center",
    },
  },
];
const driverObj = driver({
  popoverClass: "my-custom-popover-class",
  overlayColor: "#000000",
  overlayOpacity: 0.5,
  prevBtnText: "上一提示",
  nextBtnText: "下一提示",
  doneBtnText: "知道了",
  closeBtnText: "關閉",
  showProgress: true,
  progressText: "{{current}}/{{total}}",
  allowClose: true,
  stageRadius: 4,
  stagePadding: 10,
  popoverOffset: 10,
  onDestroyed: (ele) => {
    localStorage.setItem(tipsKey, "true");
  },
  steps: stepsData,
});
driverObj.drive();

自定義樣式

.my-custom-popover-class {
  background-color: rgba(1, 122, 242, 0.8);
  color: #fff;

  .driver-popover-arrow-side-top {
    border-top-color: rgba(1, 122, 242, 0.8);
  }
  .driver-popover-arrow-side-bottom {
    border-bottom-color: rgba(1, 122, 242, 0.8);
  }
  .driver-popover-arrow-side-left {
    border-left-color: rgba(1, 122, 242, 0.8);
  }
  .driver-popover-arrow-side-right {
    border-right-color: rgba(1, 122, 242, 0.8);
  }

  .driver-popover-progress-text,
  .driver-popover-close-btn {
    color: #fff;
  }

  .driver-popover-prev-btn,
  .driver-popover-next-btn {
    border: 1px solid #fff;
    color: rgba(1, 122, 242, 1);
  }
}