vue-danmaku弹幕播报组件

m0_53265725

183人浏览 · 2026-06-25 14:25:32

m0_53265725 · 2026-06-25 14:25:32 发布

npm install vue-danmaku@1 --save

<template>
  <div>
    <vue-danmaku v-model="danmus" style="height:100px; width:300px;"></vue-danmaku>
  </div>
</template>

<script>
import vueDanmaku from 'vue-danmaku'

export default {
  components: {
    vueDanmaku,
  },
  data() {
    return {
      danmus: ['danmu1', 'danmu2', 'danmu3', '...'],
    }
  },
}
</script>

Attributes

参数	说明	类型	可选值	默认值
v-model	弹幕元素列表，支持纯文本或者自定义对象	Array	字符串或对象	[]
channels	轨道数量	Number		0
autoplay	是否自动播放	Boolean		true
useSlot	是否开启弹幕插槽	Boolean		false
loop	是否开启弹幕循环	Boolean		false
fontSize	弹幕字号（slot 模式下不可用）	Number		18
extraStyle	额外样式（slot 模式下不可用）	String
speeds	弹幕速度（每秒移动的像素数）	Number		200
debounce	弹幕刷新频率(ms)	Number		100
randomChannel	随机选择轨道插入	Boolean		false
isSuspend	是否开启弹幕悬浮暂停（试验型功能）	Boolean		false
top	弹幕垂直间距(px)	Number		4
right	弹幕水平间距(px)	Number		0

方法

通过 this.$refs[refName] 调用

方法名	说明	参数
play	开始/继续播放	-
pause	暂停弹幕播放	-
stop	停止播放并清空弹幕	-
show	弹幕显示	-
hide	弹幕隐藏	-
reset	重置配置	-
resize	容器尺寸改变时重新计算滚动距离（需手动调用）	-
push	发送弹幕（插入到弹幕列表末尾，排队显示）	danmu 数据，可以是字符串或对象
add	发送弹幕（插入到当前播放位置，实时显示）	danmu 数据，可以是字符串或对象
insert	绘制弹幕（实时插入，不进行数据绑定）	danmu 数据，可以是字符串或对象
getPlayState	获得当前播放状态

事件

事件名	说明	返回值
list-end	所有弹幕插入完毕	-
play-end	所有弹幕播放完成（已滚出屏幕）	index（最后一个弹幕的下标）

亚马逊云科技技术品牌专区

更多推荐

Kiro Editor 开发实战：使用 Cargo 构建、测试与性能优化指南

欢迎来到这篇终极指南，我们将深入探索如何使用Rust构建高性能的终端文本编辑器Kiro Editor。无论你是Rust新手还是经验丰富的开发者，这篇完整教程将带你了解如何利用Cargo工具链进行高效的开发、测试和性能优化，打造一款快速、轻量且功能强大的UTF-8文本编辑器。## 什么是Kiro Editor？Kiro Editor是一款使用Rust编写的极简终端文本编辑器，它最初是著名编辑