vue3中使用弹幕组件vue-danmaku

1、最开始使用的是vue3-marquee，后面发现一直有一个bug无法解决，就是鼠标hover到第一个弹幕上字体就会变粗，已经提了issue给作者，但是目前还未答复，所以就换了方案。

地址如下：
https://github.com/megasanjay/vue3-marquee

2、后面就开始使用了，这个应该是国内开发者开发的：
vue-danmaku

3、使用感受：

因为我们的弹幕要求多行，使用vue-danmaku还是挺方便的，
可以通过channels来设置。

实例代码：

  <danmaku ref="danmakuRef" v-model:danmus="danmus" 
    :speeds="40"    useSlot loop :channels="2" style="height:900px; width:800px;">
    <template v-slot:dm="{ index, danmu }">
        <div @mouseenter="handleEnter"
        @mouseleave="handleLeave"
        @click='handleClick(danmu)'
        class="img_style">
        <span>{{ index }}{{ danmu.name }}：{{ danmu.text }}</span>
        </div>
    </template>
  </danmaku>

import danmaku from 'vue3-danmaku'

若想实现循环播放可通过play-end 回调 加 play来实现，即所有弹幕播放完成（已滚出屏幕）时重新开启播放。