文件结构调整,日志评论实现

 src/components/mini/box12-comment.vue

@@ -1,12 +1,13 @@
<template>
    <div class="myFriend" style="min-height: 950px;">
        <h1 style="text-align: center;">碎碎念</h1>
        <replyBox ref="commentBoxId"></replyBox>
    <div>
        <replyBox ref="commentBoxId" v-bind="$attrs"></replyBox>
        <a-modal v-model="visible" :title="replyTaget" :footer="null"
            :bodyStyle="{'overflow':'overlay','maxHeight': '550px','scrollbarWidth': 'none'}">
            <replyBox ref="replyBoxId"></replyBox>
            <replyBox ref="replyBoxId" v-bind="$attrs"></replyBox>
        </a-modal>

        <div class="mySecret" v-if="commentListData.length==0">
            <p>空空如也..</p>
        </div>
        <div v-for="temp in commentListData" class="commentList">

            <div class="commentGroup">
@@ -98,6 +99,7 @@
    } from '../../api/blogArticleComment.js'

    export default {
        props: ["articleId"],
        components: {
            replyBox
        },
@@ -105,7 +107,7 @@
            queryBlogCommentList({
                pageNo: this.page.current,
                pageSize: this.page.pageSize,
                articleId: this.articleId
                articleId: this.$attrs.acticleId
            }).then((res) => {
                this.page.total = Number(res.data.total)
                this.page.pageSize = Number(res.data.size);
@@ -119,7 +121,7 @@
                queryBlogCommentList({
                    pageNo: this.page.current,
                    pageSize: this.page.pageSize,
                    articleId: this.articleId
                    articleId: this.$attrs.articleId
                }).then((res) => {
                    this.page.total = Number(res.data.total)
                    this.page.pageSize = Number(res.data.size);
@@ -154,7 +156,7 @@
        },
        data() {
            return {
                articleId: null,
                // articleId: null,
                isAllowedComment: true,
                page: {
                    size: "small",

 src/components/mini/box13-reply.vue

@@ -59,13 +59,14 @@
    } from '../../api/blogArticleComment.js'

    export default {
        props: ["articleId"],
        methods: {
            getMsgInfo(param) {
                this.msgInfo = param;
                this.showReplyMsgInfo = true;
                this.replyHolder = "@" + this.msgInfo.useName;
            },
            send(articleId) {
            send() {
                console.log(this.msgInfo);
                if (this.form.nickName === "") {
                    this.$message.info("怎么称呼..")
@@ -87,6 +88,8 @@
                        res = false;
                    }
                });
                var articleId=this.$attrs.acticleId;
                console.log(articleId);

                let commentType = (articleId == null || articleId == undefined) ? 1 : 2;
                this.isSending = true;
@@ -106,9 +109,7 @@
                    "commentContent": this.form.visitorContent,
                }).then((res) => {
                    this.isSending = false;
                    console.log(111);
                    if (res.code == 200) {
                        console.log(111);
                        this.$message.info("已送达,审核通过后显示..")
                    } else {
                        this.$notification.error({

 src/components/mini/mdDetail.vue

@@ -32,6 +32,9 @@
                <vue-markdown :source="source"></vue-markdown>
            </div>
        </div>
        <div class="articleComment">
            <comment :acticleId="acticleId"></comment>
        </div>
    </div>

</template>
@@ -44,13 +47,14 @@
    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 {
@@ -166,7 +170,12 @@
        align-items: center;
    }

    .markdown-body {
    .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),

 src/components/swichLabel/main1-home.vue

 src/components/swichLabel/main2-music-search.vue

 src/components/swichLabel/main4-link.vue

 src/components/swichLabel/main5-login.vue

 src/components/swichLabel/main6-comment.vue

New file
@@ -0,0 +1,19 @@
<template>
    <div class="myFriend" style="min-height: 950px;">

        <h1 style="text-align: center;">碎碎念</h1>
        <comment></comment>
    </div>
</template>

<script>
    import comment from "../mini/box12-comment.vue"
    export default {
        components: {
            comment
        }
    }
</script>

<style>
</style>

 src/config/router.config.js

@@ -2,14 +2,14 @@

import articleList from '../components/group/articleListScorll.vue'

import main1 from '../components/swichLabel/main1-show.vue'
import main2 from '../components/swichLabel/main2-show.vue'
import main1 from '../components/swichLabel/main1-home.vue'
import main2 from '../components/swichLabel/main2-music-search.vue'
import main3 from '../components/swichLabel/main3-show.vue'
import link from '../components/swichLabel/main4-show.vue'
import login from '../components/swichLabel/main5-show.vue'
import link from '../components/swichLabel/main4-link.vue'
import login from '../components/swichLabel/main5-login.vue'
import comment from '../components/swichLabel/main6-comment.vue'

import box1 from '../components/mini/box1-info.vue'
import comment from '../components/mini/box12-comment.vue'
import tagTime from '../components/mini/tagTime.vue'
import tagInfo from '../components/mini/tagInfo.vue'
import boxFriend from '../components/mini/box-friend.vue'