热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

vue实现弹幕功能

这篇文章主要介绍了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

方式三:


3.使用

HTML

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的组件:



github地址:

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

总结

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


推荐阅读
author-avatar
善达集团_187
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有