driver.js实现页面操作指引

概述

在访问某些网站的时候，第一次进去你会发现有个操作指引，本文引用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" href="https://unpkg.com/driver.js/dist/driver.min.css">

特性

• **简单：**简单易用，完全没有外部依赖

• 高度可定制：有一个强大的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);
  }
}