概述

在訪問某些網(wǎng)站的時候俯抖，第一次進(jìn)去你會發(fā)現(xiàn)有個操作指引，本文引用driver.js诈皿，教你在你的頁面也加入這般高大上的操作指引风题。

實(shí)現(xiàn)效果

操作指引

高亮區(qū)域

實(shí)現(xiàn)

driver.js簡介

driver.js是一個功能強(qiáng)大且高度可定制的基于原生JavaScript開發(fā)的新用戶引導(dǎo)庫。它沒有依賴項(xiàng)咨察，支持所有主要瀏覽器论熙。

• 官網(wǎng)地址：https://kamranahmed.info/driver.js
• 配置項(xiàng)： 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" >

特性

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

• 高度可定制：有一個強(qiáng)大的api脓诡，可以用于你希望突出顯示任何內(nèi)容

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

• 功能介紹：為你的web應(yīng)用程序創(chuàng)建強(qiáng)大的功能介紹

• 焦點(diǎn)移位器：為用戶友好添加焦點(diǎn)移位器

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

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

• MIT聲明：免費(fèi)用于個人和商業(yè)用途。

實(shí)現(xiàn)

高亮

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

操作指引

const tipsKey = `page-tips`;
if (localStorage.getItem(tipsKey)) return;
const stepsData = [
  {
    element: ".form-start-position",
    popover: {
      title: "起點(diǎn)",
      description: "<p>輸入起點(diǎn)關(guān)鍵詞祝谚，選擇正確的起點(diǎn)</p>",
      side: "bottom",
      align: "center",
    },
  },
  {
    element: ".form-end-position",
    popover: {
      title: "終點(diǎn)",
      description: "<p>輸入終點(diǎn)關(guān)鍵詞，選擇正確的終點(diǎn)</p>",
      side: "bottom",
      align: "center",
    },
  },
  {
    element: ".query-button",
    popover: {
      title: "查詢",
      description: "<p>點(diǎn)擊查詢按鈕酣衷，開始查詢規(guī)劃路徑并在地圖上展示</p>",
      side: "bottom",
      align: "center",
    },
  },
  {
    element: ".map-button",
    popover: {
      title: "地圖",
      description: "<p>展示地圖和路徑規(guī)劃</p>",
      side: "bottom",
      align: "center",
    },
  },
];
const driverObj = driver({
  popoverClass: "my-custom-popover-class",
  overlayColor: "#000000",
  overlayOpacity: 0.5,
  prevBtnText: "上一提示",
  nextBtnText: "下一提示",
  doneBtnText: "知道了",
  closeBtnText: "關(guān)閉",
  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);
  }
}