vue |
您所在的位置:网站首页 › 直播弹幕插件原理图片大全 › vue |
vue-danmaku
基于 Vue.js 的弹幕交互组件 Demo: https://hellodigua.github.io/vue-danmaku Live Demo: https://jsfiddle.net/hellodigua/j78h6429/99/ 现已支持 vue3:vue3-danmaku Preview通过 this.$refs[refName] 调用 方法名 说明 参数 play 开始/继续播放 - pause 暂停弹幕播放 - stop 停止播放并清空弹幕 - show 弹幕显示 - hide 弹幕隐藏 - reset 重置配置 - resize 容器尺寸改变时重新计算滚动距离(需手动调用) - push 发送弹幕(插入到弹幕列表末尾,排队显示) danmu 数据,可以是字符串或对象 add 发送弹幕(插入到当前播放位置,实时显示) danmu 数据,可以是字符串或对象 getPlayState 获得当前播放状态 注 1:push 和 add 的返回值为插入后的下标,可通过判断下标的方式对当前插入弹幕进行样式定制 事件 事件名 说明 返回值 list-end 所有弹幕插入完毕 - play-end 所有弹幕播放完成(已滚出屏幕) index(最后一个弹幕的下标) Slot如果你有自定义弹幕结构与样式的需求,你可以传入任意结构的对象并自己写内部样式。 {{ index }}{{ danmu.name }}:{{ danmu.text }} import vueDanmaku from 'vue-danmaku' export default { data() { return { danmus: [{ avatar: 'http://a.com/a.jpg', name: 'a', text: 'aaa' }, { avatar: 'http://a.com/b.jpg', name: 'b', text: 'bbb' }, ...] } } } 讨论交流和 BUG 反馈QQ 群:747809274 注意事项 必须给 vue-danmaku 组件设置宽高才能正常使用 Changelog v1.4.3 feat: push 和 add 方法支持返回插入下标 v1.4.2 fix: 修复开启 isSuspend 时节流函数导致悬停失效的 BUG v1.4.1 feat: 新增参数 isSuspend (默认 false),支持鼠标划过弹幕悬浮暂停 fix: 修复可能存在的 iOS15 下部分机型可能会闪屏的 BUG v1.4.0 feat: 循环模式下,同屏不允许出现相同弹幕 feat: 默认颜色修改为灰色 v1.3.2 fix: 修复 iOS 部分版本下微信 webview 内打开可能发生闪屏的 BUG fix: 修复当弹幕播放完调用 add 无法正常播放的 BUG v1.3.0 feat: 移除 setChannels,改为直传控制 feat: 新增弹幕插入完毕事件和播放完成事件 feat: 兼容弹幕数据被覆盖的情况 fix: 修复弹幕轨道数计算不准的问题 fix: 修复首次更新弹幕速度失效的问题 v1.2.1 fix: 修复初始化时弹幕容器宽度可能出错的 BUG v1.2.0 speed 参数改为 speeds 参数,含义同样发生变化(主要是为了保证不同屏幕下弹幕移动速度相同) speed: 弹幕经过屏幕的总时长 speeds: 弹幕每秒走过的像素距离 v1.1.1 新增 extraStyle,可控制普通弹幕的样式 v1.1.0 新增弹幕插入方法 v1.0.5 fix: 修复 iOS 下平移闪烁的问题 v1.0.3 fix: 修复使用默认 slot 报错的 BUG v1.0.0为了后续版本的易用性,组件参数改为直传。前版本文档请点此查看 组件参数改为直传 部分代码重构 v0.3.6 支持异步加载弹幕(备注:异步加载后应手动调用 play 方法) v0.3.4 支持随机轨道发送弹幕 fix: 非循环模式,播放完成时不应当结束弹幕任务 v0.3.2 支持自动播放 弹幕容器尺寸改变时,重新计算滚动距离 v0.3.1 打包体积优化 v0.3.0Make Core Code Great Again 支持设置弹幕距离 支持设置弹幕刷新频率 v0.2.0 支持弹幕插槽及对应样式优化 v0.1.1 fix: 修复 0.1.0 打包错误导致的无法下载 v0.1.0 支持移动端播放 v0.0.6 支持弹幕速度 支持弹幕字号 支持新增弹幕 v0.0.5 支持弹幕暂停 支持轨道数控制 支持弹幕循环 v0.0.1 2018.3.11: 发布 MVP 版本 支持弹幕效果 LicenseMIT |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |