vue实现弹幕功能

（1）效果

如上图所示的效果，这里我们使用vue 制作。

(2)使用技术 vue + vue-baberrage

1.安装：

 npm install vue-baberrage

2.引入

方式一：

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

方式二：

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

方式三：

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

3.使用

HTML

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

JS

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)实例演示

这个封装成一个 vue的组件：

<template>
 <div class="barrages-drop">
 <vue-baberrage
 :isShow="barrageIsShow"
 :barrageList="barrageList"
 :maxWordCount="maxWordCount"
 :throttleGap="throttleGap"
 :loop="barrageLoop"
 :boxHeight="boxHeight"
 :messageHeight="messageHeight"
 >
 </vue-baberrage>
 </div>
</template>
<script>
import Vue from 'vue';
import { vueBaberrage, MESSAGE_TYPE } from 'vue-baberrage';
Vue.use(vueBaberrage);
export default {
 name: 'Barrages',
 data() {
 return {
 msg: '马优晨就是个辣鸡~',
 barrageIsShow: true,
 messageHeight: 3,
 boxHeight: 150,
 barrageLoop: true,
 maxWordCount: 3,
 throttleGap: 5000,
 barrageList: []
 };
 },
 mounted() {
 this.addToList();
 },
 methods: {
 addToList() {
 let list = [
 {
 id: 1,
 avatar: 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3064584167,3502823640&fm=26&gp=0.jpg',
 msg: this.msg,
 time: 3,
 barrageStyle: 'red'
 },
 {
 id: 2,
 avatar: 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3064584167,3502823640&fm=26&gp=0.jpg',
 msg: this.msg,
 time: 8,
 barrageStyle: 'green'
 },
 {
 id: 3,
 avatar: 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3064584167,3502823640&fm=26&gp=0.jpg',
 msg: this.msg,
 time: 10,
 barrageStyle: 'normal'
 },
 {
 id: 4,
 avatar: 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3064584167,3502823640&fm=26&gp=0.jpg',
 msg: this.msg,
 time: 5,
 barrageStyle: 'blue'
 },
 {
 id: 5,
 avatar: 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3064584167,3502823640&fm=26&gp=0.jpg',
 msg: this.msg,
 time: 6,
 barrageStyle: 'red'
 },
 {
 id: 6,
 avatar: 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3064584167,3502823640&fm=26&gp=0.jpg',
 msg: this.msg,
 time: 12,
 barrageStyle: 'normal'
 },
 {
 id: 7,
 avatar: 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3064584167,3502823640&fm=26&gp=0.jpg',
 msg: this.msg,
 time: 5,
 barrageStyle: 'red'
 },
 {
 id: 8,
 avatar: 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3064584167,3502823640&fm=26&gp=0.jpg',
 msg: this.msg,
 time: 5,
 barrageStyle: 'normal'
 },
 {
 id: 9,
 avatar: 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3064584167,3502823640&fm=26&gp=0.jpg',
 msg: this.msg,
 time: 8,
 barrageStyle: 'red'
 },
 {
 id: 10,
 avatar: 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3064584167,3502823640&fm=26&gp=0.jpg',
 msg: this.msg,
 time: 10,
 barrageStyle: 'yellow'
 }
 ];
 list.forEach((v) => {
 this.barrageList.push({
 id: v.id,
 avatar: v.avatar,
 msg: v.msg,
 time: v.time,
 type: MESSAGE_TYPE.NORMAL,
 barrageStyle: v.barrageStyle
 });
 });
 }
 }
};
</script>
<style lang="less">
.barrages-drop {
 .blue {
 border-radius: 100px;
 background: #e6ff75;
 color: #fff;
 }
 .green {
 border-radius: 100px;
 background: #75ffcd;
 color: #fff;
 }
 .red {
 border-radius: 100px;
 background: #e68fba;
 color: #fff;
 }
 .yellow {
 border-radius: 100px;
 background: #dfc795;
 color: #fff;
 }
 .baberrage-stage {
 position: absolute;
 width: 100%;
 height: 212px;
 overflow: hidden;
 top: 0;
 margin-top: 130px;
 }
}
</style>

github地址：

https://github.com/superhos/vue-baberrage/blob/master/docs/zh/README.md#plugin-options

总结

以上所述是小编给大家介绍的vue实现弹幕功能,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！ 如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！