Vue-danmaku NPM

vue-danmaku

npm download

基于 Vue.js 的弹幕交互组件

简体中文 | English

Demo： https://hellodigua.github.io/vue-danmaku

Live Demo： https://jsfiddle.net/hellodigua/j78h6429/99/

现已支持 vue3：vue3-danmaku

Preview

preview

Install

$ npm install vue-danmaku --save

Usage

<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

注 0：v-model 为 1.5.0 版本起的新语法，支持弹幕的双向绑定，旧版本的 danmus 参数仍继续支持
注 1：channels 为 0，则轨道数为容器可容纳最高轨道数
注 2：danmus 初始化后如果为空，则 autoplay 失效。因此对于异步加载的弹幕数据，需要手动调用 this.$refs[refName].play() 进行播放
注 3：弹幕刷新频率为每隔多长时间插入一条弹幕

内置方法

通过 this.$refs[refName] 调用

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

注 1：push 和 add 的返回值为插入后的下标，可通过判断下标的方式对当前插入弹幕进行样式定制
注 2：insert 跟 push/add 的区别在于，insert 不进行数据绑定，而是直接插入 DOM，适用于直播等场景

事件

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

Slot

如果你有自定义弹幕结构与样式的需求，你可以传入任意结构的对象并自己写内部样式。

<template>
  <vue-danmaku ref="danmaku" v-model="danmus" use-slot loop :speeds="200" :channels="5">
    <!-- 弹幕插槽（vue 2.6.0 及以上版本可使用 v-slot:dm="{ index, danmu }"语法） -->
    <template slot="dm" slot-scope="{ index, danmu }">
      <div>{{ index }}{{ danmu.name }}：{{ danmu.text }}</div>
    </template>
    <!-- 容器插槽 -->
    <div></div>
  </vue-danmaku>
</template>

<script>
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' }, ...]
    }
  }
}
</script>