一个比好用的新用户引导的库 driverjs
在做这个功能时，首先要确定目标是什么样子的， 如果只是随意点击下一步下一步，那我感觉可能用图片轮播图的方式会快一点，更容易解决且方便，想要什么步骤 只需要更改图片就好，但是要管理功能的话，就可以使用这个库。
可以使用新版的， 新版本是通过 SVG 来显示蒙层的
不是通过一个 div 标签来显示一个大的蒙层，之后再通过 position 和 z-index 来控制层级的显示。
在实现这个功能，是有多种方法实现的，首先可以思考一下新版的实现方式
新版实现方式：SVG
主要是通过 SVG 的属性 fill-rule:evenodd clip-rule:evenodd path
- 首先确定高亮
DOM的位置，计算出距离窗口 上下左右的距离 - 通过
path根据计算的距离勾勒出高亮部分的位置 - 然后 通过
fill-rule:evenoddclip-rule:evenodd填充和裁切，把高亮部分的位置裁切掉 - 最后就实现了，就和剪窗花的原理一样，剪出一个高亮的形状，让
DOM元素透过来
旧版本实现方式：position 和 z-index
部分实现差不多，都是需要计算出高亮dom元素的大小和距离窗口上下左右的距离，不同的是通过position 和 z-index 来控制层级的显示
- 首先确定高亮
DOM的位置，计算出距离窗口 上下左右的距离 - 然后创建一个新的
DOM元素来作为高亮元素的背景， - 蒙版是
position: fixed;在整个窗口 - 需要高亮的元素是会添加两个
class分别是添加position: relative!important;和z-index: 100004!important; - 然后高亮元素 高亮元素的背景 蒙层的层级 分别是 100004 100003 100002 就是 高亮元素在最上层，元素背景在中间层，蒙层在下一层，原本的 DOM 文档流在蒙层的下一层
这个设计到浏览器的渲染原理，在绘制时，会创建层叠上下文，
可以在这个位置查看一下层级的顺序就可以明白他的原理
然而这种实现方式可能会产生一个问题，就是在具有 transform 属性的DOM中包含positon 元素的话，可能会出现一些问题，因为 transform 有可能开启 GUI 渲染，然后创建一个独立的图层，而 postion 元素由于父级是transform 所有会和它在同一个图层。
小小结
此功能还有很多思路，这个库的 API 就不在此描述了 大家可以到其文档看，使用还是很方便的，主要是讲思路，以防公司要求不能使用别人的库，要求自己实现，那这个思路就可以节省很多思考的时间。
在此再推一下我之前的文章
关于 Vue 相关的问题可以阅读一下文章！
其他文章个人觉得也不错，都是比较用心在整理，谢谢大家的收看~~
