vue-baberrage vue組件使用
vue-baberragevue組件使用<template><div class="barrages><vue-baberrage:isShow="barrageIsShow":barrageList="barrageList":maxWordCount="maxWordCount":throttleGap="throttleGap":loop="barrageLoo
·
vue-baberrage
vue組件使用
<template>
<div class="barrages>
<vue-baberrage
:isShow="barrageIsShow"
:barrageList="barrageList"
:maxWordCount="maxWordCount"
:throttleGap="throttleGap"
:loop="barrageLoop"
:boxHeight="boxHeight"
:messageHeight="messageHeight"
:lanesCount="lanesCount"
>
</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: 30,
boxHeight: 412,
barrageLoop: true,
maxWordCount: 120,
throttleGap: 5000,
barrageList: [],
lanesCount: 4,
};
},
computed: {
// posRender(){
// return 3
// }
},
mounted() {
this.addToList();
},
methods: {
addToList() {
let list = [
{
id: 1,
avatar:
"https://www.google.com/search?q=%E5%9B%BE%E7%89%87&tbm=isch&source=iu&ictx=1&fir=2tLMTBYQMTAwvM%252C52L9RPt5gLBg7M%252C_&vet=1&usg=AI4_-kSRdi-c9NVz2JgdG-Hhq6c0eYOSNg&sa=X&ved=2ahUKEwjrhrz1097tAhXDgtgFHY_RBkEQ9QF6BAgGEAE#imgrc=2tLMTBYQMTAwvM",
msg: this.msg,
time: Math.random() * 9 + 3,
barrageStyle: "red",
},
{
id: 2,
avatar:
"https://www.google.com/search?q=%E5%9B%BE%E7%89%87&tbm=isch&source=iu&ictx=1&fir=2tLMTBYQMTAwvM%252C52L9RPt5gLBg7M%252C_&vet=1&usg=AI4_-kSRdi-c9NVz2JgdG-Hhq6c0eYOSNg&sa=X&ved=2ahUKEwjrhrz1097tAhXDgtgFHY_RBkEQ9QF6BAgGEAE#imgrc=2tLMTBYQMTAwvM",
msg: this.msg,
time: Math.random() * 9 + 5,
barrageStyle: "green",
},
{
id: 3,
avatar:
"https://www.google.com/search?q=%E5%9B%BE%E7%89%87&tbm=isch&source=iu&ictx=1&fir=2tLMTBYQMTAwvM%252C52L9RPt5gLBg7M%252C_&vet=1&usg=AI4_-kSRdi-c9NVz2JgdG-Hhq6c0eYOSNg&sa=X&ved=2ahUKEwjrhrz1097tAhXDgtgFHY_RBkEQ9QF6BAgGEAE#imgrc=2tLMTBYQMTAwvM",
msg: this.msg,
time: Math.random() * 9 + 3,
barrageStyle: "normal",
},
{
id: 4,
avatar:
"https://www.google.com/search?q=%E5%9B%BE%E7%89%87&tbm=isch&source=iu&ictx=1&fir=2tLMTBYQMTAwvM%252C52L9RPt5gLBg7M%252C_&vet=1&usg=AI4_-kSRdi-c9NVz2JgdG-Hhq6c0eYOSNg&sa=X&ved=2ahUKEwjrhrz1097tAhXDgtgFHY_RBkEQ9QF6BAgGEAE#imgrc=2tLMTBYQMTAwvM",
msg: this.msg,
time: Math.random() * 9 + 5,
barrageStyle: "blue",
},
{
id: 5,
avatar:
"https://www.google.com/search?q=%E5%9B%BE%E7%89%87&tbm=isch&source=iu&ictx=1&fir=2tLMTBYQMTAwvM%252C52L9RPt5gLBg7M%252C_&vet=1&usg=AI4_-kSRdi-c9NVz2JgdG-Hhq6c0eYOSNg&sa=X&ved=2ahUKEwjrhrz1097tAhXDgtgFHY_RBkEQ9QF6BAgGEAE#imgrc=2tLMTBYQMTAwvM",
msg: this.msg,
time: Math.random() * 9 + 3,
barrageStyle: "red",
},
{
id: 6,
avatar:
"https://www.google.com/search?q=%E5%9B%BE%E7%89%87&tbm=isch&source=iu&ictx=1&fir=2tLMTBYQMTAwvM%252C52L9RPt5gLBg7M%252C_&vet=1&usg=AI4_-kSRdi-c9NVz2JgdG-Hhq6c0eYOSNg&sa=X&ved=2ahUKEwjrhrz1097tAhXDgtgFHY_RBkEQ9QF6BAgGEAE#imgrc=2tLMTBYQMTAwvM",
msg: this.msg,
time: Math.random() * 9 + 5,
barrageStyle: "normal",
},
{
id: 7,
avatar:
"https://www.google.com/search?q=%E5%9B%BE%E7%89%87&tbm=isch&source=iu&ictx=1&fir=2tLMTBYQMTAwvM%252C52L9RPt5gLBg7M%252C_&vet=1&usg=AI4_-kSRdi-c9NVz2JgdG-Hhq6c0eYOSNg&sa=X&ved=2ahUKEwjrhrz1097tAhXDgtgFHY_RBkEQ9QF6BAgGEAE#imgrc=2tLMTBYQMTAwvM",
msg: this.msg,
time: Math.random() * 9 + 5,
barrageStyle: "red",
},
{
id: 8,
avatar:
"https://www.google.com/search?q=%E5%9B%BE%E7%89%87&tbm=isch&source=iu&ictx=1&fir=2tLMTBYQMTAwvM%252C52L9RPt5gLBg7M%252C_&vet=1&usg=AI4_-kSRdi-c9NVz2JgdG-Hhq6c0eYOSNg&sa=X&ved=2ahUKEwjrhrz1097tAhXDgtgFHY_RBkEQ9QF6BAgGEAE#imgrc=2tLMTBYQMTAwvM",
msg: this.msg,
time: Math.random() * 9 + 5,
barrageStyle: "normal",
},
{
id: 9,
avatar:
"https://www.google.com/search?q=%E5%9B%BE%E7%89%87&tbm=isch&source=iu&ictx=1&fir=2tLMTBYQMTAwvM%252C52L9RPt5gLBg7M%252C_&vet=1&usg=AI4_-kSRdi-c9NVz2JgdG-Hhq6c0eYOSNg&sa=X&ved=2ahUKEwjrhrz1097tAhXDgtgFHY_RBkEQ9QF6BAgGEAE#imgrc=2tLMTBYQMTAwvM",
msg: this.msg,
time: Math.random() * 9 + 5,
barrageStyle: "red",
},
{
id: 10,
avatar:
"https://www.google.com/search?q=%E5%9B%BE%E7%89%87&tbm=isch&source=iu&ictx=1&fir=2tLMTBYQMTAwvM%252C52L9RPt5gLBg7M%252C_&vet=1&usg=AI4_-kSRdi-c9NVz2JgdG-Hhq6c0eYOSNg&sa=X&ved=2ahUKEwjrhrz1097tAhXDgtgFHY_RBkEQ9QF6BAgGEAE#imgrc=2tLMTBYQMTAwvM",
msg: this.msg,
time: Math.random() * 9 + 5,
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="scss">
.barrages-drop {
.blue {
border-radius: 50px;
background: #e6ff75;
color: #fff;
}
.green {
border-radius: 50px;
background: #75ffcd;
color: #fff;
}
.red {
border-radius: 50px;
background: #e68fba;
color: #fff;
}
.yellow {
border-radius: 50px;
background: #dfc795;
color: #fff;
}
.baberrage-stage {
position: absolute;
width: 100%;
height: 512px;
overflow: hidden;
top: 0;
margin-top: 130px;
background: pink;
font-size: 15px;
}
}
</style>
屬性⭐
lanesCount
- Default: 0
- Acceptable-Values: Number
- Function: 泳道的数量。
更多推荐
已为社区贡献1条内容
所有评论(0)