封装个前台写死数据的评论组件

index.vue

// 评论组件

<script>
import Comment from './Comment.vue'

export default {
    name: 'comment',
    components: { Comment },
    data() {
        return {
            commentList: [
                {
                    "id": 1,
                    "pid": 0,
                    "name": "张三",
                    "content": "你们好",
                    "avatar": "http://thirdwx.qlogo.cn/mmopen/0Xxpbic36D0ELicBiaCEgiaUSRVqTINadg8n7ePWZ0NgWaoh4ZA9qWicYly2eKXtDAW3nLicicmdheRiayLN4v3b44zia/132",
                    "createTime": "2020-04-12T06:32:20.613+0000",
                    "replyComments": [{
                        "id": 2,
                        "pid": 1,
                        "pname": "张三",//必须有
                        "name": "李四",
                        "content": "你好",
                        "avatar": "http://thirdwx.qlogo.cn/mmopen/0Xxpbic36DhJ5tCEgiaUSRVqTINadg8n7ePWZ0NgWaoh4ZA9qWicYly2eKXtDAW3nLicicmdheRiayLN4v3b44zia/132",
                        "createTime": "2020-04-12T06:32:31.699+0000",
                        "replyComments": [],

                    }, {
                        "id": 5,
                        "pid": 1,
                        "pname": "张三",//必须有
                        "name": "李四156456",
                        "content": "你22好",
                        "avatar": "http://thirdwx.qlogo.cn/mmopen/0Xxpbic36DhJ5tCEgiaUSRVqTINadg8n7ePWZ0NgWaoh4ZA9qWicYly2eKXtDAW3nLicicmdheRiayLN4v3b44zia/132",
                        "createTime": "2020-04-12T06:32:31.699+0000",
                        "replyComments": [],

                    }]
                },
                {
                    "id": 3,
                    "pid": 0,
                    "name": "王五",
                    "content": "猪吗？",
                    "avatar": "http://thirdwx.qlogo.cn/mmopen/0Xxpbic36DhJ5tLwiaJAAJV0ELicBiaCEgiaWaoh4ZA9qWicYly2eKXtDAW3nLicicmdheRiayLN4v3b44zia/132",
                    "createTime": "2020-04-12T06:34:37.146+0000",
                    "replyComments": [{
                        "id": 4,
                        "pid": 3,
                        "pname": "王五",
                        "name": "赵六",
                        "content": "？？",
                        "avatar": "http://thirdwx.qlogo.cn/mmopen/0Xxpbic36DhJ5tLwiaJAqTINadg8n7ePWZ0NgWaoh4ZA9qWicYly2eKXtDAW3nLicicmdheRiayLN4v3b44zia/132",
                        "createTime": "2020-04-12T07:03:47.873+0000",
                        "replyComments": []
                    },
                    {
                        "id": 6,
                        "pid": 3,
                        "pname": "王五",
                        "name": "陈六",
                        "content": "？？",
                        "avatar": "http://thirdwx.qlogo.cn/mmopen/0Xxpbic36DhJ5tLwiaJAqTINadg8n7ePWZ0NgWaoh4ZA9qWicYly2eKXtDAW3nLicicmdheRiayLN4v3b44zia/132",
                        "createTime": "2020-04-12T07:03:47.873+0000",
                        "replyComments": []
                    }]
                }
            ],
            rowdata:{}
        };
    },
    methods: {
        //根据id查询该博客的评论信息
        showCommentById(data) {
            this.rowdata = data
            if (data.pid == '0') {
                this.commentList.push(data)
            } else {
                this.recursionTree(this.commentList)
            }
        },
        recursionTree(data) {
            for (let i = 0; i < data.length; i++) {
                const element = data[i];
                if (element.id == this.rowdata.pid) {
                    return element.replyComments.push(this.rowdata)
                }
                if (element.replyComments && element.replyComments.length > 0) {
                    this.recursionTree(element.replyComments)
                }
            }
        }
    },
    watch: {}
}
</script>
<template>
        //引用的评论组件
        <Comment :commentList="commentList" @on-comment="showCommentById"></Comment>
    
</template>
<style lang='less' scoped>
</style>

