插件 vue_一个高性能的基于Vue开发的开源弹幕插件——vue-baberrage

介绍

前一段时间介绍过一个弹幕播放器，效果还不错，今天介绍的是一个基于Vue的弹幕插件，非常简单实用，性能不错，Vue-Baberrage的定位是即开箱即用的小插件，推荐给大家！其中有一个Vue-Baberrage的重构版本，不过目前已经不更新了！

Github

https://github.com/superhos/vue-baberrage

https://github.com/superhos/vue-baberrage-plus

特性

• 容易使用

只需几行代码,简单配置即可使用。

• 高性能

过百条同屏弹幕依然能保持60FPS.

• 独立

弹幕数据部分交还给使用者自己管理，可以配合Vuex使用

安装使用

1. npm安装

npm install vue-baberrage

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