From 5dfef883049e7f0670f6c6b1b225b233aee41eea Mon Sep 17 00:00:00 2001 From: inleft <inleft@qq.com> Date: Thu, 03 Mar 2022 01:30:11 +0800 Subject: [PATCH] 评论页刷新策略调整 --- src/components/mini/mdDetail.vue | 44 +++++++++++++++++++++++++++----------------- 1 files changed, 27 insertions(+), 17 deletions(-) diff --git a/src/components/mini/mdDetail.vue b/src/components/mini/mdDetail.vue index e75b1c7..54ac32a 100644 --- a/src/components/mini/mdDetail.vue +++ b/src/components/mini/mdDetail.vue @@ -32,32 +32,33 @@ <vue-markdown :source="source"></vue-markdown> </div> </div> - - + <div class="articleComment"> + <comment ref="myComment" :articleId="articleId"> </comment> + </div> </div> </template> <script> - // import esPath from '../../assets/es.md' import VueMarkdown from 'vue-markdown' import md5 from 'js-md5'; import { queryBlogArticleDetail } from '../../api/blogArticle.js' - + import comment from "../mini/box12-comment.vue" import axios from 'axios' export default { components: { - VueMarkdown + VueMarkdown, + comment }, data() { return { source: "", - acticleId: "", + articleId: "", showMsg: false, myLock: false, errorMsg: '', @@ -72,28 +73,31 @@ } }, created() { - this.acticleId = this.$route.query.id; + this.articleId = this.$route.query.id; }, watch: { '$route'(to, from) { if ("mdDetail" === to.name) { - this.acticleId = this.$route.query.id; + this.articleId = this.$route.query.id; } }, - acticleId: function(newValue, oldValue) { + articleId: function(newValue, oldValue) { if (newValue == undefined || newValue == null || newValue == "") { this.showMsg = true; this.errorMsg = "日志id参数缺失"; } else { this.queryDetail(); + this.$refs.myComment.updateCommentList(this.articleId); } } }, methods: { queryDetail() { + this.showMsg = true; + this.errorMsg = "加载中.."; queryBlogArticleDetail({ - id: this.acticleId, + id: this.articleId, authWord: this.secret == "" ? null : md5(this.secret) }).then((res) => { this.showMsg = true; @@ -121,15 +125,15 @@ return } - - //获取日志资源文件 - this.showMsg = false; - this.errorMsg = ""; this.$axios .get(res.data.articleFileURL) .then((res) => { this.source = res.data; }) + + //获取日志资源文件 + this.showMsg = false; + this.errorMsg = ""; }) }, pressEnter() { @@ -150,7 +154,7 @@ this.$router.go(-1); } }, - + } </script> @@ -166,8 +170,14 @@ align-items: center; } - .markdown-body { - padding: 10px 20px 10px 20px; + .articleComment { + margin-top: 20px; + } + + .markdown-body, + .articleComment { + min-height: 750px; + padding: 35px 20px 10px 20px; box-shadow: 8px 8px 18px rgba(0, 0, 0, 0.1), -8px -8px 18px #ffffff; } -- Gitblit v1.9.1