一，需求场景
我们都知道，项目在第一次打开的时候，需要一些引导。就如新手刚进入游戏一样。点击"开始了解"、"下一步"、"完成指引"等步骤，粗略了解平台。便于新手快速入门。
二，步骤
1，下载依赖：
npm install driver.js
2，引入依赖：
import "driver.js/dist/driver.min.js"
import Driver from 'driver.js'
3，使用：
//引导框
guideFrame() {
const driver = new Driver({
allowClose:false, // 出现引导框，是否可以点击其他地方，关闭。
doneBtnText: "下一步", //根据业务需求，可以改变按钮的名称。比如："完成"、"下一步"
closeBtnText: " × ", //关闭按钮。同样根据业务需求。可以是："关闭"、" x "
stageBackground: "#fff", //背景色
nextBtnText: "下一步", // 按钮。同样根据业务需求。可以是："下一步"、"继续"
prevBtnText: "上一步", // 按钮。同样根据业务需求。可以是："上一步"、"返回"
onNext: (e) => {}, //监听'下一步'事件
onReset:(e)=>{
//比如，点击浏览器的回退箭头，可以触发
}
});
driver.defineSteps([
{
element: "#warnBox", // 当前引导框元素名称
popover: {
title: "快速预警布控", // 标题
description:
"点击【预警布控】按钮，自动跳转到预警管理页面，并弹出新建预警任务对话框，设置预警条件后可快速完成预警任务布控。", //描述
},
},
{
element: ".intelligentApplication",
popover: {
title: "应用跳转",
description:
"点击按钮，可对首页应用快捷方式进行增删和排序，通过将应用添加至首页，点击应用图标即可实现应用的快捷跳转或下载。",
position: "top", //当前引导框出现的位置 top/bottom/left/right
},
}]);
window.addEventListener(
"popstate",
function (e) {
driver.reset();
},
false
);
driver.start();
},
三，疑惑
在做平台引导的时候，会出现一些疑惑，比如：
1，第一步引导，是一个弹窗（整个大蒙层）。放一些插画，介绍文字。怎么处理？
2，引导框内的内容，如果有点击事件（链接）等，如何避免触发点击事件？
3，怎么判断是最后一步引导？
4，最后一步引导，也是一个弹窗（整个大蒙层）。从driver.js怎么衔接到该弹窗？
5，怎么修改引导框的内容、样式？（原始的样式太丑）
6，问题待补充...
下面我们来解答以上疑问。
1，第一步引导，是一个弹窗（整个大蒙层）。放一些插画，介绍文字。
比如，业务需求，刚进入页面的样式是这样的。
处理：这样的话，我们就单纯的用UI框架（element-ui、ant-design-vue等）的弹窗组件即可。
当点击开始了解按钮，我们需要干两件事：（1）关闭弹窗组件（2）开启引导框。
2，引导框内的内容，如果有点击事件（链接）等，避免触发点击事件。
比如，业务需求：（1）当有引导框时，引导框必须点击"关闭"、" x "按钮关闭。（2）引导框内的点击事件，不触发。当引导框消失时，点击事件正常触发。
处理：（1）给new Driver添加 属性：allowClose:false
（2）监听引导框的出现。比如：iShowGuide为true时，引导框弹出，反正关闭。当前引导框内的元素，点击事件，加上：<div @click="!iShowGuide&&jump()">。这样就可以做到，当引导框内点击事件，禁止点击。
3，判断是最后一步引导。
const driver = new Driver({
allowClose:false, // 出现引导框，是否可以点击其他地方，关闭。
doneBtnText: "下一步", //根据业务需求，可以改变按钮的名称。比如："完成"、"下一步"
closeBtnText: " × ", //关闭按钮。同样根据业务需求。可以是："关闭"、" x "
stageBackground: "#fff", //背景色
nextBtnText: "下一步", // 按钮。同样根据业务需求。可以是："下一步"、"继续"
prevBtnText: "上一步", // 按钮。同样根据业务需求。可以是："上一步"、"返回"
onNext: (e) => {
//判断是否到最后一步
if (
e.node.className ==
"warningMsg driver-highlighted-element driver-position-relative"
) {
//做一些逻辑处理。比如弹出最后一步指引的窗口
this.finishGuideVisible = true;
}
}
});
4，最后一步引导，也是一个弹窗（整个大蒙层）。从driver.js衔接到该弹窗。
比如，业务需求：这是最后一步的弹窗。结束引导。
处理：同样我们就单纯的用UI框架（element-ui、ant-design-vue等）的弹窗组件即可。
当点击最后一个引导框（driver.js）的"下一步"，我们需要干两件事：（1）关闭引导框。这个时候需要判断是不是最后一步？如何判断，就在第3个疑问。（2）打开弹窗组件。
5，修改引导框的内容、样式
// 引导框
#driver-popover-item{
position: absolute;
background: #fff;
color: #212d4c !important;
font-family:MicrosoftYaHei !important;
margin: 0;
padding: 30px 20px !important;
border-radius: 5px;
min-width: 250px;
max-width: 550px !important;
-webkit-box-shadow: 0 1px 10px rgba(0,0,0,.4);
box-shadow: 0 1px 10px rgba(0,0,0,.4);
z-index: 1000000000;
.driver-popover-description{
padding: 20px 10px;
}
// 标题样式
.driver-popover-title{
color: #1d63f8;
text-align: center;
font: 17px/normal sans-serif !important;
margin: 0 0 5px;
display: block;
position: relative;
line-height: 1.5;
zoom: 1;
}
//底部按钮样式
.driver-popover-footer{
display: flex !important;
justify-content: center !important;
margin-top: 20px !important;
.driver-close-btn{
position: absolute !important;
top:4px !important;
right: 10px !important;
border:none !important;
background-color: #fff !important;
font-size: 22px !important;
color: #abb1be !important;
font-weight: 0 !important;
}
.driver-prev-btn{
display: none !important;
}
.driver-next-btn{
background: #1d63f8 !important;
color: white !important;
border: 1px solid #1d63f8 !important;
border-radius: 3px;
padding: 10px 30px !important;
text-shadow: none;
}
}
}
四，参考文档
driver.js 官方文档： kamranahmed.info/driver.js
intro.js 官方文档： introjs.com
intro.js 文档： zhuanlan.zhihu.com/p/259222478
