介绍

前一段时间介绍过一个弹幕播放器，效果还不错，今天介绍的是一个基于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

1. 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
	ref="babarrage"
	:lanesCount="5"
	:boxHeight= "stageHeight"
	:isShow= "barrageIsShow"
	:barrageList = "barrageList"
	:loop = "barrageLoop"
	:maxWordCount = "60"
	:hoverLanePause = "hoverLanePause"
	>
	<template v-slot:default="slotProps">
		<span style="color: #000">
		{{slotProps.item.data.userName}}: {{slotProps.item.msg}}
		</span>
	</template>
	</vue-babarrage>

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