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);}
}