Vuejs-Vue baberrage: vue-baberrage - A simple Barrage plugin Base on Vue.js


VueBaberrage

Barrage plugin for Vue.js.

OverviewOverviewDemoInstallationUsagePlug OptionsRoadmap

Introduction

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

Overview

new_version

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
  1. 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>
  1. 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
      });
  ...
  1. 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"
	      >

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.

Comments

  • Bump tmpl from 1.0.4 to 1.0.5
    Bump tmpl from 1.0.4 to 1.0.5

    Sep 20, 2021

    Bumps tmpl from 1.0.4 to 1.0.5.

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    Reply
  • Module build failed: ReferenceError: Unknown plugin
    Module build failed: ReferenceError: Unknown plugin "@babel/plugin-syntax-dynamic-import" specified in

    Sep 22, 2021

    Module build failed: ReferenceError: Unknown plugin "@babel/plugin-syntax-dynamic-import" specified in "/Users/jason/qytx/doctor-wap/node_modules/vue-baberrage/.babelrc" at 0, attempted to resolve relative to "/Users/jason/qytx/doctor-wap/node_modules/vue-baberrage"

    Reply
  • Bump url-parse from 1.4.4 to 1.5.3
    Bump url-parse from 1.4.4 to 1.5.3

    Oct 5, 2021

    Bumps url-parse from 1.4.4 to 1.5.3.

    Commits
    • ad44493 [dist] 1.5.3
    • c798461 [fix] Fix host parsing for file URLs (#210)
    • 201034b [dist] 1.5.2
    • 2d9ac2c [fix] Sanitize only special URLs (#209)
    • fb128af [fix] Use 'null' as origin for non special URLs
    • fed6d9e [fix] Add a leading slash only if the URL is special
    • 94872e7 [fix] Do not incorrectly set the slashes property to true
    • 81ab967 [fix] Ignore slashes after the protocol for special URLs
    • ee22050 [ci] Use GitHub Actions
    • d2979b5 [fix] Special case the file: protocol (#204)
    • Additional commits viewable in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    Reply
  • 直接引入的js用不了
    直接引入的js用不了

    Jan 10, 2022

    为什么会有require语法呢 require is not defined at vue-baberrage.js:1:8066

    Reply
  • Bump shelljs from 0.7.8 to 0.8.5
    Bump shelljs from 0.7.8 to 0.8.5

    Jan 15, 2022

    Bumps shelljs from 0.7.8 to 0.8.5.

    Release notes

    Sourced from shelljs's releases.

    v0.8.5

    This was a small security fix for #1058.

    v0.8.4

    Small patch release to fix a circular dependency warning in node v14. See #973.

    v0.8.3

    Closed issues:

    • Shelljs print stderr to console even if exec-only "silent" is true #905
    • refactor: remove common.state.tempDir #902
    • Can't suppress stdout for echo #899
    • exec() doesn't apply the arguments correctly #895
    • shell.exec('npm pack') painfully slow #885
    • shelljs.exec cannot find app.asar/node_modules/shelljs/src/exec-child.js #881
    • test infra: mocks and skipOnWin conflict #862
    • Support for shell function completion on IDE #859
    • echo command shows options in stdout #855
    • silent does not always work #851
    • Appveyor installs the latest npm, instead of the latest compatible npm #844
    • Force symbolic link (ln -sf) does not overwrite/recreate existing destination #830
    • inconsistent result when trying to echo to a file #798
    • Prevent require()ing executable-only files #789
    • Cannot set property to of [object String] which has only a getter #752
    • which() should check executability before returning a value #657
    • Bad encoding experience #456
    • phpcs very slow #440
    • Error shown when triggering a sigint during shelljs.exec if process.on sigint is defined #254
    • .to\(file\) does not mute STDIO output #146
    • Escaping shell arguments to exec() #143
    • Allow multiple string arguments for exec() #103
    • cp does not recursively copy from readonly location #98
    • Handling permissions errors on file I/O #64

    Merged pull requests:

    ... (truncated)

    Changelog

    Sourced from shelljs's changelog.

    Change Log

    Unreleased

    Full Changelog

    Closed issues:

    • find returns empty array even though directory has files #922
    • exec() should support node v10 (maxbuffer change) #915
    • grep exit status and extra newlines #900
    • Travis CI currently broken #893
    • Drop node v4 support #873
    • cp -Ru respects the -R but not the -u #808

    Merged pull requests:

    v0.8.3 (2018-11-13)

    Full Changelog

    Closed issues:

    • Shelljs print stderr to console even if exec-only "silent" is true #905
    • refactor: remove common.state.tempDir #902
    • Can't suppress stdout for echo #899
    • exec() doesn't apply the arguments correctly #895
    • shell.exec('npm pack') painfully slow #885
    • shelljs.exec cannot find app.asar/node_modules/shelljs/src/exec-child.js #881
    • test infra: mocks and skipOnWin conflict #862
    • Support for shell function completion on IDE #859
    • echo command shows options in stdout #855
    • silent does not always work #851
    • Appveyor installs the latest npm, instead of the latest compatible npm #844
    • Force symbolic link (ln -sf) does not overwrite/recreate existing destination #830
    • inconsistent result when trying to echo to a file #798
    • Prevent require()ing executable-only files #789
    • Cannot set property to of [object String] which has only a getter #752

    ... (truncated)

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    Reply
  • Bump follow-redirects from 1.6.1 to 1.14.7
    Bump follow-redirects from 1.6.1 to 1.14.7

    Jan 15, 2022

    Bumps follow-redirects from 1.6.1 to 1.14.7.

    Commits
    • 2ede36d Release version 1.14.7 of the npm package.
    • 8b347cb Drop Cookie header across domains.
    • 6f5029a Release version 1.14.6 of the npm package.
    • af706be Ignore null headers.
    • d01ab7a Release version 1.14.5 of the npm package.
    • 40052ea Make compatible with Node 17.
    • 86f7572 Fix: clear internal timer on request abort to avoid leakage
    • 2e1eaf0 Keep Authorization header on subdomain redirects.
    • 2ad9e82 Carry over Host header on relative redirects (#172)
    • 77e2a58 Release version 1.14.4 of the npm package.
    • Additional commits viewable in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    Reply
  • 如何控制每条泳道的高度呢?弹幕高度boxHeight设置失败?如何能把弹幕position到手机屏幕的中间位置呢,用position弹幕就失效了?
    如何控制每条泳道的高度呢?弹幕高度boxHeight设置失败?如何能把弹幕position到手机屏幕的中间位置呢,用position弹幕就失效了?

    Mar 31, 2020

    使用vue开发,H5项目 如何控制每条泳道的高度呢?弹幕高度boxHeight设置失败?如何能把弹幕position到手机屏幕的中间位置呢,用position弹幕就失效了?

    Reply
  • 弹幕会重合在一起,怎么解决
    弹幕会重合在一起,怎么解决

    Apr 4, 2020

    大佬,您好,您这个组件用起来还是挺好的,就是我这里弹幕会重合在一起,感觉上并不太完美 image

    微信图片_20200404155630

    Reply
  • 给数组初始值弹幕不显示,使用按钮添加弹幕数据页面会卡死
    给数组初始值弹幕不显示,使用按钮添加弹幕数据页面会卡死

    May 29, 2020

    代码为文档中提供的demo:

    <template>
      <div id="app">
        <button @click="addToList">添加弹幕</button>
        <vue-baberrage :isShow="barrageIsShow" :barrageList="barrageList" :loop="barrageLoop"></vue-baberrage>
      </div>
    </template>
    
    <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
          });
        }
      }
    }
    </script>
    

    虽然按照这个 #33 朋友的方法可以做到页面不会立即卡死,但是cpu飙升,且弹幕始终没有出来, console也没有报错信息

    "dependencies": {
        "core-js": "^3.6.5",
        "vue": "^2.6.11",
        "vue-baberrage":  "^3.2.4"
      },
      "devDependencies": {
        "@vue/cli-plugin-babel": "~4.4.0",
        "@vue/cli-plugin-eslint": "~4.4.0",
        "@vue/cli-service": "~4.4.0",
        "babel-eslint": "^10.1.0",
        "eslint": "^6.7.2",
        "eslint-plugin-vue": "^6.2.2",
        "vue-template-compiler": "^2.6.11"
      }
    
    Reply
  • 是否可以通过样式增加性能
    是否可以通过样式增加性能

    Dec 14, 2018

    从下面的图片看起来, 弹幕的移动是通过 js 不断修改 transform 属性。 image

    这样会导致 dom 频繁更新, 导致部分手机卡顿。 如果就移动位置而言, 是不是由 js 设置初始位置和目标位置就好了? 移动由 css 去做?

    Reply
  • 往数组中添加数据,会导致整个应用卡死
    往数组中添加数据,会导致整个应用卡死

    Apr 15, 2020

    <vue-baberrage
    	class="baberrage"
    	:isShow="barrageIsShow"
    	:barrageList="barrageList"
    	:loop="barrageLoop"></vue-baberrage>
    
    //这里是api请求获取的数据
     vm.barrageList.push(...vm.tempBarrageList)
    
    Reply
  • 如何保证this.barrageList这个数组的长度为6?
    如何保证this.barrageList这个数组的长度为6?

    Sep 11, 2019

    使用this.barrageList.push(),不断添加到数组中,setInterval(),定时执行这个方法,会不断地给数组添加数据,随后数组会越来越大,咋保证数组长度就为6,新添加一个后,删除原先的!谢谢

    Reply