前言

我们在bilibili上浏览观看视频、刷剧的时候，有这样的一个功能——弹幕，百度搜了下，这样解释的：弹幕，指的是在网络上观看视频时弹出的评论性字幕。，有点类似我们在看实体书时，手拿笔在书上勾勾画画，顺便写写自己的读书笔记，想法啥的，只是现在将这个模式搬到了视频中，使用弹幕的方式来实现的。

图片来源于bilibili网站

下面我们来看看是如何实现的：

vue-baberrage是一款基于Vue.js弹幕插件，其有如下特点：

• 容易使用 ¶只需几行代码,简单配置即可使用⁋
• 高性能 ¶过百条同屏弹幕依然能保持60FPS⁋
• 独立 ¶弹幕数据部分交还给使用者自己管理，可以配合Vuex使用⁋

效果图

官方Demo：点击进入
官方文档：点击进入

下面我们来看看使用方式：

安装插件

npm install vue-baberrage --save

引入插件

在main.js：中写如下代码：

import Vue from 'vue'
import { vueBaberrage } from 'vue-baberrage'
Vue.use(vueBaberrage)

在index.vue:中写如下代码：

import {MESSAGE_TYPE} from "vue-baberrage";

使用插件

在vue:中写如下代码：

<vue-baberrage
	:barrageList="barrageList"
	:boxHeight="boxHeight"
	:isShow="barrageIsShow"
	:lanesCount="lanesCount"
	:loop="barrageLoop"
	:messageHeight="messageHeight"
	:throttleGap="throttleGap">
</vue-baberrage>

在js:中写如下代码：

data() {
	return {
      barrageList: [],
      barrageIsShow: true,    	//是否展示弹幕
      barrageLoop: true,     	//是否循环播放
      boxHeight: 170,         	//高度
      messageHeight: 25,		//消息高度
      lanesCount: 4,			//泳道数量
      throttleGap: 5000,		//消息间隔
	}
}
mounted() {
	this.addBarrageList();
},
methods: {
	addToList() {
		let list = [
			{id: 1,avatar: 'https://api.ddkjt.com/api/img_1.php',msg: '第一条弹幕',time: 3},
			{id: 2,avatar: 'https://api.ddkjt.com/api/img_1.php',msg: '第二条弹幕',time: 4},
			{id: 3,avatar: 'https://api.ddkjt.com/api/img_1.php',msg: '第三条弹幕',time: 3},
			{id: 4,avatar: 'https://api.ddkjt.com/api/img_1.php',msg: '第四条弹幕',time: 4},
			{id: 5,avatar: 'https://api.ddkjt.com/api/img_1.php',msg: '第五条弹幕',time: 5},
        	{id: 6,avatar: 'https://api.ddkjt.com/api/img_1.php',msg: '第六条弹幕',time: 6},
        	{id: 7,avatar: 'https://api.ddkjt.com/api/img_1.php',msg: '第七条弹幕',time: 7},
        	{id: 8,avatar: 'https://api.ddkjt.com/api/img_1.php',msg: '第八条弹幕',time: 8},
        	{id: 9,avatar: 'https://api.ddkjt.com/api/img_1.php',msg: '第九条弹幕',time: 9},
        	{id: 10,avatar: 'https://api.ddkjt.com/api/img_1.php',msg: '第十条弹幕',time: 10}
		];
      	list.forEach((v) => {
        	this.barrageList.push({
          	id: v.id,					//弹幕ID
          	avatar: v.avatar,      		//头像
          	msg: v.msg,             	//弹幕消息
          	time: v.time,          		//屏幕展示时间
          	type: MESSAGE_TYPE.NORMAL,	//类型
		});
	});
}

在css:中写如下代码：

/*弹幕区域高度*/
/deep/ .baberrage-stage {
  height: 170px;
}

/*弹幕消息框*/
/deep/ .baberrage-item .normal {
  padding: 5px 10px;
}

/*头像*/
/deep/ .baberrage-item .normal .baberrage-avatar {
  width: 25px;
  height: 25px;
  background-color: black;
}

/*文字*/
/deep/ .baberrage-item .normal .baberrage-msg {
  font-size: 14px;
  line-height: 25px;
}

至此，完事儿，就可以实现弹幕的功能了。