有需要的小伙伴直接拿代码即可，不需要下载依赖。
评论组件如下：
创建 comment.vue 文件。
表情组件 VueEmoji.vue 在评论组件中使用。
<template>
<div class="comment">
<div class="flex_box">
<h2>评论 {{total}}</h2>
<p>文明上网理性发言</p>
</div>
<div class="comment-header">
<div class="header_children">
<i class="el-icon-user-solid img_width"></i>
<el-input
:placeholder="placeholderText"
v-model="context"
class="input"
type="textarea"
resize="none"
size="mini"
clearable
:maxlength="contentLength"
@focus="isShowSecReply(undefined)"
></el-input>
</div>
<div class="header_btn">
<!-- 表情 -->
<vue-emoji @chooseEmoji="chooseEmoji"></vue-emoji>
<el-button
type="primary"
style="height: 40px"
@click="addComment()"审核
>{{ buttonText }}</el-button>
</div>
</div>
<div v-loading="bigLoading">
<div class="comment-body" v-for="(item, index) in comments" :key="item.id + '' + index">
<!-- 一级评论 -->
<div class="first-comment">
<i class="el-icon-user-solid img_width"></i>
<div class="content">
<!-- 一级评论用户昵称 -->
<div style="display: flex;align-items: center;">
<h3>{{ item.memberName }}</h3>
<span v-if="item.auditStatus == '0'" style="color: #ddab16;margin-left: 10px">(待审核)</span>
</div>
<!-- 一级评论发布时间 -->
<span>{{ item.createTime }}</span>
<!-- 一级评论评论内容 -->
<p>{{ item.commentContent }}</p>
<!-- 一级评论评论点赞 -->
<div class="comment-right">
<i
class="el-icon-chat-dot-round"
@click="isShowSecReply(item)"
>回复</i>
<i
v-if="userInfor.memberName == item.memberName"
class="el-icon-delete"
@click="deleteComment(item, undefined)"
>删除</i>
</div>
<!-- 回复一级评论 -->
<div class="reply-comment" v-show="isShowSec === item.id">
<el-input
:placeholder="placeholderText"
class="input"
v-model.trim="replyContext"
:maxlength="contentLength"
clearable
></el-input>
<div class="flex_one_box">
<!-- 表情 -->
<vue-emoji @chooseEmoji="chooseEmoji" :layer="comments"></vue-emoji>
<el-button
type="primary"
size="mini"
class="reply-button"
@click="addComment(item)"
>回复</el-button>
</div>
</div>
<!-- 次级查看更多 -->
<div class="li_top" v-if="item.commentReplyInfoList?.length > 0" @click="hanlePublicTotal(item)">
<span style="color: rgb(21 66 231);">共{{item.commentReplyCount}}条评论</span>
<i class="el-icon-caret-bottom" v-show="item.publicTotal"></i>
<i class="el-icon-caret-top" v-show="!item.publicTotal"></i>
</div>
<!-- 次级评论 -->
<ul v-infinite-scroll="load(item.commentReplyInfoList)" infinite-scroll-delay="200" style="overflow:auto" class="infinite_list" v-if="item.publicTotal">
<li v-for="(reply, index) in item.commentReplyInfoList" :key="reply.id + '' + index">
<!-- 次级评论头像,该用户没有头像则显示默认头像 -->
<template>
<div class="second-comment">
<i class="el-icon-user-solid img_width"></i>
<div class="content">
<!-- 次级评论用户昵称 -->
<div style="display: flex;align-items: center;">
<h3>{{ reply.memberName }}</h3>
<span v-if="reply.auditStatus == '0'" style="color: #ddab16;margin-left: 10px">(待审核)</span>
</div>
<!-- 次级评论评论时间 -->
<span>{{ reply.createTime }}</span>
<span class="to_reply">{{ reply.memberName }}</span>
回复
<span class="to_reply">{{ reply.replyMemberName }}</span>:
<p>{{ reply.commentContent }}</p>
<!-- 次级评论评论点赞 -->
<div class="comment-right">
<i
class="el-icon-chat-dot-round"
@click="isShowSecReply(reply)"
>回复</i>
<i
v-if="userInfor.memberName == reply.memberName"
class="el-icon-delete"
@click="deleteComment(item, reply)"
>删除</i>
</div>
<div class="reply-comment" v-show="isShowSec === reply.id">
<el-input
:placeholder="placeholderText"
class="input"
v-model.trim="replyContext"
:maxlength="contentLength"
clearable
></el-input>
<div class="flex_one_box">
<!-- 表情 -->
<vue-emoji @chooseEmoji="chooseEmoji" :layer="item.commentReplyInfoList"></vue-emoji>
<el-button
type="primary"
size="mini"
class="reply-button"
@click="addComment(item,reply)"
>回复</el-button>
</div>
</div>
</div>
</div>
</template>
</li>
<el-button class="loading_p" type="primary" size="mini" v-if="item.moreValue" :loading="childrenMorelist.loading" @click="changeChildrenMore(item)">加载更多</el-button>
</ul>
</div>
</div>
</div>
</div>
<!-- 一级查看更多 -->
<el-button type="info" class="moreBtn" :loading="morelist.loading" @click="changeMore" v-if="morelist.value">
查看更多评论
<i class="el-icon-caret-bottom"></i>
</el-button>
<!-- <div v-else class="more_div">暂无更多评论</div> -->
<!-- 暂无评论的空状态 -->
<el-empty :description="emptyText" v-if="comments.length === 0"></el-empty>
</div>
</template><script>
export default {
props: {
sourceType: {
type: String,
require: true
},
articleId: {
//评论所属文章 id
type: String
},
emptyText: {
// 评论为空的时候显示的文字
type: String,
default: "期待你的评论！"
},
buttonText: {
// 按钮文字
type: String,
default: "评论"
},
contentLength: {
// 评论长度
type: Number,
default: 150
},
placeholderText: {
// 默认显示文字
type: String,
default: "请输入最多150字的评论..."
}
},
data() {
return {
bigLoading: false,
userInfor: {},
params: {
pageNum: "1",
pageSize: "5",
orderByColumn: "createTime",
isAsc: "asc",
sourceType: this.sourceType,
mainId: "",
},
pantPageNum: "1", // 父级查看更多
total: 0,
comments: [
{
auditStatus: "1", // 审核状态
auditTime: "2024-05-27", // 审核时间
auditUserId: null,
commentContent: "999", // 内容
commentReplyCount: 1, // 二级回复条数
commentReplyInfoList: [], // 二级回复数组
createBy: "admin", //
createTime: "2024-05-27 01:39:18",
id: 242,
ids: null,
mainId: 0,
memberId: 1, // 哪条详情下评论的详情id
memberName: "admin", // 用户名
operationUserName: "自动通过",
parentId: 0, // 父级id
remark: null,
replyMemberName: null, // 回复的用户名
sourceId: "20",
sourceType: "1", // 类型
title: null,
updateBy: "系统"
}
], // 获取得到的评论
context: "", // 评论内容
replyContext: "", //一级评论回复
isShowSec: "", //是否显示次级回复框
isClickId: "", //记录点击回复的评论id
morelist: {
index: '2',
value: false,
loading: false,
},
childrenMorelist: {
index: '2',
childrenId: "",
childrenPageNum: "1", // 子级查看更多
childrenTotal: 0,
value: false,
loading: false,
},
};
},
mounted() {
this.userInfor = localStorage.getItem("userInfor") ? JSON.parse(localStorage.getItem("userInfor")) : {};
// 获取评论数据
this.getCommentList();
},
computed: {
isLogin() {
return this.$store.getters.isLogin;
},
},
methods: {
chooseEmoji(layer,val) {
if(layer) {
this.replyContext += val;
return;
}
this.context += val;
},
// 查看更多评论
async changeMore() {
this.morelist.loading = true;
this.pantPageNum++;
this.params.pageNum = this.pantPageNum;
console.log("this.params.pageNum",this.params.pageNum);
let res = await this.getNewList();
res.rows.map(item => {
this.$set(item,'publicTotal',false)
})
this.comments.push(...res.rows);
this.morelist.loading = false;
this.total = res.total;
if(res.total > this.params.pageNum * this.params.pageSize) {
this.morelist.value = true;
}else {
this.morelist.value = false;
}
},
// 加载更多
async changeChildrenMore(item) {
if(this.childrenMorelist.childrenId && this.childrenMorelist.childrenId != item.id) {
this.childrenMorelist.childrenPageNum = "1";
}
this.childrenMorelist.childrenId = item.id;
this.childrenMorelist.loading = true;
this.childrenMorelist.childrenPageNum++;
this.params.pageNum = this.childrenMorelist.childrenPageNum;
this.params.mainId = item.id;
let res = await this.getNewList();
this.childrenMorelist.childrenTotal = res.total;
console.log("res",res);
item.commentReplyInfoList.push(...res.rows);
this.childrenMorelist.loading = false;
if(res.total > this.params.pageNum * this.params.pageSize) {
item.moreValue = true;
}else {
item.moreValue = false;
}
},
load(list) {
list += 2
},
// 唤起文件选择
handleClick() {
this.$refs.avatar.click();
},
// 获取本篇文章所有评论
async getCommentList() {
try {
this.comments = [];
this.bigLoading = true;
// 获取某篇文章下的所有评论
const res = await this.$get(`/api/comment/list?pageNum=${this.params.pageNum}&pageSize=${this.params.pageSize}&orderByColumn=${this.params.orderByColumn} desc,auditStatus&isAsc=${this.params.isAsc}&sourceType=${this.params.sourceType}&mainId=${this.params.mainId}&sourceId=${this.$route.query.id}`)
this.bigLoading = false;
this.comments = res.rows; //评论列表
this.total = res.total; //评论总数
if(this.total > this.params.pageSize) {
this.morelist.value = true;
}else {
this.morelist.value = false;
}
this.comments.map(item => {
if(item.commentReplyCount > 5) {
item.moreValue = true;
}else {
item.moreValue = false;
}
this.$set(item,'publicTotal',false)
})
} catch (err) {
this.bigLoading = false;
this.$message.error(err);
}
},
async getNewList() {
let res = await this.$get(`/api/comment/list?pageNum=${this.params.pageNum}&pageSize=${this.params.pageSize}&orderByColumn=${this.params.orderByColumn} desc,auditStatus&isAsc=${this.params.isAsc}&sourceType=${this.params.sourceType}&mainId=${this.params.mainId}&sourceId=${this.$route.query.id}`);
console.log("res1111",res);
return res;
},
// 控制二级条数显示盒子
hanlePublicTotal(item) {
item.publicTotal = !item.publicTotal;
console.log("item",item);
},
isShowSecReply(item) {
console.log("一级input获取焦点",item);
let id = item?.id;
if (id) {
this.isShowSec = id;
if (this.isClickId === this.isShowSec) {
this.isShowSec = "";
} else {
this.isShowSec = id;
}
this.isClickId = this.isShowSec;
} else {
this.isShowSec = this.isClickId = "";
}
},
// 删除
deleteComment(item, reply) {
if(!this.isLogin) {
this.$message.warning("请先登录！");
return;
}
let _id = item.id;
let replyId = reply?.id;
if (replyId) {
// 删除二级评论，提交请求到后端
this.$confirm('确认删除此评论?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.$put(`/api/comment/${replyId}`).then(async (res) => {
if (res.code === 200) {
this.params.pageNum = '1';
let data = await this.getNewList();
console.log("data",data);
item.commentReplyCount = data.total;
item.commentReplyInfoList.splice(0);
item.commentReplyInfoList.push(...data.rows);
//
this.$message({
message: "删除成功",
type: "success",
});
}
});
}).catch(() => {
this.$message({
type: 'info',
message: '已取消删除'
});
})
} else {
// 删除一级评论，提交请求到后端
this.$confirm('确认删除此评论?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.$put(`/api/comment/${_id}`).then((res) => {
if (res.code === 200) {
this.$message({
message: "删除成功",
type: "success",
});
this.params.pageNum = '1';
this.getCommentList();
}
});
this.total--;
if(this.total == this.params.pageSize) {
this.morelist.value = false;
}
}).catch(() => {
this.$message({
type: 'info',
message: '已取消删除'
});
})
}
},
// 评论添加成功，返回的数据
async addComment(item,reply) {
console.log(">>>>item",item );
if(!this.isLogin) {
this.$message.warning("请先登录！");
return;
}
//本地更新评论列表
if (item) {
// 添加二级评论
if (!this.replyContext) {
this.$message.warning("评论或留言不能为空哦！");
return;
}
this.addSecond(item,reply);
} else {
// 添加一级评论，提交数据到后端
if (!this.context) {
this.$message.warning("评论或留言不能为空哦！");
return;
}
this.addFirst();
}
this.isShowSec = this.isClickId = "";
},
addSecond(item,reply) {
// 模拟数据提交成功后返回数据
let data = {
mainId: item.id,
parentId: item.id,
sourceType: item.sourceType,
sourceId: this.$route.query.id,
commentContent: this.replyContext //评论内容
};
if(reply) {
data.parentId = reply.id;
}
this.$post("/api/comment",data).then(async(res) => {
if(res.code == 200) {
this.params.mainId = item.id;
let res = await this.getNewList();
if(!item.commentReplyInfoList) {
item.commentReplyInfoList = [];
}
item.commentReplyInfoList.splice(0);
item.commentReplyInfoList.push(...res.rows);
item.commentReplyCount = res.total;
if(res.total > 5) {
item.moreValue = true;
}
this.replyContext = "";
console.log("comments",this.comments);
}
})
},
addFirst() {
// 模拟数据提交成功后返回数据
let data = {
mainId: '',
parentId: '',
sourceType: this.sourceType,
sourceId: this.$route.query.id,
commentContent: this.context //评论内容
};
this.$post("/api/comment",data).then(async(res) => {
if(res.code == 200) {
this.params.mainId = '';
let res = await this.getNewList();
res.rows.map(item => {
this.$set(item,'publicTotal',false)
})
this.comments = res.rows;
this.context = "";
this.total = res.total;
if(res.total > 5) {
this.morelist.value = true;
}
}
})
},
}
};
</script><style lang="scss" scoped>
.comment {
min-height: 26vh;
border-radius: 5px;
margin-top: 2px;
overflow: hidden;
h3 {
margin: 5px 0;
}
p {
margin: 3px 0;
}
ul {
list-style-type: none;
}
.img_width {
max-width: 50px;
max-height: 50px;
border-radius: 50px;
font-size: 30px;
color: #3339;
}
.flex_box {
padding: 0 5px;
display: flex;
align-items: center;
margin-bottom: 30px;
h2 {
margin: 0;
}
p {
font-size: 16px;
color: #666;
margin: 0 0 0 20px;
}
}
.active {
color: rgb(202, 4, 4);
}
.comment-header {
position: relative;
// height: 50px;
padding: 10px 5px;
// display: flex;
// align-items: center;
.header_children {
display: flex;
align-items: center;
}
.header_btn {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 20px 0 60px;
margin-top: 10px;
}
.input {
margin-left: 10px;
margin-right: 20px;
flex: 1;
font-size: 14px;
::v-deep .el-input__inner:focus {
border-color: #dcdfe6;
}
}
}
.comment-body {
font-size: 14px;
.first-comment {
display: flex;
padding: 10px 20px;
.input {
::v-deep.el-input__inner:focus {
border-color: #dcdfe6;
}
}
i {
margin-right: 5px;
margin-left: 1vw;
cursor: pointer;
// &:nth-child(3) {
// color: rgb(202, 4, 4);
// }
}
.content {
margin-left: 10px;
position: relative;
flex: 1;
& > span {
font-size: 12px;
color: rgb(130, 129, 129);
}
.comment-right {
position: absolute;
right: 0;
top: 0;
}
.reply-comment {
// height: 60px;
// display: flex;
// align-items: center;
.flex_one_box {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 10px;
}
.reply-button {
margin-left: 20px;
height: 35px;
}
}
.li_top {
width: 200px;
cursor: pointer;
padding-left: 50px;
}
.infinite_list {
max-height: 333px;
}
.second-comment {
display: flex;
padding: 10px 0 10px 5px;
border-radius: 20px;
background: #ffffff;
.to_reply {
// color: rgb(126, 127, 128);
color: #0d74e1;
}
}
.loading_p {
cursor: pointer;
margin: 3px auto;
display: flex;
justify-content: center;
}
}
}
}
.moreBtn {
width: 100%;
i {
font-size: 16px;
}
}
.more_div {
display: flex;
display: flex;
justify-content: center;
color: #66666694;
font-size: 14px;
}
::-webkit-scrollbar
{
width: 8px;
height: 5px;
background-color: #F5F5F5;
}
/*定义滚动条轨道 内阴影+圆角*/
::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px #c0c0c0;
border-radius: 10px;
background-color: #f9f9f9;
}
/*定义滑块 内阴影+圆角*/
::-webkit-scrollbar-thumb
{
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px #c0c0c0;
background-color: #c0c0c0;
}
}
</style>表情组件如下：
1. 创建 VueEmoji.vue 文件。
<template>
<div class="emoji">
<ul class="emoji-default" v-show="isShowEmoji">
<li v-for="(item, index) in emojiJson" :key="index"
@click.stop="chooseEmojiDefault(item)">
{{item}}
</li>
</ul>
<div class="emoji-tabs">
<div :class="!isShowEmoji ? 'emoji-tab' : 'new_tab'" @click="isShowEmoji = !isShowEmoji">
{{ isShowEmoji ? '收起' : emojiJson[4]}}
</div>
</div>
</div>
</template>
<script>
const emojiJson = require("../utils/emoji.json");
export default {
props: {
keyId: {
type: String,
required: false
},
layer: {
type: Array || Object,
required: false
}
},
data() {
return {
emojiJson: emojiJson.data.split(','),
isShowEmoji: false,
}
},
methods: {
chooseEmojiDefault(item) {
console.log("item",item);
this.$emit("chooseEmoji",this.keyId,this.layer,item);
this.isShowEmoji = false;
}
}
}
</script>
<style lang="scss" scoped>
// 纵向滚动条
@mixin scroll-bar($width: 10px) {
&::-webkit-scrollbar-track {
border-radius: 10px;
background-color: #ffffff;
}
&::-webkit-scrollbar {
width: $width;
height: 10px;
background-color: #ffffff;
}
&::-webkit-scrollbar-thumb {
border-radius: 10px;
background-color: rgba(0, 0, 0, 0.2);
}
}
.emoji {
text-align: left;
// width: 100%;
// height: 100%;
background: #fff;
// border: 1px solid #dcdfe6;
box-shadow: 0 2px 4px 0 rgb(0 0 0 / 12%), 0 0 6px 0 rgb(0 0 0 / 4%);
.emoji-tabs {
// border-top: 1px solid #DCDFE6;
background: #f8f8f8;
.emoji-tab {
cursor: pointer;
background: #ffffff;
/* height: 100%; */
/* padding: 5px 5px; */
/* overflow: hidden; */
text-align: center;
/* line-height: 15px; */
font-size: 25px
}
.new_tab {
cursor: pointer;
font-size: 14px;
color: #1c33e5;
text-align: center;
padding: 5px 0;
}
}
.emoji-default {
width: calc(100% - 40px);
height: 202px;
overflow-y: auto;
@include scroll-bar();
padding: 0px 20px;
li {
display: inline-block;
padding: 5px;
font-size: 24px;
width: 29px;
height: 29px;
overflow: hidden;
cursor: pointer;
}
li:hover {
background-color: #d5d5d5;
}
}
}
</style>
2. 在写公共方法的地方创建 emoji.json 文件，里面是表情的数据，内容如下：
{
"data": "😀,😁,😂,😃,😄,😅,😆,😉,😊,😋,😎,😍,😘,😗,😙,😚,😇,😐,😑,😶,😏,😣,😥,😮,😯,😪,😫,😴,😌,😛,😜,😝,😒,😓,😔,😕,😲,😷,😖,😞,😟,😤,😢,😭,😦,😧,😨,😬,😰,😱,😳,😵,😡,😠,💘,❤,💓,💔,💕,💖,💗,💙,💚,💛,💜,💝,💞,💟,❣,💪,👈,👉,☝,👆,👇,✌,✋,👌,👍,👎,✊,👊,👋,👏,👐,✍,🍇,🍈,🍉,🍊,🍋,🍌,🍍,🍎,🍏,🍐,🍑,🍒,🍓,🍅,🍆,🌽,🍄,🌰,🍞,🍖,🍗,🍔,🍟,🍕,🍳,🍲,🍱,🍘,🍙,🍚,🍛,🍜,🍝,🍠,🍢,🍣,🍤,🍥,🍡,🍦,🍧,🍨,🍩,🍪,🎂,🍰,🍫,🍬,🍭,🍮,🍯,🍼,☕,🍵,🍶,🍷,🍸,🍹,🍺,🍻,🍴,🌹,🍀,🍎,💰,📱,🌙,🍁,🍂,🍃,🌷,💎,🔪,🔫,🏀,⚽,⚡,👄,👍,🔥,🙈,🙉,🙊,🐵,🐒,🐶,🐕,🐩,🐺,🐱,😺,😸,😹,😻,😼,😽,🙀,😿,😾,🐈,🐯,🐅,🐆,🐴,🐎,🐮,🐂,🐃,🐄,🐷,🐖,🐗,🐽,🐏,🐑,🐐,🐪,🐫,🐘,🐭,🐁,🐀,🐹,🐰,🐇,🐻,🐨,🐼,🐾,🐔,🐓,🐣,🐤,🐥,🐦,🐧,🐸,🐊,🐢,🐍,🐲,🐉,🐳,🐋,🐬,🐟,🐠,🐡,🐙,🐚,🐌,🐛,🐜,🐝,🐞,🦋,😈,👿,👹,👺,💀,☠,👻,👽,👾,💣"
}在 Vue 文件中使用，如下：
<template>
<div>
<comment :buttonText="'发表评论'"/>
</div>
</template>效果如下：
