From c6793e5475b607e83cbb55b7d0ddfb9b81bd7774 Mon Sep 17 00:00:00 2001 From: inleft <inleft@qq.com> Date: Thu, 25 Aug 2022 04:09:06 +0800 Subject: [PATCH] 日志内容详情页多媒体适配 markdown 内图片增加viewer相应 --- src/components/mini/box12-comment.vue | 63 +++++++++++++++++++++++++++---- 1 files changed, 54 insertions(+), 9 deletions(-) diff --git a/src/components/mini/box12-comment.vue b/src/components/mini/box12-comment.vue index f3b4792..28c0ab0 100644 --- a/src/components/mini/box12-comment.vue +++ b/src/components/mini/box12-comment.vue @@ -10,8 +10,9 @@ </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:250px ;" v-if="commentListData.length==0"> @@ -41,7 +42,7 @@ <div class="samllPadding">:</div> </div> - <p :id="temp.id" slot="content" v-html="temp.commentContent" class="myContent"></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"> @@ -75,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> @@ -98,22 +99,51 @@ <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, @@ -174,16 +204,31 @@ 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.125rem; - img min-height: 3.5rem; - height: 3em; + margin-bottom: 0.2rem; + min-height: 2.5rem; + height: 2em; + } + + .myContent { + * { + max-width: 100% !important; + } } .samllPadding { -- Gitblit v1.9.1