Vue中使用baberrage实现弹幕效果
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了Vue中使用baberrage实现弹幕效果，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含5105字，纯文字阅读大概需要8分钟。
内容图文
在Vue中使用baberrage插件实现弹幕效果
什么是baberrage?
链接:https://github.com/superhos/vue-baberrage/blob/master/docs/zh/README.md
是一位大佬制作的插件,实现弹幕的效果
效果
这里用作留言界面
1. 创建所需要的数据库
DROP TABLE IF EXISTS `tb_message`;
CREATE TABLE `tb_message` (
`id` int(11) NOT NULL AUTO_INCREMENT COMMENT '主键id',
`nickname` varchar(20) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NOT NULL COMMENT '昵称',
`avatar` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NOT NULL COMMENT '头像',
`message_content` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NOT NULL COMMENT '留言内容',
`time` tinyint(1) NULL DEFAULT NULL COMMENT '弹幕速度',
`create_time` datetime(0) NOT NULL COMMENT '发布时间',
PRIMARY KEY (`id`) USING BTREE
) ENGINE = InnoDB AUTO_INCREMENT = 3432 CHARACTER SET = utf8mb4 COLLATE = utf8mb4_0900_ai_ci ROW_FORMAT = Dynamic;
2. 在Vue中加入baberrage
-
npm install vue-baberrage全局引入
-
import { vueBaberrage } from 'vue-baberrage' Vue.use(vueBaberrage)
3. 创建留言页面
Message.vue
<template>
<div>
<Nav></Nav>
<!-- banner -->
<div class="message-banner">
<!-- 弹幕输入框 -->
<div class="message-container">
<h1 class="message-title">留言板</h1>
<div class="animate__animated animate__fadeInUp message-input-wrapper">
<input v-if="userVo == null"
style="color: #1b1c1d; width: 20%"
v-model="messageNickname"
@click="show = true"
@keyup.enter="addToList"
placeholder="昵称"
/>
<input
style="color: #1b1c1d;"
v-model="messageContent"
@click="show = true"
@keyup.enter="addToList"
placeholder="说点什么吧"
/>
<el-button
round
type="info"
class="ml-3 animate__animated animate__backInRight"
@click="addToList"
v-show="show"
>
发送
</el-button>
</div>
</div>
<!-- 弹幕列表 -->
<div class="barrage-container">
<vue-baberrage :barrageList="barrageList">
<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>
import Nav from "../../components/index/Nav";
export default {
name:"Message",
components:{Nav},
mounted() {
this.listMessage();
},
data() {
return {
show: false,
messageNickname: "",
messageContent: "",
barrageList: [],
avatar: '',
userVo: null
}
},
methods: {
addToList() {
const _this = this;
if (this.messageNickname.trim() == ""){
this.$message.error("昵称不能为空")
return false;
}
if (this.messageContent.trim() == ""){
this.$message.error("留言不能为空")
return false;
}
//如果本地有用户数据则使用本地用户头像
//否则随机赋予头像(本地存放了30个头像)
if (this.userVo != null){
this.avatar = this.userVo.avatar
}else {
this.avatar = "/images/commentAvatar/" + "avatar" +Math.floor((Math.random() * 30) + 1) + ".png"
}
var message = {
avatar: this.avatar,
nickname: this.messageNickname,
messageContent: this.messageContent,
time: Math.floor(Math.random() * (10 - 7)) + 7,
userVo: this.userVo
};
this.barrageList.push(message);
this.messageContent = "";
this.$axios.post('http://localhost:8181/tbMessage',message)
},
listMessage() {
this.$axios.get("http://localhost:8181/tbMessage").then(res => {
this.barrageList = res.data.data;
});
}
},
created() {
this.userVo = JSON.parse(localStorage.getItem("userInfo"))
//将localStorage中的用户名取出
this.messageNickname = this.userVo.username;
}
};
</script>
<style scoped>
.message-banner {
position: absolute;
left: 0;
right: 0;
height: 100vh;
background-image: url("../../../public/images/message.jpg");
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;
}
.ml-3{
margin-left: 12px!important;
}
.ml-2{
margin-left: 8px!important;
}
</style>
4. 后台接收数据
(后台前面就是基本的查询和添加就不列举了)
MessageController
/**
* 留言板留言
*/
@RestController
public class TbMessageController {
@Autowired
private TbMessageService tbMessageService;
@GetMapping("/tbMessage")
public Result getAll(){
List<TbMessage> allTbMessage = tbMessageService.getAllTbMessage();
return Result.success(allTbMessage);
}
@PostMapping("/tbMessage")
public Result saveAll(@RequestBody TbMessage tbMessage){
// System.err.println("tbMessage=>" + tbMessage);
int i = tbMessageService.saveTbMessage(tbMessage);
if (i == 0){
return Result.fail("发布失败");
}else{
return Result.success("发布成功");
}
}
}
内容总结
以上是互联网集市为您收集整理的Vue中使用baberrage实现弹幕效果全部内容，希望文章能够帮你解决Vue中使用baberrage实现弹幕效果所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。
来源：【匿名】