使用vueBaberrage实现网页弹幕效果

1.引入弹幕插件：

npm install vue-baberrage --save

 2.vue中引入（其实就是在main.js中引用）：

//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>

运行后就可以使用。

遇到的问题：

ERROR in ./node_modules/vue-baberrage/dist/vue-baberrage.js 16:74-91
Module not found: Error: Can't resolve 'timers' in 'F:\Project\mikotofans\mikotofans\node_modules\vue-baberrage\dist'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
        - add a fallback 'resolve.fallback: { "timers": require.resolve("timers-browserify") }'
        - install 'timers-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "timers": false }
 @ ./src/main.js 4:0-45 5:8-20

原因是webpack5中缺少polyfills的原因，可使用一下方法：

第一步：安装 node-polyfill-webpack-plugin

npm install node-polyfill-webpack-plugin

第二步：vue.config.js中修改配置

原：

const { defineConfig } = require('@vue/cli-service')
// const NodePolyfillPlugin = require('node-polyfill-webpack-plugin')

module.exports = defineConfig({
  // configureWebpack: {
  //   plugins: [new NodePolyfillPlugin()],
  // },
  transpileDependencies: true,
  lintOnSave: false
})

修改后：

const { defineConfig } = require('@vue/cli-service')
const NodePolyfillPlugin = require('node-polyfill-webpack-plugin')

module.exports = defineConfig({
  configureWebpack: {
    plugins: [new NodePolyfillPlugin()],
  },
  transpileDependencies: true,
  lintOnSave: false
})

然后运行即可成功。

参考文章：

1，安装使用：VUE----弹幕插件 - 简书1.引入弹幕插件： 2.vue中引入： 3.组件中使用： 示例代码： 4.效果截图： 5.说明： github文档中给出的属性有的测试并不生效，已经标注，例如屏幕窗口的高度，...https://www.jianshu.com/p/9cffda948b57

2，报错修改：

 关于vue运行报错：webpack ＜ 5 used to include polyfills for node.js core modules by default._WeirdoPrincess的博客-CSDN博客在使用vue3开发时安装使用web3等工具，运行报错webpack < 5 used to include polyfills for node.js core modules by default. This is no longer the case. Verify if you need this module and configure a polyfill for it解决方案1.安装 node-polyfill-webpack-pluginnpm install node-pohttps://blog.csdn.net/FantasyWeirdo/article/details/123552064