vue 弹幕插件

py3study

发布于 2021-05-06 11:59:23

2K0

发布于 2021-05-06 11:59:23

文章被收录于专栏：python3python3

一、概述

弹幕是中国较受欢迎的弹幕展示方式。

先来看一下效果图

二、安装插件

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>

关于如何使用，在中文文档中有详细说明，这里不做重复。

本文参考链接：

https://www.jb51.net/article/172830.htm

本文参与?腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2021-04-30 ，如有侵权请联系 cloudcommunity@tencent.com 删除

https