脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → vue 弹幕

vue实现弹幕功能

 更新时间：2019年10月25日 15:16:20   作者：马优晨  
这篇文章主要介绍了vue实现弹幕功能,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下

（1）效果

在这里插入图片描述

在这里插入图片描述

如上图所示的效果，这里我们使用vue 制作。

(2)使用技术 vue + vue-baberrage

1.安装：

 npm install vue-baberrage

2.引入

方式一：

import Vue from 'vue'
import { vueBaberrage } from 'vue-baberrage'
Vue.use(vueBaberrage)

方式二：

const vueBaberrage = request('vue-baberrage').vueBaberrage

方式三：

<script src="./dist/vue-baberrage.js"></script>

3.使用

HTML

<div id="app">
<vue-baberrage
   :isShow= "barrageIsShow"
   :barrageList = "barrageList"
   :loop = "barrageLoop"
   >
  </vue-baberrage>
</div>

JS

import { MESSAGE_TYPE } from 'vue-baberrage'

export default {
 name: 'app',
 data () {
  return {
   msg: 'Hello vue-baberrage',
   barrageIsShow: true,
   currentId : 0,
   barrageLoop: false,
   barrageList: []
  }
 }, 
 methods:{
  addToList (){
   this.barrageList.push({
    id: ++this.currentId,
    avatar: "./static/avatar.jpg",
    msg: this.msg,
    time: 5,
    type: MESSAGE_TYPE.NORMAL,
   });
 ...

(3)实例演示

这个封装成一个 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: this.msg,
   time: 3,
   barrageStyle: 'red'
  },
  {
   id: 2,
   avatar: 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3064584167,3502823640&fm=26&gp=0.jpg',
   msg: this.msg,
   time: 8,
   barrageStyle: 'green'
  },
  {
   id: 3,
   avatar: 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3064584167,3502823640&fm=26&gp=0.jpg',
   msg: this.msg,
   time: 10,
   barrageStyle: 'normal'
  },
  {
   id: 4,
   avatar: 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3064584167,3502823640&fm=26&gp=0.jpg',
   msg: this.msg,
   time: 5,
   barrageStyle: 'blue'
  },
  {
   id: 5,
   avatar: 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3064584167,3502823640&fm=26&gp=0.jpg',
   msg: this.msg,
   time: 6,
   barrageStyle: 'red'
  },
  {
   id: 6,
   avatar: 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3064584167,3502823640&fm=26&gp=0.jpg',
   msg: this.msg,
   time: 12,
   barrageStyle: 'normal'
  },
  {
   id: 7,
   avatar: 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3064584167,3502823640&fm=26&gp=0.jpg',
   msg: this.msg,
   time: 5,
   barrageStyle: 'red'
  },
  {
   id: 8,
   avatar: 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3064584167,3502823640&fm=26&gp=0.jpg',
   msg: this.msg,
   time: 5,
   barrageStyle: 'normal'
  },
  {
   id: 9,
   avatar: 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3064584167,3502823640&fm=26&gp=0.jpg',
   msg: this.msg,
   time: 8,
   barrageStyle: 'red'
  },
  {
   id: 10,
   avatar: 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3064584167,3502823640&fm=26&gp=0.jpg',
   msg: this.msg,
   time: 10,
   barrageStyle: 'yellow'
  }
  ];
  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="less">
.barrages-drop {
 .blue {
 border-radius: 100px;
 background: #e6ff75;
 color: #fff;
 }
 .green {
 border-radius: 100px;
 background: #75ffcd;
 color: #fff;
 }
 .red {
 border-radius: 100px;
 background: #e68fba;
 color: #fff;
 }
 .yellow {
 border-radius: 100px;
 background: #dfc795;
 color: #fff;
 }
 .baberrage-stage {
 position: absolute;
 width: 100%;
 height: 212px;
 overflow: hidden;
 top: 0;
 margin-top: 130px;
 }
}
</style>

github地址：

https://github.com/superhos/vue-baberrage/blob/master/docs/zh/README.md#plugin-options

总结

以上所述是小编给大家介绍的vue实现弹幕功能,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

您可能感兴趣的文章:

相关文章

  • 详解Vue.js 2.0 如何使用axios

    详解Vue.js 2.0 如何使用axios

    本篇文章主要介绍了Vue.js 2.0 如何使用axios，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-04-04
  • Vue常见报错整理大全(从此报错不害怕)

    Vue常见报错整理大全(从此报错不害怕)

    写代码的过程中一定会遇到报错,遇到报错不要担心,认真分析就可以解决报错,同时积累经验,早日成为大牛,这篇文章主要给大家介绍了关于Vue常见报错整理的相关资料,需要的朋友可以参考下
    2022-08-08
  • vue实现密码显示与隐藏按钮的自定义组件功能

    vue实现密码显示与隐藏按钮的自定义组件功能

    本文通过两种思路给大家介绍vue实现密码显示与隐藏按钮的自定义组件功能，感兴趣的朋友跟随小编一起看看吧
    2019-04-04
  • Vue项目中实现无感Token刷新的示例

    Vue项目中实现无感Token刷新的示例

    在前端项目中,Token用于用户认证和权限管理,文章介绍了在Vue项目中实现Token的无感刷新,包括Token刷新的原理、拦截器的应用和处理Token过期的方法,感兴趣的可以了解一下
    2024-11-11
  • vue中的路由传值与重调本路由改变参数

    vue中的路由传值与重调本路由改变参数

    这篇文章主要介绍了vue中的路由传值与重调本路由改变参数方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-09-09
  • Vue使用axios发送请求简单实现代码

    Vue使用axios发送请求简单实现代码

    axios是一个基于Promise的，发送http请求的一个工具库，并不是vue中的第三方插件，使用时不能通过“Vue.use()”安装插件，需要在原型上进行绑定
    2023-04-04
  • Nuxt的路由动画效果案例

    Nuxt的路由动画效果案例

    这篇文章主要介绍了Nuxt的路由动画效果案例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2020-11-11
  • vue页面使用阿里oss上传功能的实例(二)

    vue页面使用阿里oss上传功能的实例(二)

    本篇文章主要介绍了vue页面使用阿里oss上传功能的实例(二)，主要介绍OSS管理控制台设置访问权限、角色等，有兴趣的可以了解一下
    2017-08-08
  • vue实现简单的计算器功能

    vue实现简单的计算器功能

    这篇文章主要为大家详细介绍了vue实现简单的计算器功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-09-09
  • 在Vue项目中引入Echarts绘制K线图的方法技巧

    在Vue项目中引入Echarts绘制K线图的方法技巧

    在Vue项目开发中,数据可视化是一项重要的任务,Echarts是一个由百度开源的数据可视化库,提供了丰富的图表类型和强大的交互功能,其中,K线图常用于展示金融数据的走势,本文将详细介绍如何在Vue项目中引入Echarts并绘制K线图,需要的朋友可以参考下
    2025-04-04

最新评论