README.md

基于Vue.js弹幕插件

Overview • Demo • Installation • Usage • Plug Options • Roadmap

Introduction

弹幕是中国�较受欢迎的弹幕展示方式。

Future

目前正在开发Vue-Baberrage-Plus，比较两个项目，Vue-Baberrage的定位是即开箱即用的小插件，而Plus则是一套完整的弹幕解决方案，包括会提供更流畅的展示方式，更丰富的交互方式，更完善的接入方式等。(2019-01-25)

Overview

GIF看起来效果太差了. 可以直接去 DEMO 页看效果

Demo

DEMO 页

Installation

1. Install package via NPM

npm install vue-baberrage

2. Install plugin within project

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

or

const vueBaberrage = request('vue-baberrage').vueBaberrage

or

<script src="./dist/vue-baberrage.js"></script>

Usage

1. Template isShow and barrageList are necessary.

<div id="app">
<vue-baberrage
      :isShow= "barrageIsShow"
      :barrageList = "barrageList"
      :loop = "barrageLoop"
      >
    </vue-baberrage>
</div>

2. Script

import { MESSAGE_TYPE } from 'vue-baberrage'

export default {
  name: 'app',
  data () {
    return {
      msg: 'Hello vue-baberrage',
      barrageIsShow: true,
      currentId : 0,
      barrageLoop: false,
      barrageList: []
    }
  },  
  methods:{
    addToList (){
      this.barrageList.push({
        id: ++this.currentId,
        avatar: "./static/avatar.jpg",
        msg: this.msg,
        time: 5,
        type: MESSAGE_TYPE.NORMAL,
      });
  ...

3. Already done

两步即可， 当有新的数据加入到barrageList，就会以弹幕形式展现出来，建议barrageList放在Vuex中。

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: 弹幕之间的节流时间

弹幕数据选项

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: 目前为固定值，之后功能更新。

Events

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

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

Roadmap

Version 0.0.1

• 实现基本功能.

Version 1.0.0

• 性能优化。

Version 1.2.0

• 代码规范。
• 性能优化。

Version 2.1.2

• 使用ES6.
• 性能优化。.

Version 2.1.9

• 增加节流函数