From c14e3278893b9dd1022aa488cee53a888c2a4c7e Mon Sep 17 00:00:00 2001 From: inleft <inleft@qq.com> Date: Tue, 16 Aug 2022 19:34:48 +0800 Subject: [PATCH] 表情组件优化 --- src/components/mini/box12-comment.vue | 47 +++++++++++++++++++++++++++++++++++++++-------- 1 files changed, 39 insertions(+), 8 deletions(-) diff --git a/src/components/mini/box12-comment.vue b/src/components/mini/box12-comment.vue index 220f93d..9e748ed 100644 --- a/src/components/mini/box12-comment.vue +++ b/src/components/mini/box12-comment.vue @@ -1,12 +1,21 @@ <template> <div> - <replyBox ref="commentBoxId" v-bind="$attrs" @sendMsg="sendMsg()"></replyBox> + <a-collapse v-if="foldReply"> + <a-collapse-panel key="replyPanel" header="回复"> + <replyBox ref="commentBoxId" v-bind="$attrs" @sendMsg="sendMsg()"></replyBox> + </a-collapse-panel> + </a-collapse> + <div v-else> + <replyBox ref="commentBoxId" v-bind="$attrs" @sendMsg="sendMsg()" ></replyBox> + </div> + <a-modal v-model="visible" :title="replyTaget" :footer="null" - :bodyStyle="{'overflow':'overlay','maxHeight': '550px','scrollbarWidth': 'none'}"> - <replyBox ref="replyBoxId" v-bind="$attrs" @sendMsg="sendMsg()"></replyBox> + :bodyStyle="{'overflow':'overlay','height': '700px','scrollbarWidth': 'none'}"> + <replyBox ref="replyBoxId" v-bind="$attrs" @sendMsg="sendMsg()" :parseContent="parseContent" + :visible="visible"></replyBox> </a-modal> - <div class="mySecret" style="max-height:350px ;" v-if="commentListData.length==0"> + <div class="mySecret" style="max-height:250px ;" v-if="commentListData.length==0"> <p>空空如也..</p> </div> <div v-for="temp in commentListData" class="commentList"> @@ -33,7 +42,7 @@ <div class="samllPadding">:</div> </div> - <p :id="temp.id" slot="content">{{temp.commentContent}}</p> + <p :id="temp.id" slot="content" v-html="parseContent(temp.commentContent)" class="myContent"></p> <a-comment v-for="tempData in temp.replyList"> <div slot="actions" key="comment-nested-reply-to" class="actionList"> @@ -67,7 +76,7 @@ </a-tooltip> </div> </div> - <p :id="tempData.id" slot="content">{{tempData.commentContent}}</p> + <p :id="tempData.id" slot="content" v-html="parseContent(tempData.commentContent)"></p> </a-comment> </a-comment> @@ -90,17 +99,29 @@ <script> import replyBox from "./box13-reply.vue" - import { queryBlogCommentList, queryBlogCommentSubList } from '../../api/blogArticleComment.js' + import OwOjsonConfig from '../../assets/OwO.json' export default { components: { - replyBox + replyBox, + }, + props: { + "foldReply": { + default: false, + }, }, methods: { + parseContent(content) { + let tempStrArray=content.match("\:\&\(.*\)"); + + console.log(OwOjsonConfig); + console.log(333); + return content; + }, updateCommentList(articleId) { queryBlogCommentList({ pageNo: this.page.current, @@ -167,6 +188,12 @@ </script> <style lang="less"> + .myContent img { + margin-bottom: -0.125rem; + img min-height: 3.5rem; + height: 2em; + } + .samllPadding { padding: 0px 3px 5px; } @@ -215,6 +242,10 @@ user-select: none; } + .ant-comment-nested { + margin-left: 20px; + } + .ant-comment-avatar { cursor: default; } -- Gitblit v1.9.1