Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

https://github.com/superhos/vue-baberrage

A simple Barrage plugin Base on Vue.js. | 基于Vue.js弹幕插件.
https://github.com/superhos/vue-baberrage

Last synced: about 2 months ago
JSON representation

A simple Barrage plugin Base on Vue.js. | 基于Vue.js弹幕插件.

Lists

README 

        




  


  VueBaberrage

  


	





Barrage plugin for Vue.js.

















  Overview •

  Overview •

  Demo •

  Installation •

  Usage •

  Plug Options •

  Roadmap




## Introduction



Baberrage is one of the popular comment perform style in China.



## Overview



![new_version](https://raw.githubusercontent.com/superhos/vue-baberrage/master/screenshot/demo-show.gif)



GIF performance is not good enough. Please refer to [DEMO](http://blog.chenhaotaishuaile.com/vue-baberrage/) page



[中文文档](/docs/zh/README.md)



## Demo



See the [DEMO](https://blog.chenhaotaishuaile.com/vue-baberrage/) page



## Installation



1) Install package via NPM



```bash

npm i vue-baberrage

```

2) Install plugin within project



```javascript

import Vue from 'vue'

import { vueBaberrage } from 'vue-baberrage'

Vue.use(vueBaberrage)

```

or



```javascript

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

```



or



```html



```



## Usage



1) Template

`isShow` and `barrageList` are necessary.



```html




    



```



2) Script



```javascript

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



Just two step, and add new barrage message by pushing data into the `barrageList`. You needn't concern about the management of the barrageList, it will be handled by vue-baberrage. Suggest the `barrageList` store into the Vuex.



## Custom Example



New function in version 3.2.0. Support provides VNode to render the barrage.

````javascript



		

			

			{{slotProps.item.data.userName}}: {{slotProps.item.msg}}

			

		

	  

````

Customized your barrage UI as the slot of component.`props.item` data same as barrage data. Noticed that, if the width of barrage not fit in stage. You can add the field `extraWidth` in barrage data.

````javascript

{

	id: ++this.currentId,

	avatar: "./static/avatar.jpg",

	msg: this.msg,

	data: {

	  userName: 'more data'

	},

	time: 5,

	type: MESSAGE_TYPE.NORMAL,

	extraWidth: 60

}

````



Since vue-baberrage only count the width of length of the barrage's message.



## Plugin Options



#### isShow

	- Default: `true`

	- Acceptable-Values: Boolean

	- Function: This is the switch that if barrage is displayed.



#### barrageList

	- Default: `[]`

	- Acceptable-Values: Array

	- Function: The is the container for managing the all barrage messages.



#### boxWidth

	- Default: `parent's Width`

	- Acceptable-Values: Number

	- Function: Determine the width of the stage.



#### boxHeight

	- Default: `window's Height`

	- Acceptable-Values: Number

	- Function: Determine the height of the stage.



#### messageHeight

	- Default: `message's Height`

	- Acceptable-Values: Number

	- Function: Determine the height of the message.



#### maxWordCount

	- Default: 60

	- Acceptable-Values: Number

	- Function: Determine the word count of the message.



#### loop

	- Default: `false`

	- Acceptable-Values: Boolean

	- Function: Loop or not.



#### throttleGap

	- Default: 2000

	- Acceptable-Values: Number

	- Function: The gap time between the message



#### posRender

	- Default: null

	- Acceptable-Values: Function

	- Function: To customize the lane of babbarrage messages.

	- Return: The function muse return the index of the lane.



#### lanesCount

	- Default: 0

	- Acceptable-Values: Number

	- Function: To fixed the number of the lanes.



## Barrage Message Options



#### id

	- Default: `null`

	- Acceptable-Values: Number

	- Function: For distinguish with other barrage messages.



#### avatar

	- Default: `#`

	- Acceptable-Values: String

	- Function: Show the avatar of the barrage message.

	

#### msg

	- Default: `null`

	- Acceptable-Values: String

	- Function: The content of the barrage message.



#### barrageStyle

	- Default: `normal`

	- Acceptable-Values: String

	- Function: the css class name of the barrage message.



#### time

	- Default: `10`

	- Acceptable-Values: Number

	- Function: How long does the barrage message show.(Seconds)



#### type

	- Default: MESSAGE_TYPE.NORMAL

	- Acceptable-Values: Symbol

	- Function: The type of the barrage message. 

				MESSAGE_TYPE.NORMAL for scroll from right to left. 

				MESSAGE_TYPE.FROM_TOP for fixed on the top of the stage.



#### extraWidth

	- Default: 0

	- Acceptable-Values: Number

	- Function: Add extra width to the barrage message.



## Events



`barrage-list-empty` when the `barrageList` is empty will be called.



```html



```



## Roadmap



#### Version 0.0.1

- Realized the basic functionality.



#### Version 1.0.0

- Performance improvement.



#### Version 1.2.0

- Code specification

- Performance improvement.



#### Version 2.1.2

- Used ES6.

- Performance improvement.



#### Version 2.1.9

- Added Throttling



#### Version 3.1.0

- Used Rollup to build.

- Add `posRender` attribute for customizing the show up lane of baberrage messages.

- Fixed issues.



#### Version 3.2.0

- Support customize baberrage.

- Fixed issues.



## Future

I am developing `Vue-Baberrage-Plus`, difference between `Vue-Barrage` and `Vue-Baberrage-Plus` is former will be used for a tool, and `Plus` is a baberrage system.