VUE----弹幕插件

1.引入弹幕插件：

npm install vue-baberrage --save

2.vue中引入：

//main.js:
import { vueBaberrage } from 'vue-baberrage'
Vue.use(vueBaberrage)

3.组件中使用：

示例代码：

<template>
  <div class="barrages-drop">
    <button @click="addToList">点击</button>
    <h1>this is why we play</h1>
    <vue-baberrage
      :isShow="barrageIsShow"
      :barrageList="barrageList"
      :maxWordCount="maxWordCount"
      :throttleGap="throttleGap"
      :loop="barrageLoop"
      :boxHeight="boxHeight"
      :boxWidth="boxWidth"
      :messageHeight="messageHeight"
      :lanesCount="lanesCount"
    style="border:1px solid red;width:800px;height:400px;">
    </vue-baberrage>
  </div>
</template>

<script>
import { MESSAGE_TYPE } from 'vue-baberrage'
export default {
  name: 'App',
  data () {
    return {
      barrageIsShow: true,    //是否展示弹幕
      messageHeight: 3,       //消息高度(测试不生效)
      barrageLoop: false,     //是否循环播放  
      maxWordCount: 2,        //弹幕字数(测试不生效)
      lanesCount:2,           //固定弹幕(测试不生效)
      boxWidth:800,           //弹幕宽度
      boxHeight: 100,         //弹幕高度(测试不生效)  
      throttleGap: 500,       //消息间隔      
      barrageList: []         //弹幕列表，格式为数组
    }
  },  
  methods:{
    addToList() {
      let list = [
        {
          id: 1,
          avatar: 'https://www.liurulan.cn/ball.png',
          msg: '湖人总冠军',
          time: 1,
          barrageStyle: 'yibai'
        },
        {
          id: 2,
          avatar: 'https://www.liurulan.cn/ball.png',
          msg: '第二条弹幕',
          time: 2,
          barrageStyle: 'erbai'
        },
        {
          id: 3,
          avatar: 'https://www.liurulan.cn/ball.png',
          msg: '第三条弹幕',
          time: 3,
          barrageStyle: 'sanbai'
        },
        {
          id: 4,
          avatar: 'https://www.liurulan.cn/ball.png',
          msg: '第四条弹幕',
          time: 4,
          barrageStyle: 'sibai'
        },
        {
          id: 5,
          avatar: 'https://www.liurulan.cn/ball.png',
          msg: '第五条弹幕',
          time: 5,
          barrageStyle: 'wubai'
        },
        {
          id: 6,
          avatar: 'https://www.liurulan.cn/ball.png',
          msg: '第六条弹幕',
          time: 6,
          barrageStyle: 'liubai'
        },
        {
          id: 7,
          avatar: 'https://www.liurulan.cn/ball.png',
          msg: '第七条弹幕',
          time: 7,
          barrageStyle: 'qibai'
        },
        {
          id: 8,
          avatar: 'https://www.liurulan.cn/ball.png',
          msg: '第八条弹幕',
          time: 8,
          barrageStyle: 'babai'
        },
        {
          id: 9,
          avatar: 'https://www.liurulan.cn/ball.png',
          msg: '第九条弹幕',
          time: 9,
          barrageStyle: 'jiubai'
        },
        {
          id: 10,
          avatar: 'https://www.liurulan.cn/ball.png',
          msg: '第十条弹幕',
          time: 10,
          barrageStyle: 'yiqian'
        }
      ];
      list.forEach((v) => {
        this.barrageList.push({
          id:v.id,                        //弹幕ID
          avatar: v.avatar,               //头像
          msg: v.msg,                     //弹幕消息
          time: v.time,                   //屏幕展示时间
          type: MESSAGE_TYPE.NORMAL,      //类型
          barrageStyle:v.barrageStyle     //自定义样式
        });
      });
    }
  }
}
</script>

<style>
.yibai{
  margin-top:100px;
}
.erbai{
  margin-top:120px;
}
.sanbai{
  margin-top:140px;
}
.sibai{
  margin-top:160px;
}
.wubai{
  margin-top:180px;
}
.liubai{
  margin-top:200px;
}
.qibai{
  margin-top:220px;
}
.babai{
  margin-top:240px;
}
.jiubai{
  margin-top:260px;
}
.yiqian{
  margin-top:300px;
}
</style>

4.效果截图：

效果截图

5.说明：

github文档中给出的属性有的测试并不生效，已经标注，例如屏幕窗口的高度，需要在组件中额外写入style属性

6.MESSAGE_TYPE：

在弹幕类型中有个MESSAGE_TYPE，打印结果：

FROM_BOTTOM: Symbol(FROM_BOTTOM)
FROM_TOP: Symbol(FROM_TOP)
NORMAL: Symbol(NORMAL)

但是测试时只有NORMAL可用

7.弹幕位置：

默认情况下弹幕一直在弹幕窗口的顶部，可以自定义class属性调整弹幕位置