{"id":19884881,"url":"https://github.com/hellodigua/vue-danmaku","last_synced_at":"2025-05-16T11:03:49.404Z","repository":{"id":27818026,"uuid":"115278072","full_name":"hellodigua/vue-danmaku","owner":"hellodigua","description":"基于 Vue 的弹幕交互组件  | A danmaku component for Vue","archived":false,"fork":false,"pushed_at":"2025-05-09T10:26:00.000Z","size":2440,"stargazers_count":663,"open_issues_count":0,"forks_count":66,"subscribers_count":6,"default_branch":"main","last_synced_at":"2025-05-09T11:49:34.394Z","etag":null,"topics":["danmaku","vue","vue-danmaku"],"latest_commit_sha":null,"homepage":"https://hellodigua.github.io/vue-danmaku","language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/hellodigua.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2017-12-24T17:30:25.000Z","updated_at":"2025-05-07T08:56:25.000Z","dependencies_parsed_at":"2025-04-27T09:21:17.071Z","dependency_job_id":"3bf3d9cf-4cfe-4373-8238-be76424bf1c1","html_url":"https://github.com/hellodigua/vue-danmaku","commit_stats":{"total_commits":141,"total_committers":2,"mean_commits":70.5,"dds":"0.014184397163120588","last_synced_commit":"000817c7ad395695bb3ee961bc4040cdf9687676"},"previous_names":[],"tags_count":36,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hellodigua%2Fvue-danmaku","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hellodigua%2Fvue-danmaku/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hellodigua%2Fvue-danmaku/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hellodigua%2Fvue-danmaku/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/hellodigua","download_url":"https://codeload.github.com/hellodigua/vue-danmaku/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253856628,"owners_count":21974579,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["danmaku","vue","vue-danmaku"],"created_at":"2024-11-12T17:30:27.393Z","updated_at":"2025-05-16T11:03:49.393Z","avatar_url":"https://github.com/hellodigua.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"# vue-danmaku\n\n[![npm-version](https://img.shields.io/npm/v/vue-danmaku.svg)](https://www.npmjs.com/package/vue-danmaku)\n[![size](https://img.shields.io/badge/minifiedsize-9kB-blue.svg)](https://www.npmjs.com/package/vue-danmaku)\n[![license](https://img.shields.io/npm/l/express.svg)]()\n\n\u003e 基于 Vue3 的弹幕交互组件\n\n简体中文 | [English](https://github.com/hellodigua/vue-danmaku/blob/main/README_en.md)\n\n\u003c!-- 文档： [https://hellodigua.github.io/vue-danmaku-docs/](https://hellodigua.github.io/vue-danmaku-docs/) --\u003e\n\n\u003e [!WARNING]\n\u003e 2.0.0 版本开始，vue-danmaku 仅支持 Vue3，[Vue2 版本文档请移步至此](https://github.com/hellodigua/vue-danmaku/tree/vue2)\n\n## Preview\n\n![preview](https://cdn.jsdelivr.net/gh/hellodigua/cdn/img/vue-danmaku.webp)\n\n## Install\n\n```bash\n$ npm install vue-danmaku --save\n```\n\n## Usage\n\n```vue\n\u003ctemplate\u003e\n  \u003cvue-danmaku v-model:danmus=\"danmus\" loop style=\"height: 100px;\"\u003e\n    \u003ctemplate v-slot:danmu=\"{ index, danmu }\"\u003e\n      \u003cspan\u003e{{ index }}{{ danmu.name }}：{{ danmu.text }}\u003c/span\u003e\n    \u003c/template\u003e\n  \u003c/vue-danmaku\u003e\n\u003c/template\u003e\n\n\u003cscript setup\u003e\nimport vueDanmaku from 'vue-danmaku'\n\nconst danmus = ref([\n  { name: 'a', text: 'aaa' },\n  { name: 'b', text: 'bbb' },\n])\n\u003c/script\u003e\n```\n\n## Attributes\n\n| 参数            | 说明                                                             | 类型    | 可选值       | 默认值 |\n| :-------------- | :--------------------------------------------------------------- | :------ | :----------- | :----- |\n| danmus          | 弹幕元素列表，支持纯文本或者自定义对象(支持 v-model)             | Array   | 字符串或对象 | []     |\n| channels        | 轨道数量                                                         | Number  |              | 0      |\n| autoplay        | 是否自动播放                                                     | Boolean |              | true   |\n| loop            | 是否开启弹幕循环                                                 | Boolean |              | false  |\n| loopOnly        | 是否开启弹幕循环时避免重复弹幕                                   | Boolean |              | false  |\n| speeds          | 弹幕速度（每秒移动的像素数）                                     | Number  |              | 200    |\n| debounce        | 弹幕刷新频率(ms)                                                 | Number  |              | 100    |\n| randomChannel   | 随机选择轨道插入                                                 | Boolean |              | false  |\n| isSuspend       | 是否开启弹幕悬浮暂停（试验型功能）                               | Boolean |              | false  |\n| top             | 弹幕垂直间距(px)                                                 | Number  |              | 4      |\n| right           | 弹幕水平间距(px)                                                 | Number  |              | 0      |\n| performanceMode | 是否开启性能模式（默认使用 requestAnimationFrame 代替 CSS 动画） | Boolean |              | true   |\n| zIndex          | 弹幕层级                                                         | Number  |              | 10     |\n| autoResize      | 是否自动监听容器大小变化以重新计算弹幕位置                       | Boolean |              | true   |\n\n- 注 1：channels 为 0，则轨道数为容器可容纳最高轨道数\n- 注 2：danmus 初始化后如果为空，则 autoplay 失效。因此对于异步加载的弹幕数据，需要手动调用 `refName.value.play()` 进行播放\n- 注 3：弹幕刷新频率为每隔多长时间插入一条弹幕\n- 注 4：性能模式默认使用 requestAnimationFrame 代替 CSS 动画，在浏览器不开启硬件加速时，FPS 会非常稳定\n\n## Methods\n\n通过以下方式调用：\n\n```js\n\u003cvue-danmaku ref=\"danmakuRef\"\u003e\n  \u003ctemplate #danmu=\"{ danmu }\"\u003e{{ danmu }}\u003c/template\u003e\n\u003c/vue-danmaku\u003e\n\nsetup() {\n  const danmakuRef = ref(null)\n\n  danmakuRef.value.play()\n}\n```\n\n| 方法名                    | 说明                                 | 参数                                                                                      |\n| :------------------------ | :----------------------------------- | :---------------------------------------------------------------------------------------- |\n| play()                    | 开始/继续播放                        | -                                                                                         |\n| pause()                   | 暂停弹幕播放                         | -                                                                                         |\n| stop()                    | 停止播放并清空弹幕                   | -                                                                                         |\n| show()                    | 弹幕显示                             | -                                                                                         |\n| hide()                    | 弹幕隐藏                             | -                                                                                         |\n| reset()                   | 重置配置                             | -                                                                                         |\n| resize()                  | 容器尺寸改变时重新计算滚动距离       | -                                                                                         |\n| addDanmu(danmu, position) | 发送弹幕（统一方法，可指定插入位置） | danmu 数据，可以是字符串或对象；position: 当前插入的位置 'current','end'，默认为'current' |\n| insert(danmu)             | 绘制弹幕（实时插入，不进行数据绑定） | danmu 数据，可以是字符串或对象                                                            |\n| getPlayState()            | 获得当前播放状态                     |                                                                                           |\n| getMaxChannels()          | 获得当前最大轨道数                   |                                                                                           |\n\n- 注 1：push 和 add 方法已废弃，请使用 addDanmu 代替\n- 注 2：insert 跟 addDanmu 的区别在于，insert 不存储于内部变量，而是直接插入 DOM，适用于直播等场景\n\n## Events\n\n| 事件名    | 说明                                           | 返回值                      |\n| :-------- | :--------------------------------------------- | :-------------------------- |\n| list-end  | 所有弹幕插入完毕                               | -                           |\n| play-end  | 所有弹幕播放完成（已滚出屏幕）                 | index（最后一个弹幕的下标） |\n| dm-over   | 开启弹幕悬浮暂停时，当进入弹幕，暂停时触发     | 触发的弹幕对象元素          |\n| dm-out    | 开启弹幕悬浮暂停时，当离开弹幕，恢复滚动时触发 | 触发的弹幕对象元素          |\n| dm-click  | 弹幕被点击时触发                               | {el, index, danmu, event}   |\n| dm-remove | 弹幕被移除时触发                               | {el, index, danmu}          |\n| error     | 发生错误时触发                                 | {message, code}             |\n\n## 讨论交流和 BUG 反馈\n\n这个 [QA 文档](https://github.com/hellodigua/vue-danmaku/blob/main/QA.md) 收集了一些常见问题，可以做阅读参考\n\n也可以给本项目 [提交 issue](https://github.com/hellodigua/vue-danmaku/issues)\n\n如果 vue-danmaku 帮助到了你，欢迎 [star](https://github.com/hellodigua/vue-danmaku/) ヾ(_ゝ ω・_)ノ\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhellodigua%2Fvue-danmaku","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhellodigua%2Fvue-danmaku","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhellodigua%2Fvue-danmaku/lists"}