Vue - 超详细 “横向滚动“ 弹幕效果功能组件源码，类似视频与直播间的发言弹幕 （支持自定义弹幕样式 / 开启暂停弹幕播放 / 清空弹幕 / 修改弹幕移动速度 / 发送插入自己的弹幕并高亮显示等）

前言

网上的教程都太乱了，并且全是 BUG 根本无法改造到自己的项目中去。

本文实现了 在 Vue / Nuxt 项目中，实现弹幕飘过的效果，支持网络请求数据 / 自定义弹幕样式 / 开启暂停弹幕播放 / 清空弹幕 / 自定义轨道数量 / 修改弹幕移动速度 / 发送插入自己的弹幕并高亮显示 / 监听插入自己的弹幕事件 / 监听弹幕全部播放完成事件等，

您可以直接复制组件源码，然后按照示例代码运行起来，稍微改改样式就能使用了，

附带详细的组件配置及事件文档，以及常见问题处理，保证使用！

---

如下图所示，无论您是 PC 电脑还是手机端网页，实测都完美运行，

Gif 图录制显得有卡顿，实测非常流畅！请放心！

代码干净整洁，无任何乱七八糟的样式和无关逻辑

准备阶段