《学习总结》引导页Driver.js的使用（显示fixed固定定位的元素）

工作需要开发网页新用户引导功能的模块（其实只是将vue2已经实现的功能在vue3项目上实现）

使用到的Driver.js插件，官网跳转地址（英文的，官方没有中文）

单纯的使用还是很简单的，按照官网的指引都能简单实现，但是有坑：

坑1

使用relative或者absolute的元素都显示没有问题，但是如果是fixed固定定位了元素显示，高亮区域就会被覆盖，内容就显示不出来了，如图

坑1解决方案 

这个好解决，网上搜了搜就搞定了，全局设置样式（注意style不要加scope,可以在当前页面带有scope的style标签下面多加一个不加scope的style来控制全局样式，这个标签中的样式是会修改其他页面的，所以写样式的时候要注意）

<style lang="scss">

div#driver-highlighted-element-stage,
div#driver-page-overlay {
    background: transparent !important;
    outline: 5000px solid rgba(0, 0, 0, .75);
}
</style>

 这样高亮区域的内容就显示出来了，但是高亮区域内的功能，比如点击事件是不会触发的（实际上新手引导的时候也不会允许能够做其他操作）

坑2

但是还有一个问题，引导的高亮区域和弹窗都是绝对定位的，那么滚动页面的时候，fixed的元素还在页面上，但是引导却随着页面滚动离开可视区域了，所以需要将引导页改为fixed定位

首先尝试了在js中修改样式，但是只是高亮区域成功改为fixed了，弹窗怎么改都不生效，即使最后打印出来的dom元素中已经改为了fixed，但是样式却没有生效，可能的原因是在js操作的时候元素还没生成？

解决

最后有效的方法是，官网提供了一个自定义类名的方法，可以通过自定义方法去操作全局样式

 然后在全局样式中修改这个类名的样式

<style lang="scss">
.上面自定义的类名 {
    position: fixed !important;
}

div#driver-highlighted-element-stage,
div#driver-page-overlay {
    background: transparent !important;
    outline: 5000px solid rgba(0, 0, 0, .75);
}
</style>

高亮区域就还是需要通过js修改，每一步都可以将变量打印出来看看，这样比较好实现自己的功能

 // 在元素完全高亮显示时调用，官网中的方法，可以先去看看
        onHighlighted: (Element: any) => {
            //获取到引导的元素的类名
            let elClassname = Element.node.className.split(' ')[0]
            if (elClassname == '需要引导的类名') {
                let el = Element.document.children[0].children[1].children
                el[5].style.position = 'fixed'
            }
        },

再补充一下这引导页高亮与阴影的实现的原理，个人理解是driver.js会通过id名或者类名，获取到需要高亮的元素样式以及内容，创建了一个一样的元素，然后通过设置阴影和创建的元素的z-index来实现高亮（有更好的理解欢迎补充）