介紹

前一段時間介紹過一個彈幕播放器，效果還不錯，今天介紹的是一個基於Vue的彈幕外掛，非常簡單實用，效能不錯，Vue-Baberrage的定位是即開箱即用的小外掛，推薦給大家！其中有一個Vue-Baberrage的重構版本，不過目前已經不更新了！

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

<script src="./dist/vue-baberrage.js"></script>

<div id="app"><vue-baberrage :isShow= "barrageIsShow" :barrageList = "barrageList" :loop = "barrageLoop" > </vue-baberrage></div>

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中

定製

<vue-babarrage\tref="babarrage"\t:lanesCount="5"\t:boxHeight= "stageHeight"\t:isShow= "barrageIsShow"\t:barrageList = "barrageList"\t:loop = "barrageLoop"\t:maxWordCount = "60"\t:hoverLanePause = "hoverLanePause"\t>\t<template v-slot:default="slotProps">\t\t<span style="color: #000">\t\t{{slotProps.item.data.userName}}: {{slotProps.item.msg}}\t\t</span>\t</template>\t</vue-babarrage>

通過元件的slot來自定義彈幕的樣式。props.item的資料跟彈幕的資料一樣。請注意，如果彈幕展現出來的寬度有所差異，請在彈幕資料中增加extraWidth來調整寬度。

{\tid: ++this.currentId,\tavatar: "./static/avatar.jpg",\tmsg: this.msg,\ttime: 5,\ttype: MESSAGE_TYPE.NORMAL,\textraWidth: 60}

因為vue-baberrage只通過彈幕的文字來計算彈幕的長度。

總結

vue-baberrage就是一個小外掛，可以用來做網頁端的彈幕功能，彈幕評論是目前國內比較熱門的方式，可以嘗試使用！