弹幕是中国较受欢迎的弹幕展示方式。
先来看一下效果图
npm install vue-baberrage -D
官方链接:https://blog.chenhaotaishuaile.com/vue-baberrage/
中文文档:https://github.com/superhos/vue-baberrage/blob/master/docs/zh/README.md
test.vue
<template>
<div>
<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: "人生若只如初见",
time: 1,
barrageStyle: 'red'
},
{
id: 2,
avatar: 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3064584167,3502823640&fm=26&gp=0.jpg',
msg: "何事秋风悲画扇",
time: 2,
barrageStyle: 'green'
},
{
id: 3,
avatar: 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3064584167,3502823640&fm=26&gp=0.jpg',
msg: "等闲变却故人心",
time: 3,
barrageStyle: 'normal'
},
{
id: 4,
avatar: 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3064584167,3502823640&fm=26&gp=0.jpg',
msg: "却道故人心易变",
time: 4,
barrageStyle: 'blue'
},
{
id: 5,
avatar: 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3064584167,3502823640&fm=26&gp=0.jpg',
msg: "骊山语罢清宵半",
time: 5,
barrageStyle: 'yellow'
},
{
id: 6,
avatar: 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3064584167,3502823640&fm=26&gp=0.jpg',
msg: "泪雨霖铃终不怨",
time: 6,
barrageStyle: 'normal'
},
{
id: 7,
avatar: 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3064584167,3502823640&fm=26&gp=0.jpg',
msg: "何如薄幸锦衣郎",
time: 7,
barrageStyle: 'red'
},
{
id: 8,
avatar: 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3064584167,3502823640&fm=26&gp=0.jpg',
msg: "比翼连枝当日愿",
time: 8,
barrageStyle: 'normal'
},
];
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 scoped>
.barrages-drop {
/deep/ .baberrage-lane{
/deep/ .blue .normal{
border-radius: 100px;
background: #e6ff75;
color: #fff;
}
/deep/ .green .normal{
border-radius: 100px;
background: #75ffcd;
color: #fff;
}
/deep/ .red .normal{
border-radius: 100px;
background: #e68fba;
color: #fff;
}
/deep/ .yellow .normal{
border-radius: 100px;
background: #dfc795;
color: #fff;
}
.baberrage-stage {
position: absolute;
width: 100%;
height: 212px;
overflow: hidden;
top: 0;
margin-top: 130px;
}
}
}
</style>
关于如何使用,在中文文档中有详细说明,这里不做重复。
本文参考链接: