Vue3使用driver.js做引导页，圈定内容显示空白，3种解决方法

直接上图看出现的问题

• 检查代码好多遍，确信都是按照官网的写法写，咋就会不显示，一下就蒙圈了。

出现问题的原因

• 出现这个现象的原因：由于项目顶部导航栏使用了固定定位fixed 造成的。

解决方法一

• 把元素固定定位fixed 改为 absolute 或者 relative

解决方法二

• 修改driver.js实例配置项：不使用动画效果（animate默认是开启的）

 new Driver({
    animate: false
 })

解决方法三（推荐使用）

• 假设想继续使用fixed固定定位，同时还要保留引导页在点击上一页和下一页的动画效果，解决办法就是，修改driver的类样式，通过outline模拟背景。

 div#driver-highlighted-element-stage,
 div#driver-page-overlay {
  background: transparent !important;
  outline: 5100px solid rgba(0, 0, 0, 0.75);
}

看看完全完美显示效果吧

备注

• 使用的driver.js版本为0.9.8
• 使用的Vue版本为3.2.25