Skip to content

wangzhije/vue-danmaku

 
 

Repository files navigation

vue-danmaku

一个非时间流式的弹幕交互组件

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

Install

npm install vue-danmaku --save

Usage

<vue-danmaku ref="danmaku" :danmus="danmus" :config="config" @inited="onInit">
  <slot></slot>
</vue-danmaku>
import vueDanmaku from 'vue-danmaku'

data() {
  return {
    danmus: ['danmu1', 'danmu2', 'danmu3', 'danmu4', '...']
    config: {
      channels: 5,
      loop: true,
      speed: 5,
      fontSize: 20
    }
  }
}

Attributes

参数 说明 类型 可选值 默认值
channels 轨道数量 [Number] 容器可容纳最高轨道数
loop 是否开启弹幕循环 [Boolean] false
speed 弹幕速度,值越大弹幕越慢 [Number] 5
fontSize 弹幕字号 [Number] 20

Events

事件名称 说明 回调参数
inited 弹幕初始化完毕,准备就绪 null

Methods

方法名 说明 参数
play 开始弹幕滚动
pause 暂停弹幕滚动
stop 停止弹幕滚动
show 弹幕显示
hide 弹幕隐藏
reset 应用设置
add 新增弹幕

TODO

  • 弹幕暂停
  • 弹幕速度
  • 弹道控制
  • 弹幕循环
  • 弹幕速度
  • 弹幕字号
  • 新增弹幕
  • 弹幕透明度
  • 弹幕操作事件
  • 要不要增加时间模式呢

About

一个非时间流式的弹幕交互组件

Resources

Stars

Watchers

Forks

Packages

No packages published

Languages

  • Vue 62.5%
  • JavaScript 33.1%
  • HTML 4.1%
  • CSS 0.3%