有需要的小伙伴直接拿代碼即可，不需要下載依賴，目前是初始版本，后期會進行代碼的優化。

評論組件如下：

創建?comment.vue 文件。

表情組件?VueEmoji.vue 在評論組件中使用。

<template><div class="comment"><div class="flex_box"><h2>評論 3508</h2><p>文明上網理性發言</p></div><div class="comment-header"><div class="header_children"><el-tooltip class="item" effect="dark" content="點我更換頭像" placement="top-start"><div @click="handleClick"><input type="file" style="display: none" @change="dealWithdAvatar" ref="avatar" /><el-avatar:src="avatarUrl? avatarUrl: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png'":size="40"></el-avatar></div></el-tooltip><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" :keyId="'context'"></vue-emoji><el-buttontype="primary"style="height: 40px"@click="addComment(articleId, undefined)">{{ buttonText }}</el-button></div></div><div class="comment-body" v-for="(item, index) in comments" :key="item._id + '' + index"><!-- 一級評論 --><div class="first-comment" v-if="index < morelist.index"><el-avatar :size="40" :src="item.avatarUrl"></el-avatar><div class="content"><!-- 一級評論用戶昵稱 --><h3>{{ item.username }}</h3><!-- 一級評論發布時間 --><span>{{ item.date }}</span><!-- 一級評論評論內容 --><p>{{ item.content }}</p><!-- 一級評論評論點贊 --><div class="comment-right"><!-- <iclass="el-icon-trophy"@click="giveALike(item, item._id)":class="item.favour.includes(userId) ? 'active' : ''"></i>{{ item.favour.length || 0 }} --><iclass="el-icon-chat-dot-round"@click="isShowSecReply(item._id)">回復</i><iclass="el-icon-delete"@click="deleteComment(item._id, undefined)"v-if="userId === item.userId">刪除</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" :keyId="item._id" :layer="comments"></vue-emoji><el-buttontype="primary"size="mini"class="reply-button"@click="addComment(item._id, item.username)">回復</el-button></div></div><!-- 次級查看更多 --><div class="li_top" @click="changeChildrenMore" v-if="item.replyInfo?.length > childrenMorelist.clickIndex"><span style="color: rgb(21 66 231);">共100條評論</span><i class="el-icon-caret-bottom" v-show="!childrenMorelist.value"></i> <i class="el-icon-caret-top" v-show="childrenMorelist.value"></i></div><!-- 次級評論 --><ul v-infinite-scroll="load(item.replyInfo)" infinite-scroll-delay="200" style="overflow:auto" class="infinite_list"> <!-- === --><li class="second-comment" v-for="(reply, index) in item.replyInfo" :key="reply._id + '' + index"><!-- 次級評論頭像,該用戶沒有頭像則顯示默認頭像 --><template v-if="index < childrenMorelist.index"><el-avatar :size="40" :src="reply.avatarUrl"></el-avatar><div class="content"><!-- 次級評論用戶昵稱 --><h3>{{ reply.username }}</h3><!-- 次級評論評論時間 --><span>{{ reply.date }}</span><span class="to_reply">{{ reply.username }}</span>回復<span class="to_reply">{{ reply.replyName }}</span>:<p>{{ reply.content }}</p><!-- 次級評論評論點贊 --><div class="comment-right"><!-- <iclass="el-icon-trophy"@click="giveALike(reply, item._id)":class="reply.favour.includes(userId) ? 'active' : ''"></i>{{ reply.favour ? reply.favour.length : 0 }} --><iclass="el-icon-chat-dot-round"@click="isShowSecReply(reply._id)">回復</i><iclass="el-icon-delete"@click="deleteComment(item._id, reply._id)"v-if="userId === reply.userId">刪除</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" :keyId="reply._id" :layer="item.replyInfo"></vue-emoji><el-buttontype="primary"size="mini"class="reply-button"@click="addComment(item._id, reply.username)">回復</el-button></div></div></div></template></li></ul></div></div></div><!-- 一級查看更多 --><el-button type="info" class="moreBtn" @click="changeMore" v-show="comments?.length > morelist.clickIndex">查看更多評論<i class="el-icon-caret-bottom" v-show="!morelist.value"></i> <i class="el-icon-caret-top" v-show="morelist.value"></i></el-button><!-- 暫無評論的空狀態 --><el-empty :description="emptyText" v-show="comments.length === 0"></el-empty></div>
</template>
<script>
export default {props: {articleId: {//評論所屬文章 idtype: String},emptyText: {// 評論為空的時候顯示的文字type: String,default: "期待你的評論！"},buttonText: {// 按鈕文字type: String,default: "評論"},contentLength: {// 評論長度type: Number,default: 150},placeholderText: {// 默認顯示文字type: String,default: "請輸入最多150字的評論..."}},data() {return {comments: [{_id: "first0", // 評論iddate: "2022.09.01", //創建日期username: "孤城浪人", //評論人userId: "1",avatarUrl:"https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png", //頭像地址favour: ["1", "2", "3"], //點贊的用戶idcontent: "666", //評論內容replyInfo: [//回復的內容{_id: "sec0", // 當前此條回復的iddate: "2022.09.01", //創建日期replyName: "孤城浪人", //回復的對象username: "孤城浪人", //評論人userId: "1",favour: ["2", "3", "4"],avatarUrl:"https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png",content: "博主厲害了" //回復的內容}]},], // 獲取得到的評論context: "", // 評論內容replyContext: "", //一級評論回復isShowSec: "", //是否顯示次級回復框isClickId: "", //記錄點擊回復的評論iduserId: "1", // 瀏覽器指紋username: "孤城浪人", //你的用戶名firstIdx: 1,secIdx: 1,avatarUrl:"https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png",morelist: {index: '2',value: false,clickIndex: '2',},childrenMorelist: {index: '2',value: false,clickIndex: '2',},};},created() {// 獲取評論數據// this.getCommentList();},methods: {chooseEmoji(keyId,layer,val) {if(layer) {this.replyContext += val;return;}this.context += val;},changeMore() {this.morelist.value = !this.morelist.value;if(this.morelist.value) {this.morelist.index = '99999999';}else {this.morelist.index = '2';}},changeChildrenMore() {this.childrenMorelist.value = !this.childrenMorelist.value;if(this.childrenMorelist.value) {this.childrenMorelist.index = '99999999';}else {this.childrenMorelist.index = '2';}},load(list) {list += 2},// 喚起文件選擇handleClick() {this.$refs.avatar.click();},dealWithdAvatar(e) {const maxSize = 2 * 1024 * 1024;const file = Array.prototype.slice.call(e.target.files)[0];console.log(file);},// 獲取本篇文章所有評論async getCommentList() {try {this.comments = [];let id = "";if (this.articleId == "messageBoard") {id = "messageBoard";} else {id = this.articleId;}// 獲取某篇文章下的所有評論const res = await this.$api.getCommentsOfArticle({ id });this.comments = res.data.comments; //評論列表this.username = res.data.user?.username;this.avatarUrl = res.data.user?.avatarUrl;} catch (err) {this.$message.error(err);}},// 評論點贊giveALike(item, _id) {try {// 不允許同一個人重復點贊if (item.favour?.includes(this.userId)) {this.$message.info("您已經點過贊啦！");return;}//判斷是給一級評論點贊還是二級評論，只有二級評論會有replyNameif (item.replyName) {// 給二級評論點贊，向后臺提交數據} else {// 一級評論點贊，向后臺提交數據}item.favour.push(this.userId);} catch (err) {this.$message.error(err);}},isShowSecReply(id) {console.log("一級input獲取焦點");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(_id, replyId) {if (replyId) {// 刪除二級評論，提交請求到后端// 成功后從本地記錄中刪除該評論const temp = this.comments.find(item => item._id == _id).replyInfo;for (let i = 0; i < temp.length; i++) {if (temp[i]._id == replyId) {temp.splice(i, 1);break;}}} else {// 刪除一級評論，提交請求到后端// 成功后從本地記錄中刪除該評論for (let i = 0; i < this.comments.length; i++) {if (this.comments[i]._id == _id) {this.comments.splice(i, 1);}}}},async addComment(id, replyName) {let res = {};// 評論添加成功，返回的數據//本地更新評論列表if (replyName) {// 添加二級評論if (!this.replyContext) {this.$message.warning("評論或留言不能為空哦！");return;}// 模擬數據提交成功后返回數據res.data = {username: this.username,userId: this.userId,avatarUrl: this.avatarUrl,_id: "sec" + this.secIdx++, // 評論idreplyName,date: "2022.09.01", //創建日期favour: [], //點贊的用戶idcontent: this.replyContext //評論內容};const comment = this.comments.find(item => item._id == id);if (!comment.replyInfo) {comment.replyInfo = [];}comment.replyInfo.push(res.data);this.replyContext = "";} else {// 添加一級評論，提交數據到后端if (!this.context) {this.$message.warning("評論或留言不能為空哦！");return;}// 模擬數據提交成功后返回數據res.data = {username: this.username,avatarUrl: this.avatarUrl,userId: this.userId,_id: "first" + this.firstIdx++, // 評論iddate: "2022.09.01", //創建日期articleId: this.articleId, // 評論的文章idfavour: [], //點贊的用戶idcontent: this.context //評論內容};this.comments.push(res.data);this.context = "";}this.isShowSec = this.isClickId = "";console.log("this.comments",this.comments);}}
};
</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;}.flex_box {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 51px;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);}}}}}.moreBtn {width: 100%;i {font-size: 16px;}}::-webkit-scrollbar{width: 5px;height: 5px;background-color: #F5F5F5;}/*定義滾動條軌道 內陰影+圓角*/::-webkit-scrollbar-track{-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);border-radius: 10px;background-color: #F5F5F5;}/*定義滑塊 內陰影+圓角*/::-webkit-scrollbar-thumb{border-radius: 10px;-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);background-color: #555;}
}
</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>