1.引入插件
总的来说还是比较轻便的一个插件，引入按照官方api一步步做即可。
// main.js引入
import Vue from 'vue'
import {
vueBaberrage } from 'vue-baberrage'
Vue.use(vueBaberrage)
//1.在template中引入下方组件
<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,
});
...
Already done，两步即可， 当有新的数据加入到barrageList，就会以弹幕形式展现出来，建议barrageList放在Vuex中。
2.遇到的bug
在按照官方api引入完成后（demo代码和官网、各位博主的都一致），一切正常，控制台也没有报错，但是就是vue-baberrage显示不出弹幕效果。
一开始以为是被项目中其他div遮挡了，就各种调整z-index层级，但是还是毫无效果。后来各种尝试，才发现了是因为在引入vue的时候用的是外部CDN的问题，把index.html中的引入去除即恢复正常。
//在index.html中
<script src="https://cdn.staticfile.org/vue/2.5.22/vue.min.js"></script>
但是依旧没有明白的是，在vue.config.js中声明了vue的打包方式，为何还会出现这种bug，控制台也没有输出，因此写下此篇文章记录。
module.exports = {
chainWebpack: config => {
// 发布模式
config.when(process.env.NODE_ENV === 'production', config => {
// 默认是main.js要清空换成自己的
config.entry('app').clear().add('./src/main-prod.js')
config.set('externals', {
vue: 'Vue',
'vue-router': 'VueRouter',
axios: 'axios',
lodash: '_',
// echarts: 'echarts',
nprogress: 'NProgress'
// 'mavon-editor': 'mavon-editor' // 配置有问题，不知道如何修改
})
config.plugin('html').tap(args => {
args[0].isProd = true
return args
})
})
// 开发模式
config.when(process.env.NODE_ENV === 'development', config => {
// 默认是main.js要清空换成自己的
config.entry('app').clear().add('./src/main-dev.js')
config.plugin('html').tap(args => {
args[0].isProd = false
return args
})
})
}
}
3.vue组件局部引入并使用弹幕
下面部分是自己使用的vue-baberrage组件做的简单的弹幕示例
<template>
<div>
<!-- banner -->
<div class="message-banner">
<!-- 弹幕输入框 -->
<div class="message-container">
<h1 class="message-title">留言板</h1>
<div class="animated fadeInUp message-input-wrapper">
<input
v-model="messageContent"
@click="show = true"
placeholder="说点什么吧" style="background: transparent;"
/>
<button
class="ml-3 animated bounceInLeft"
@click="addToList"
v-show="show"
>
发送
</button>
</div>
</div>
<!-- 弹幕列表 -->
<div class="barrage-container">
<vue-baberrage :barrageList="barrageList" :loop="true">
<template v-slot:default="slotProps">
<span class="barrage-items">
<img
:src="slotProps.item.avatar"
width="30"
height="30"
style="border-radius:50%"
/>
<span class="ml-2">{
{
slotProps.item.nickname }} :</span>
<span class="ml-2">{
{
slotProps.item.messageContent }}</span>
</span>
</template>
</vue-baberrage>
</div>
</div>
</div>
</template>
<script>
export default {
mounted () {
this.getUser()
this.listMessage()
},
data () {
return {
avatar: '',
nickname: '',
show: false,
messageContent: '',
barrageList: []
}
},
methods: {
async addToList () {
if (this.messageContent.trim() === '') {
this.$message.info('留言不能为空')
return false
}
const userAvatar = this.avatar
? this.avatar
: 'https://gravatar.loli.net/avatar/d41d8cd98f00b204e9800998ecf8427e?d=mp&v=1.4.14'
const userNickname = this.nickname
? this.nickname
: '游客'
const message = {
avatar: userAvatar,
nickname: userNickname,
messageContent: this.messageContent,
time: Math.floor(Math.random() * 10 + 3)
}
this.barrageList.push(message)
this.messageContent = ''
const {
data: res } = await this.$http.post('/extension/message/add', message)
if (res.flag) {
// 弹出提示信息
this.$message.success('新增留言成功')
} else {
// 执行失败
this.$message.error('留言失败')
}
},
async listMessage () {
const {
data: res } = await this.$http.get('/extension/message/getMessageList')
if (res.flag) {
// this.$message.success(res.message)
this.barrageList = res.data
} else {
this.$message.error(res.message)
}
},
getUser () {
this.user = window.sessionStorage.getItem('user')
if (this.user != null) {
this.nickname = JSON.parse(this.user).nickname
this.avatar = JSON.parse(this.user).avatar
}
}
}
}
</script>
<style scoped>
.message-banner {
position: absolute;
/*top: -58px;*/
left: 0;
right: 0;
height: 100vh;
background: url(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1606901653454&di=8da42ee1bb5a8f94eb9bd9f6b2a9b968&imgtype=0&src=http%3A%2F%2Fwww.deskcar.com%2Fdesktop%2Felse%2F201272223323%2F5.jpg) center center /
cover no-repeat;
background-color: #49b1f5;
animation: header-effect 1s;
}
.message-title {
color: #eee;
animation: title-scale 1s;
}
.message-container {
position: absolute;
width: 360px;
top: 35%;
left: 0;
right: 0;
text-align: center;
z-index: 5;
margin: 0 auto;
color: #fff;
}
.message-input-wrapper {
display: flex;
justify-content: center;
height: 2.5rem;
margin-top: 2rem;
}
.message-input-wrapper input {
outline: none;
width: 70%;
border-radius: 20px;
height: 100%;
padding: 0 1.25rem;
color: #eee;
border: #fff 1px solid;
}
.message-input-wrapper input::-webkit-input-placeholder {
color: #eeee;
}
.message-input-wrapper button {
outline: none;
border-radius: 20px;
height: 100%;
padding: 0 1.25rem;
border: #fff 1px solid;
}
.barrage-container {
position: absolute;
top: 50px;
left: 0;
right: 0;
bottom: 0;
height: calc(100% -50px);
width: 100%;
}
.barrage-items {
background: rgb(0, 0, 0, 0.7);
border-radius: 100px;
color: #fff;
padding: 5px 10px 5px 5px;
align-items: center;
display: flex;
}
</style>