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	-	[]