vue-play-baberrage v1.0.6
Introduction
Baberrage is one of the popular comment perform style in China.
Overview
GIF performance is not good enough. Please refer to DEMO page
Demo
See the DEMO page
Installation
1) Install package via NPM
npm i 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
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.
<vue-baberrage
ref="baberrage"
:lanesCount="5"
:boxHeight= "stageHeight"
:isShow= "barrageIsShow"
:barrageList = "barrageList"
:loop = "barrageLoop"
:maxWordCount = "60"
:hoverLanePause = "hoverLanePause"
>
<template v-slot:default="slotProps">
<span style="color: #000">
{{slotProps.item.data.userName}}: {{slotProps.item.msg}}
</span>
</template>
</vue-baberrage>
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.
{
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.
<vue-baberrage
:is-show= "barrageIsShow"
:barrage-list = "barrageList"
:loop = "barrageLoop"
@barrage-list-empty="sayHi"
>
npm 上传
- npm不能用代理上传包
- npm login(如果没执行过,需要执行一次)
- npm pulish
Roadmap
Version 1.0.0
- 修改弹幕在弹道出现的形式.
Version 1.0.1
- 修改备注说明.
Version 1.0.2
- 修改备注说明.
Version 1.0.2
- 修复了弹幕重叠的情况.