vue-ELement：前端遞回組件，組成評論展示效果

前言

找到了之前寫的一個小頁面，其中要實作一個評論功能，而評論還可以被回復，回復的評論也可以再被回復，再回復的評論又可以…
無線套娃，那么可以根據第一個評論找到回復他的評論，又可以再向下找到更多的回復評論，因此遞回展示是個不錯的選擇，當然了，關鍵目的是為了寫個遞回的組件，

一、展示效果

先看一下展示效果

點擊查看回復按鈕后的效果：

至于樣式就餓了么的樣式，畢竟就我這css能力和審美還是不寫了，

二、上代碼

<template>
        <el-card shadow="never">
            <!-- 評論頭 -->
            <div shadow="never" >
                <span v-if="pUser">
                    <el-popover  placement="right" width="400" trigger="click">
                      <p>{{ user }}</p>
                      <el-button type="text" size="medium" style="font-family: 楷體" slot="reference">{{ user.name }}</el-button>
                    </el-popover>
                    回復
                    <el-popover placement="right"  width="400" trigger="click">
                      <p>{{ pUser }}</p>
                      <el-button type="text" size="medium" style="font-family: 楷體" slot="reference">{{pUser.name}}</el-button>
                    </el-popover>
                    {{ comment.commentDate }}
                </span>
                <span v-else>
                    <el-popover placement="right" width="400" trigger="click">
                      <p>{{ user }}</p>
                      <el-button type="text" size="medium" style="font-family: 楷體" slot="reference">{{ user.name }}</el-button>
                    </el-popover>
                    于{{ comment.commentDate }}
                    發表評論
                </span>
                <el-dropdown split-button size="small"  @click="handleClick(comment)" style="float:right;">
                    回復
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item>收藏</el-dropdown-item>
                        <el-dropdown-item>舉報</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
            </div>
            <!-- 評論內容 -->
            <p style="padding: 0px 0px 0px 10px">{{ comment.commentText }}</p>

            <div v-if="comment.vo">
                <!-- 回復 -->
                <comment-info v-if="showSon" v-for="vo in comment.vo"  :key="vo.id" :comment="vo" :pUser="user" />
                <!-- 折疊按鈕 -->
                <el-divider content-position="left" v-if="!showSon"><el-button type="text" @click="showSon = !showSon" size="medium" style="font-family: 楷體">{{'查看回復'}}</el-button></el-divider>
            </div>
        </el-card>
</template>

<script>
    import Comment from "./Comment";
export default {
    name:'commentInfo',
    components:{
        Comment,
    },
    props:{
        comment:{
            type:Object,
            request:true
        },
        pUser:{
            type:Object,
            request: true,
        }
    },
    data(){
        return {
            activeNames:['1'],
            user:{},
            showSon:false
        }
    },
    methods: {
        //傳值
        handleClick(comment){
            console.log(comment)
            this.$store.commit('addComment', comment)
        },
        getUser(id){
            console.log(id)
            this.$http.get('/user/' + id).then(resp => {
                this.user = resp.data.data
            })
        },
        showSonInfo(){
            if(this.pUser){
                this.showSon = true
            }
        },
        showUser(user){

        }
    },
    created() {
        this.getUser(this.comment.userId)
        this.showSonInfo()
    }
}
</script>

<style scoped>
    span{
        color: grey;
        font-size: 14px;

    }
    /deep/ .el-card__body {
        padding: 0px 0px 0px 5px;
        border: 1px solid #bbbbbb;
        font-family: 楷體;
    }
</style>

其中關鍵就是在這個組件中對組件本身進行呼叫，通過條件判斷是否還有下層，如果有就再呼叫一次組件本身，
當然了代碼寫的并不齊全，這只是實作了本身的遞回呼叫

整個組件的代碼可以去碼云尋找我的倉庫下載
https://gitee.com/kanghongfa/comment.git