vue 弹幕插件

一、概述

弹幕是中国较受欢迎的弹幕展示方式。

先来看一下效果图

二、安装插件

npm install vue-baberrage -D

官方链接：https://blog.chenhaotaishuaile.com/vue-baberrage/

中文文档：https://github.com/superhos/vue-baberrage/blob/master/docs/zh/README.md

三、演示效果

test.vue

<template>
  <div class="barrages-drop">
    <vue-baberrage
      :isShow="barrageIsShow"
      :barrageList="barrageList"
      :maxWordCount="maxWordCount"
      :throttleGap="throttleGap"
      :loop="barrageLoop"
      :boxHeight="boxHeight"
      :messageHeight="messageHeight"
    >
    </vue-baberrage>
  </div>
</template>
<script>
  import Vue from 'vue';
  import { vueBaberrage, MESSAGE_TYPE } from 'vue-baberrage';
  Vue.use(vueBaberrage);
  export default {
    name: 'Barrages',
    data() {
      return {
        msg: '~',
        barrageIsShow: true,
        messageHeight: 3,
        boxHeight: 150,
        barrageLoop: true,
        maxWordCount: 3,
        throttleGap: 5000,
        barrageList: []
      };
    },
    mounted() {
      this.addToList();
    },
    methods: {
      addToList() {
        let list = [
          {
            id: 1,
            avatar: 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3064584167,3502823640&fm=26&gp=0.jpg',
            msg: "人生若只如初见",
            time: 1,
            barrageStyle: 'red'
          },
          {
            id: 2,
            avatar: 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3064584167,3502823640&fm=26&gp=0.jpg',
            msg: "何事秋风悲画扇",
            time: 2,
            barrageStyle: 'green'
          },
          {
            id: 3,
            avatar: 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3064584167,3502823640&fm=26&gp=0.jpg',
            msg: "等闲变却故人心",
            time: 3,
            barrageStyle: 'normal'
          },
          {
            id: 4,
            avatar: 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3064584167,3502823640&fm=26&gp=0.jpg',
            msg: "却道故人心易变",
            time: 4,
            barrageStyle: 'blue'
          },
          {
            id: 5,
            avatar: 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3064584167,3502823640&fm=26&gp=0.jpg',
            msg: "骊山语罢清宵半",
            time: 5,
            barrageStyle: 'yellow'
          },
          {
            id: 6,
            avatar: 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3064584167,3502823640&fm=26&gp=0.jpg',
            msg: "泪雨霖铃终不怨",
            time: 6,
            barrageStyle: 'normal'
          },
          {
            id: 7,
            avatar: 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3064584167,3502823640&fm=26&gp=0.jpg',
            msg: "何如薄幸锦衣郎",
            time: 7,
            barrageStyle: 'red'
          },
          {
            id: 8,
            avatar: 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3064584167,3502823640&fm=26&gp=0.jpg',
            msg: "比翼连枝当日愿",
            time: 8,
            barrageStyle: 'normal'
          },
        ];
        list.forEach((v) => {
          this.barrageList.push({
            id: v.id,
            avatar: v.avatar,
            msg: v.msg,
            time: v.time,
            type: MESSAGE_TYPE.NORMAL,
            barrageStyle: v.barrageStyle
          });
        });
      }
    }
  };
</script>
<style lang="scss" scoped>
  .barrages-drop {
    /deep/ .baberrage-lane{
      /deep/ .blue .normal{
        border-radius: 100px;
        background: #e6ff75;
        color: #fff;
      }
      /deep/ .green .normal{
        border-radius: 100px;
        background: #75ffcd;
        color: #fff;
      }
      /deep/ .red .normal{
        border-radius: 100px;
        background: #e68fba;
        color: #fff;
      }
      /deep/ .yellow .normal{
        border-radius: 100px;
        background: #dfc795;
        color: #fff;
      }
      .baberrage-stage {
        position: absolute;
        width: 100%;
        height: 212px;
        overflow: hidden;
        top: 0;
        margin-top: 130px;
      }
    }

  }
</style>

关于如何使用，在中文文档中有详细说明，这里不做重复。

本文参考链接：

https://www.jb51.net/article/172830.htm