vue-弹幕展示

 

地址： GitHub - superhos/vue-baberrage: A simple Barrage plugin Base on Vue.js. | 基于Vue.js弹幕插件.

1、安装

cnpm install vue-baberrage

2、全局引入

import { vueBaberrage } from 'vue-baberrage'
Vue.use(vueBaberrage)

3、使用

import { MESSAGE_TYPE } from 'vue-baberrage'

 <!--弹幕-->
            <div class="barrages-drop">
                <vue-baberrage
                        :isShow="barrageIsShow"
                        :barrageList="barrageList"
                        :maxWordCount="maxWordCount"
                        :throttleGap="throttleGap"
                        :loop="barrageLoop"
                        :boxHeight="boxHeight"
                        :messageHeight="messageHeight"
                        :lanesCount="2"
                        @barrage-list-empty="getUserBuyList">
                </vue-baberrage>
            </div>

this.userBuyList=[{"avatar":"","nickname":"超"},{"avatar":"","nickname":"晓"},{"avatar":"","nickname":"晓"},{"avatar":"","nickname":"超m"}]

/*弹幕
            * */
            addToList() {
                this.userBuyList.map((v2, i2) => {
                    v2.userBuyId = i2;
                    this.barrageList.push({
                        id: v2.userBuyId,
                        avatar: v2.avatar,
                        msg: v2.nickname + '已购买',
                        time: 4,
                        type: MESSAGE_TYPE.NORMAL,
                        // barrageStyle: v.barrageStyle
                    });
                });

            },

Plugin Options

isShow

- Default: `true`
- Acceptable-Values: Boolean
- Function: 是否显示弹幕

barrageList

- Default: `[]`
- Acceptable-Values: Array
- Function: 弹幕数据列表

boxWidth

- Default: `parent's Width`
- Acceptable-Values: Number
- Function: 显示弹幕区域的宽度

boxHeight

- Default: `window's Height`
- Acceptable-Values: Number
- Function: 显示弹幕区域的高度

messageHeight

- Default: `message's Height`
- Acceptable-Values: Number
- Function: 弹幕高度

maxWordCount

- Default: `60`
- Acceptable-Values: Number
- Function: 弹幕最大字数长度，超过则忽略（中文占2长度，英文占1长度）

loop

- Default: `false`
- Acceptable-Values: Boolean
- Function: 是否循环

throttleGap

- Default: 2000
- Acceptable-Values: Number
- Function: 弹幕之间的节流时间

posRender

- Default: null
- Acceptable-Values: Function
- Function: 自定义弹幕显示的泳道
- Return: 需要返回泳道的索引

lanesCount

- Default: 0
- Acceptable-Values: Number
- Function: 泳道的数量。

弹幕数据选项

id

- Default: `null`
- Acceptable-Values: Number
- Function: 用以区分每条弹幕

avatar

- Default: `#`
- Acceptable-Values: String
- Function: 弹幕的头像

msg

- Default: `null`
- Acceptable-Values: String
- Function: 弹幕内容

barrageStyle

- Default: `normal`
- Acceptable-Values: String
- Function: 额外的弹幕的样式

time

- Default: `10`
- Acceptable-Values: Number
- Function: 弹幕展示的时间（单位：秒）

type

- Default: MESSAGE_TYPE.NORMAL
- Acceptable-Values: Symbol
- Function: 弹幕的类型
			MESSAGE_TYPE.NORMAL ： 正常从右到左滚动
			MESSAGE_TYPE.FROM_TOP ： 固定在弹幕区域上方

position

- Default: `top`
- Acceptable-Values: Boolean
- Function: 目前为固定值，之后功能更新。

extraWidth

- Default: 0
- Acceptable-Values: Number
- Function: 弹幕的额外宽度。

Events

当 barrageList 为空的时候会调用 barrage-list-empty。

<vue-baberrage
	      :is-show= "barrageIsShow"
	      :barrage-list = "barrageList"
	      :loop = "barrageLoop"
	      @barrage-list-empty="sayHi"
	      >