一、彈幕效果展示

如上圖所示的效果，這里我們使用vue 制作。

---

二、使用技術 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,});...

---

三、實例演示

這個封裝成一個 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制作弹幕的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。