今天给小伙伴们推荐2款超优质的Vue自定义弹幕制作组件Vue-Barrage。

1、VueBarrage

vue-barrage 基于vue2.x构建的弹幕组件。

功能特性

• 支持弹幕方向：滑动、顶部；
• 支持暂停/开始全局弹幕和弹幕划过暂停；
• 弹幕动画采用transform3d并开启css3硬件加速，弹幕基于按需加载和队列复用的模式；

快速使用

首先，复制 components 目录下 VBarrage文件夹 到自己的项目中。

<v-barrage
  :arr="arr" // 传入的弹幕源数组
  :isPause="isPause" // 控制是否暂停弹幕
  :percent="100" // 弹幕的屏幕占比
</v-barrage>

// 弹幕对象
{
   content: this.sendContent, // 弹幕内容
   direction: this.direction, // 方向  default | top
   isSelf: true, // 是否是自己发的弹幕
   style: {
      color: 'red' // 弹幕颜色
   },
   isJs: false  // 是否解析html
}

# 示例地址
http://null_639_5368.gitee.io/vue-barrage/

# gitee仓库
https://gitee.com/null_639_5368/vue-barrage

2、Vue-BaBerrage

vue-baberrage 一款轻量级的Vue弹幕插件。

特性

• 易使用：只需几行代码,简单配置即可使用；
• 高性能：几百条同屏弹幕依然能保持高性能；
• 独立性：弹幕数据自行可控管理；

安装

$ npm i vue-baberrage -S

使用组件

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

<script>
import { vueBaberrage } from 'vue-baberrage'
import { MESSAGE_TYPE } from 'vue-baberrage'
export default {
  components: {
    vueBaberrage
  },
  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
      });
    },
	// ...
  }
}
</script>

非常不错的一款弹幕组件，让你的页面视频元素瞬间提升一个档次。

# 文档地址
http://blog.chenhaotaishuaile.com/vue-baberrage/

# 仓库地址
https://github.com/superhos/vue-baberrage

好了，基于vue.js弹幕组件就分享到这里。希望对大家有所帮助哈！