轻拔琴弦|一个高性能的基于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就是一个小插件，可以用来做网页端的弹幕功能，弹幕评论是目前国内比较热门的方式，可以尝试使用！

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

推荐阅读

微信视频怎么打包发送给别人微信视频怎么打包发送

云上公益|今年中秋怎么过？我已经帮你想好了

人民政协报|开展海洋综合治理攻坚战推进海洋资源环境保护

社会新鲜事|当红花旦最有名的凤冠造型，没有看过的不是铁粉

名校家长课堂一定不要成为下面3种妈妈，会毁掉他的一生，如果你有儿子

中新经纬|国民技术大涨5.44%，领涨半导体行业板块

吃一颗糖再走吧看看周迅的眼睛真是羡慕了，明星的素颜也这么好看

汽车|88元就能用上美孚1号全合成机油？途虎养车被曝套路深

食品|惠发食品：控股股东惠发投资质押展期2436万股

亮见执法记录仪、数据采集站双双入围公安部警用装备采购目录

今日头条取名字大全,起一个好听的今日头条名-

企业|涨！涨！涨！一天一个价！

崭新的反义词是什么(崭新的崭能组什么词)

艺术品|买翡翠手镯，除了种水，还要关心这个！

奇特的草|真的那么重要吗？以“五礼”为核心去探析，“礼”对古代社会发展

央视网|美国单日新增新冠肺炎确诊病例逾5.6万例为近两月单日新增最高

股东|金圆股份：控股股东金圆控股质押815万股

风险|房地产泡沫威胁金融安全郭树清为防风险开“药方”

小丹聊健康|就要多吃这六种食物，美味又助眠！，想要改善睡眠质量

[醉卧浮生]与国家队闹掰惹的祸，羽坛第一美女也烦恼！奥运延期面临经费短缺