介绍
前一段时间介绍过一个弹幕播放器,效果还不错,今天介绍的是一个基于Vue的弹幕插件,非常简单实用,性能不错,Vue-Baberrage的定位是即开箱即用的小插件,推荐给大家!其中有一个Vue-Baberrage的重构版本,不过目前已经不更新了!
![75b3185d26d16ed626d5b1281a6e58b2.png](https://i-blog.csdnimg.cn/blog_migrate/5ef88e42566596d63f7bdee6a752e0c0.jpeg)
Github
https://github.com/superhos/vue-baberrage
https://github.com/superhos/vue-baberrage-plus
特性
- 容易使用
只需几行代码,简单配置即可使用。
- 高性能
过百条同屏弹幕依然能保持60FPS.
- 独立
弹幕数据部分交还给使用者自己管理,可以配合Vuex使用
安装使用
- npm安装
npm install vue-baberrage
- vue
import Vue from 'vue'import { vueBaberrage } from 'vue-baberrage'Vue.use(vueBaberrage)
or
const vueBaberrage = request('vue-baberrage').vueBaberrage
or
import { MESSAGE_TYPE } from 'vue-baberrage'export default { name: 'app', data () { return { msg: 'Hello vue-baberrage', barrageIsShow: true, currentId : 0, barrageLoop: false, barrageList: [] } }, methods:{ addToList (){ this.barrageList.push({ id: ++this.currentId, avatar: "./static/avatar.jpg", msg: this.msg, time: 5, type: MESSAGE_TYPE.NORMAL, }); ...
两步即可, 当有新的数据加入到barrageList,就会以弹幕形式展现出来,建议barrageList放在Vuex中
- 定制
{{slotProps.item.data.userName}}: {{slotProps.item.msg}}
通过组件的slot来自定义弹幕的样式。props.item的数据跟弹幕的数据一样。请注意,如果弹幕展现出来的宽度有所差异,请在弹幕数据中增加extraWidth来调整宽度。
{id: ++this.currentId,avatar: "./static/avatar.jpg",msg: this.msg,time: 5,type: MESSAGE_TYPE.NORMAL,extraWidth: 60}
因为vue-baberrage只通过弹幕的文字来计算弹幕的长度。
总结
vue-baberrage就是一个小插件,可以用来做网页端的弹幕功能,弹幕评论是目前国内比较热门的方式,可以尝试使用!