专栏首页python3vue 弹幕插件

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 来,vue弹窗插件走一个

    记得有一次组内分享,以弹窗为例讲了如何创建可复用的vue组件,后面发现这个例子并不恰当(bei tiao zhan),使用组件需要先import,再注册,然后再...

    elson
  • Angular 实现一个 Dialog 组件

    这里有一个细节是base-dialog的z-index一定要大于overlay的,已保证dialog能显示在遮盖层上方。

    mafeifan
  • vue插件开发练习--实用弹窗

    上回说了组件(vue组件开发练习--焦点图切换)的一个练习项目,这次换下口味,说下vue的插件练手的项目。相对于现在之前的焦点图切换的组件,这个可能就更简单了,...

    守候i
  • Vue.js开发移动端经验总结

    相对于PC端来说,移动端设备分辨率百花齐放,千奇百怪,对于每一个开发者来说,移动端适配是我们进行移动端开发第一个需要面对的问题。

    coder_koala
  • vue移动端开发总结

    相对于PC端来说,移动端设备分辨率百花齐放,千奇百怪,对于每一个开发者来说,移动端适配是我们进行移动端开发第一个需要面对的问题。

    前端老道
  • 为 vue 项目添加 PWA 支持

    如果您的目的不是为现有的 vue 项目添加 PWA 支持,那么更推荐尝试 Lavas

    子润先生
  • 蓝默空间のLvBlog-1.1.2.20191030_release开源啦~

    The LvBlog Application is open-source software licensed under the MIT license.

    蓝默空间
  • 如何开发一个Vue插件

    2、 将弹框组件扩展为 Vue 插件,通过 API 的方式进行调用,插件API的调用规则为 vm.$alert('提示消息') 。

    挥刀北上
  • 折腾到凌晨,今天弹幕项目终于启动成功

    起因竟然是因为做了一个梦,不过是因为确实想明白这个弹幕是什么个原理,也想压测一下面对秒级百万覆盖的弹幕是不是会出现卡顿,然后这四个前端vue项目,我不碰前端...

    疯狂的KK

扫码关注云+社区

领取腾讯云代金券