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,     //是否循環(huán)播放  
      maxWordCount: 2,        //彈幕字?jǐn)?shù)(測試不生效)
      lanesCount:2,           //固定彈幕(測試不生效)
      boxWidth:800,           //彈幕寬度
      boxHeight: 100,         //彈幕高度(測試不生效)  
      throttleGap: 500,       //消息間隔      
      barrageList: []         //彈幕列表，格式為數(shù)組
    }
  },  
  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文檔中給出的屬性有的測試并不生效，已經(jīng)標(biāo)注，例如屏幕窗口的高度，需要在組件中額外寫入style屬性

6.MESSAGE_TYPE：

在彈幕類型中有個MESSAGE_TYPE，打印結(jié)果：

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

但是測試時只有NORMAL可用

7.彈幕位置：

默認(rèn)情況下彈幕一直在彈幕窗口的頂部，可以自定義class屬性調(diào)整彈幕位置