| | |
| | | <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"> |
| | |
| | | <div class="samllPadding">:</div> |
| | | </div> |
| | | |
| | | <p 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"> |
| | |
| | | </a-tooltip> |
| | | </div> |
| | | </div> |
| | | <p slot="content">{{tempData.commentContent}}</p> |
| | | <p :id="tempData.id" slot="content" v-html="parseContent(tempData.commentContent)"></p> |
| | | </a-comment> |
| | | </a-comment> |
| | | |
| | |
| | | |
| | | <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, |
| | | }, |
| | | }, |
| | | mounted() { |
| | | let packages = Object.keys(OwOjsonConfig) |
| | | for (let i = 0; i < packages.length; i++) { |
| | | let opackage = OwOjsonConfig[packages[i]].container |
| | | let type = OwOjsonConfig[packages[i]].type |
| | | for (let j = 0; j < opackage.length; j++) { |
| | | if (type == 'image') { |
| | | this.myOwOConfig[opackage[j].data] = `<img loading="lazy" class="biaoqing ` + opackage[j].css + |
| | | `" src="` + opackage[j].icon + `">` |
| | | } |
| | | } |
| | | } |
| | | }, |
| | | methods: { |
| | | parseContent(content) { |
| | | let tempStrArray = content.match(this.re); |
| | | |
| | | if (tempStrArray == null) { |
| | | return content; |
| | | } |
| | | |
| | | for (var i = 0; i < tempStrArray.length; i++) { |
| | | if (this.myOwOConfig[tempStrArray[i]] == undefined || this.myOwOConfig[tempStrArray[i]] == null) { |
| | | continue; |
| | | } |
| | | content = content.replace(tempStrArray[i], this.myOwOConfig[tempStrArray[i]]) |
| | | } |
| | | |
| | | return content; |
| | | }, |
| | | updateCommentList(articleId) { |
| | | queryBlogCommentList({ |
| | | pageNo: this.page.current, |
| | |
| | | replyTaget: "", |
| | | visible: false, |
| | | commentListData: [], |
| | | myOwOConfig: {}, |
| | | re: new RegExp(":&\\(\\S*?\\)", "g"), |
| | | } |
| | | } |
| | | } |
| | | </script> |
| | | |
| | | <style lang="less"> |
| | | img.biaoqing.quyin { |
| | | margin-bottom: 0.2rem; |
| | | min-height: 2.5rem; |
| | | height: 2em; |
| | | } |
| | | |
| | | .ant-comment img, |
| | | .myContent img { |
| | | margin-bottom: 0.2rem; |
| | | min-height: 2.5rem; |
| | | height: 2em; |
| | | } |
| | | |
| | | .myContent { |
| | | * { |
| | | max-width: 100% !important; |
| | | } |
| | | } |
| | | |
| | | .samllPadding { |
| | | padding: 0px 3px 5px; |
| | | } |
| | |
| | | justify-content: flex-end; |
| | | } |
| | | |
| | | |
| | | |
| | | .commentList { |
| | | a { |
| | | color: black; |
| | |
| | | |
| | | img { |
| | | user-select: none; |
| | | } |
| | | |
| | | .ant-comment-nested { |
| | | margin-left: 20px; |
| | | } |
| | | |
| | | .ant-comment-avatar { |
| | |
| | | } |
| | | |
| | | .commentGroup { |
| | | border-top: 1px solid #e5e9ef; |
| | | margin-bottom: 5px; |
| | | padding-bottom: 0px; |
| | | border-bottom: 1px solid #e5e9ef; |
| | | } |
| | | |
| | | .commentGroup:hover { |
| | | background: #e5e9ef; |
| | | border-radius: 14px; |
| | | border-bottom:none |
| | | } |
| | | |
| | | .ant-comment-content-detail { |
| | |
| | | margin-bottom: 0px; |
| | | } |
| | | } |
| | | |
| | | |
| | | |
| | | |
| | | } |
| | | </style> |