vue 弹幕插件

柔情只为你懂 2023-01-18 05:25 378阅读 0赞

# 一、概述 #

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

先来看一下效果图

![aaccd9abdf5c1b34ef924edb0eda2dcb.gif][]

# 二、安装插件 #

npm install vue-baberrage -D

官方链接：[https://blog.chenhaotaishuaile.com/vue-baberrage/][https_blog.chenhaotaishuaile.com_vue-baberrage]

中文文档：[https://github.com/superhos/vue-baberrage/blob/master/docs/zh/README.md][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][https_www.jb51.net_article_172830.htm]

[aaccd9abdf5c1b34ef924edb0eda2dcb.gif]: /images/20221021/15dc121a90044d2a85bfadb25800d250.png
[https_blog.chenhaotaishuaile.com_vue-baberrage]: https://blog.chenhaotaishuaile.com/vue-baberrage/
[https_github.com_superhos_vue-baberrage_blob_master_docs_zh_README.md]: https://github.com/superhos/vue-baberrage/blob/master/docs/zh/README.md
[https_www.jb51.net_article_172830.htm]: https://www.jb51.net/article/172830.htm