评论组件如下#xff1a;

classcomment不需要下载依赖目前是初始版本后期会进行代码的优化。

评论组件如下

img_width/iel-input:placeholderplaceholderTextv-modelcontextclassinputtypetextarearesizenonesizeminiclearable:maxlengthcontentLengthfocusisShowSecReply(undefined)/el-input/divdiv

classheader_btn!--

chooseEmojichooseEmoji/vue-emojiel-buttontypeprimarystyleheight:

buttonText

classcomment-righticlassel-icon-chat-dot-roundclickisShowSecReply(item)回复/iiv-ifuserInfor.memberName

item.memberNameclassel-icon-deleteclickdeleteComment(item,

回复一级评论

item.idel-input:placeholderplaceholderTextclassinputv-model.trimreplyContext:maxlengthcontentLengthclearable/el-inputdiv

classflex_one_box!--

:layercomments/vue-emojiel-buttontypeprimarysizeminiclassreply-buttonclickaddComment(item)回复/el-button/div/div!--

次级查看更多

v-ifitem.commentReplyInfoList?.length

clickhanlePublicTotal(item)span

stylecolor:

231);共{{item.commentReplyCount}}条评论/spani

v-show!item.publicTotal/i/div!--

次级评论

v-infinite-scrollload(item.commentReplyInfoList)

styleoverflow:auto

classcomment-righticlassel-icon-chat-dot-roundclickisShowSecReply(reply)回复/iiv-ifuserInfor.memberName

reply.memberNameclassel-icon-deleteclickdeleteComment(item,

reply)删除/i/divdiv

reply.idel-input:placeholderplaceholderTextclassinputv-model.trimreplyContext:maxlengthcontentLengthclearable/el-inputdiv

classflex_one_box!--

:layeritem.commentReplyInfoList/vue-emojiel-buttontypeprimarysizeminiclassreply-buttonclickaddComment(item,reply)回复/el-button/div/div/div/div/template/liel-button

classloading_p

:loadingchildrenMorelist.loading

clickchangeChildrenMore(item)加载更多/el-button/ul/div/div/div/div!--

一级查看更多

1,avatarUrl:https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png,morelist:

{index:

localStorage.getItem(userInfor)

JSON.parse(localStorage.getItem(userInfor))

{};//

获取评论数据this.getCommentList();},computed:

{isLogin()

this.$store.getters.isLogin;},},methods:

{if(layer)

true;this.pantPageNum;this.params.pageNum

this.pantPageNum;console.log(this.params.pageNum,this.params.pageNum);let

res

this.getNewList();res.rows.map(item

{this.$set(item,publicTotal,false)})this.comments.push(...res.rows);this.morelist.loading

false;this.total

{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

this.getNewList();this.childrenMorelist.childrenTotal

res.total;console.log(res,res);item.commentReplyInfoList.push(...res.rows);this.childrenMorelist.loading

false;if(res.total

{this.$refs.avatar.click();},//

获取本篇文章所有评论async

this.$get(/api/comment/list?pageNum${this.params.pageNum}pageSize${this.params.pageSize}orderByColumn${this.params.orderByColumn}

desc,auditStatusisAsc${this.params.isAsc}sourceType${this.params.sourceType}mainId${this.params.mainId}sourceId${this.$route.query.id})this.bigLoading

false;this.comments

false;}this.$set(item,publicTotal,false)})

catch

false;this.$message.error(err);}},async

getNewList()

this.$get(/api/comment/list?pageNum${this.params.pageNum}pageSize${this.params.pageSize}orderByColumn${this.params.orderByColumn}

desc,auditStatusisAsc${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

item?.id;if

{this.$message.warning(请先登录);return;}let

_id

删除二级评论提交请求到后端this.$confirm(确认删除此评论?,

提示,

{this.$put(/api/comment/${replyId}).***n(async

(res)

this.getNewList();console.log(data,data);item.commentReplyCount

data.total;item.commentReplyInfoList.splice(0);item.commentReplyInfoList.push(...data.rows);//this.$message({message:

删除成功,type:

删除一级评论提交请求到后端this.$confirm(确认删除此评论?,

提示,

{this.$put(/api/comment/${_id}).***n((res)

{if

1;this.getCommentList();}});this.total--;if(this.total

{this.morelist.value

{this.$message.warning(请先登录);return;}//本地更新评论列表if

(item)

{this.$message.warning(评论或留言不能为空哦);return;}this.addSecond(item,reply);}

else

{this.$message.warning(评论或留言不能为空哦);return;}this.addFirst();}this.isShowSec

this.isClickId

reply.id;}this.$post(/api/comment,data).***n(async(res)

{if(res.code

this.getNewList();if(!item.commentReplyInfoList)

[];}item.commentReplyInfoList.splice(0);item.commentReplyInfoList.push(...res.rows);item.commentReplyCount

{item.moreValue

;console.log(comments,this.comments);}})},addFirst()

{//

//评论内容};this.$post(/api/comment,data).***n(async(res)

{if(res.code

this.getNewList();res.rows.map(item

{this.$set(item,publicTotal,false)})this.comments

;this.total

{::v-deep.el-input__inner:focus

{border-color:

14px;}::-webkit-scrollbar{width:

8px;height:

内阴影圆角*/::-webkit-scrollbar-track{-webkit-box-shadow:

inset

内阴影圆角*/::-webkit-scrollbar-thumb{border-radius:

inset

:keyindexclick.stopchooseEmojiDefault(item){{item}}/li/uldiv

classemoji-tabsdiv

require(../utils/emoji.json);export

default

emojiJson.data.split(,),isShowEmoji:

false,}},methods:

{console.log(item,item);this.$emit(chooseEmoji,this.keyId,this.layer,item);this.isShowEmoji

false;}}

#ffffff;}::-webkit-scrollbar-thumb

{border-radius:

,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,❤,,,,,,,,,,,,,❣,,,,☝,,,✌,✋,,,,✊,,,,,✍,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,☕,,,,,,,,,,,,,,,,,,,,,,,⚽,⚡,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,☠,,,,

Vue