<template>
    <div>
        <List item-layout="vertical" size="small" :split="true" border>
            <ListItem v-for="item in commentList" :key="item.id">
                <ListItem>
                    <Avatar shape="square" size="small" :src="item.avatar"></Avatar>&nbsp;<span style="color: #2d9aff">{{item.name}}&nbsp;</span>
                    <span v-if="item.pname">回复: <span style="color: #2d9aff">{{item.pname}}</span></span> &nbsp;
                    <li style="margin-left: 2.5%;margin-top: 1%">{{item.content}}</li>
                    <template slot="action">
                        <li>
                            <Icon type="ios-calendar-outline" />
                            {{dateFilter(item.createTime)}}
                        </li>
                        <li>
                            <span @click="showCommentInput(item)">
                                <Icon type="ios-chatbubbles-outline" /> 回复
                            </span>
                        </li>
                        <li>
                            <span @click="deleteItem(item,item)">
                                <Icon type="md-close" /> 删除
                            </span>
                        </li>
                        <template>
                            <Input style="margin-top:5px" v-if="item.id == blogId" v-model="inputComment" type="textarea" :rows="3" :placeholder="placeholders">
                            </Input>
                            <div v-if="item.id == blogId" style="text-align: right;margin-top: 10px">
                                <Button @click="cancel" style="margin-right: 10px">取消</Button>
                                <Button type="primary" round @click="commitComment">确定</Button>
                            </div>
                        </template>

                    </template>
                </ListItem>

                <div v-if="item.replyComments">
                    <comment :commentList="item.replyComments" v-bind="$attrs" v-on="$listeners"></comment>
                </div>
            </ListItem>
        </List>
    </div>
</template>

<script>

import { mapState, mapMutations } from 'vuex';
export default {
    name: 'comment',
    components: {},
    props: {
        commentList: [],
    },
    data() {
        return {
            //评论内容
            inputComment: '',
            //输入框默认内容
            placeholders: '写下你的评论',
            pname: '',
        }
    },
    computed: {
        ...mapState('extend/emplate', [
            'blogId'
        ])
    },
    methods: {
        ...mapMutations('extend/emplate', [
            'setBlogFun'
        ]),
        /**
         * 点击取消按钮
         */
        cancel() {
            this.inputComment = '';
            this.placeholders = '写下你的评论';
        },
        /**
         * 提交评论
         */
        async commitComment() {
            // const user= JSON.parse(window.sessionStorage.getItem("user"));
            // if (!user) {
            //     this.$Message.warning({
            //         background: true,
            //         content: '发表评论请先登录！',

            //     });
            // } else {
            if (!this.inputComment) {
                this.$Message.warning({
                    background: true,
                    content: '评论信息不能为空！',

                });
            } else {
                if (this.blogId) {
                    this.$Message.success('回复评论')
                    this.$emit("on-comment", {
                        "id": 888,
                        "pid": this.blogId,
                        "name": "czl",
                        "pname": this.pname,
                        "content": this.inputComment,
                        "avatar": "http://thirdwx.qlogo.cn/mmopen/0Xxpbic36DhJ5tLwiaJAAJV0ELicBiaCEgiaWaoh4ZA9qWicYly2eKXtDAW3nLicicmdheRiayLN4v3b44zia/132",
                        "createTime": "2024-03-05T07:03:47.873+0000",
                        "replyComments": []
                    });
                } else {
                    this.$Message.success('评论别人')
                    this.$emit("on-comment", {
                        "id": 5,
                        "pid": 0,
                        "name": "czl",
                        "pname": this.pname,
                        "content": this.inputComment,
                        "avatar": "http://thirdwx.qlogo.cn/mmopen/0Xxpbic36DhJ5tLwiaJAAJV0ELicBiaCEgiaWaoh4ZA9qWicYly2eKXtDAW3nLicicmdheRiayLN4v3b44zia/132",
                        "createTime": "2024-03-05T07:03:47.873+0000",
                        "replyComments": []
                    });
                }
            }
            // }
            this.inputComment = '';
        },
        /**
         * 点击评论按钮显示输入框
         * item: 当前的评论
         * reply: 当前回复的评论
         */
        showCommentInput(reply) {
            console.log(reply, 'replyreplyreplyreply')
            if (reply) {
                this.placeholders = "@" + reply.name + " "
            } else {
                this.inputComment = ''
            }
            this.pname = reply.name
            this.setBlogFun(reply.id)
        },
        //格式化时间的方法
        dateFilter: function (input) {
            var d = new Date(input);
            var year = d.getFullYear();
            var month = d.getMonth() < 9 ? "0" + (d.getMonth() + 1) : "" + (d.getMonth() + 1);
            var day = d.getDate() < 10 ? "0" + d.getDate() : "" + d.getDate();
            var hour = d.getHours() < 10 ? "0" + d.getHours() : "" + d.getHours();
            var minutes = d.getMinutes() < 10 ? "0" + d.getMinutes() : "" + d.getMinutes();
            var seconds = d.getSeconds() < 10 ? "0" + d.getSeconds() : "" + d.getSeconds();
            return (year + "-" + month + "-" + day + " " + hour + ":" + minutes + ":" + seconds);
        },
        //删除评论
        deleteItem(item, reply) {
         //太懒惰了  没写
        }
    },
}

</script>

<style scoped lang="less">
</style>

最最最最主要的是vueX

export default {
    namespaced: true,
    state: {
        blogId: ''
    },
    getters: {},
    mutations: {
        setBlogFun(state, value) {
            state.blogId = value
        }
    },
    modules: {},
    actions: {}
}