Vue3+TS使用driver.js 一闪就没的问题

demo代码

<script setup lang="ts">
import Driver from 'driver.js'
import 'driver.js/dist/driver.min.css'
import steps from './steps'

const showDrive = () => {
  const driver = new Driver({})
  driver.defineSteps(steps)
  driver.start()
}
</script>

问题展示

• 当steps中的第一个element对应的元素不属于当前组件时，阴影一闪就没，无法展示高亮
• 当steps中的第一个element对应的元素属于当前组件时，不管后续的element是否属于当前组件，高亮正常显示，整个功能正常

问题原因

没有阻止事件分发

问题修复

方法1：在showDriver方法中添加e.stopPropagation()
方法2：绑定事件时@click修改为@click.prevent.stop

完整代码

<script setup lang="ts">
import Driver from 'driver.js'
import 'driver.js/dist/driver.min.css'
import steps from './step'

const showDrive = (e: MouseEvent) => {
  e.stopPropagation()
  const driver = new Driver({})
  driver.defineSteps(steps)
  driver.start()
}
</script>