/vue-custom-barrage

基于 vue 的自定义弹幕

Primary LanguageJavaScript

vue-custom-barrage

支持用户使用插槽自定义弹幕，使用简单, 无须担心 XSS

DEMO

Install

npm i vue-custom-barrage

Use

import Vue from 'vue'
import Barrage from 'vue-custom-barrage';

Vue.use(Barrage)

Example

<Barrage :data='barrageData' style='height: 400px' />


export default {
  data() {
    return {
      barrageData: ['text1', 'text2', 'text3']
    }
  }
}

<Barrage :data='barrageData' style='height: 400px'>
  <template #default='data'>
    <div>自定义弹幕 {{ data.text }}</div>
  </template>
</Barrage>

export default {
  data() {
    return {
      barrageData: [
        { text: 'text1' },
        { text: 'text2' },
        { text: 'text3' },
      ]
    }
  }
}

Options

参数 描述 类型 可选值 默认值
pause 是否全部暂停 boolean - false
touchPause 是否触摸弹幕暂停 boolean - false
barrageClass 弹幕类名 string - -
barrageStyle 弹幕样式 object - -
showArea 弹幕展示区域 string top / middle / bottom / all all
trackHeight 弹幕轨道高度 number - 20
speed 弹幕速度(单位：秒) number - 10
defer 同一轨道弹幕完全出现至下条弹幕首次出现的间隔(单位：秒) number - 0.5
data 弹幕数据 array - []