轻拔琴弦|一个高性能的基于Vue开发的开源弹幕插件——vue-baberrage -plus

介绍前一段时间介绍过一个弹幕播放器，效果还不错，今天介绍的是一个基于Vue的弹幕插件，非常简单实用，性能不错， Vue-Baberrage的定位是即开箱即用的小插件，推荐给大家！其中有一个Vue-Baberrage的重构版本，不过目前已经不更新了！
特性容易使用只需几行代码,简单配置即可使用。
高性能过百条同屏弹幕依然能保持60FPS.
独立弹幕数据部分交还给使用者自己管理，可以配合Vuex使用
安装使用npm安装npminstallvue-baberragevueimportVuefrom'vue'import{vueBaberrage}from'vue-baberrage'Vue.use(vueBaberrage)【轻拔琴弦|一个高性能的基于Vue开发的开源弹幕插件——vue-baberrage】or
constvueBaberrage=request('vue-baberrage').vueBaberrageor
import{MESSAGE_TYPE}from'vue-baberrage'exportdefault{name:'app',data(){return{msg:'Hellovue-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就是一个小插件，可以用来做网页端的弹幕功能，弹幕评论是目前国内比较热门的方式，可以尝试使用！