脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → 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中英文切换实例代码

    vue中英文切换实例代码

    在本篇文章里小编给大家整理了关于vue中英文切换实例代码，需要的朋友们学习参考下。
    2020-01-01
  • Vue.js实现tab切换效果

    Vue.js实现tab切换效果

    这篇文章主要为大家详细介绍了Vue.js实现tab切换效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2019-07-07
  • Vue实现飞机大战小游戏

    Vue实现飞机大战小游戏

    这篇文章主要为大家详细介绍了Vue实现飞机大战小游戏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-05-05
  • vue实现滑动解锁功能

    vue实现滑动解锁功能

    这篇文章主要为大家详细介绍了vue实现滑动解锁功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-03-03
  • vue技术分享之你可能不知道的7个秘密

    vue技术分享之你可能不知道的7个秘密

    这篇文章主要介绍了vue技术分享-你可能不知道的7个秘密,需要的朋友可以参考下
    2018-04-04
  • Vue3.0组件通信mitt源码ts实例解析

    Vue3.0组件通信mitt源码ts实例解析

    这篇文章主要为大家介绍了Vue3.0组件通信mitt源码ts实例解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2022-11-11
  • 一文总结Vue和React的异同

    一文总结Vue和React的异同

    这篇文章主要介绍了Vue和React的相同点不不同点，文中对比介绍的非常详细，对大家的学习或工作有一定的帮助,需要的朋友可以参考下
    2023-05-05
  • vue init webpack myproject构建项目 ip不能访问的解决方法

    vue init webpack myproject构建项目 ip不能访问的解决方法

    下面小编就为大家分享一篇vue init webpack myproject构建项目 ip不能访问的解决方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2018-03-03
  • Vue生命周期实例分析总结

    Vue生命周期实例分析总结

    Vue的生命周期就是vue实例从创建到销毁的全过程,也就是new Vue()开始就是vue生命周期的开始。Vue实例有⼀个完整的⽣命周期,也就是从开始创建、初始化数据、编译模版、挂载Dom->渲染、更新->渲染、卸载等⼀系列过程,称这是Vue的⽣命周期
    2022-10-10
  • vue中使用cookies和crypto-js实现记住密码和加密的方法

    vue中使用cookies和crypto-js实现记住密码和加密的方法

    这篇文章给大家介绍一下关于vue中使用cookies和crypto-js如何实现密码的加密与记住密码，有一定的参考价值，有需要的朋友可以参考一下，希望对你们有所帮助。
    2018-10-10

最新评论