<template>
? <div class="comment-reply">
? ? <div
? ? ? v-for="(item, index) in articleLists"
? ? ? :key="index"
? ? ? class="article-list"
? ? >
? ? ? <div class="article-desc">{{ item.articleDesc }}</div>
? ? ? <div v-if="item.children.length > 0">
? ? ? ? <div class="reply-list" v-if="item.children.length > 0">
? ? ? ? ? <my-cycle-list
? ? ? ? ? ? v-for="(comment, index) in item.children"
? ? ? ? ? ? :self="comment"
? ? ? ? ? ? :parent="comment"
? ? ? ? ? ? :key="index"
? ? ? ? ? ></my-cycle-list>
? ? ? ? </div>
? ? ? </div>
? ? </div>
? </div>
</template>
<script>
import myCycleList from '@/components/my-cycle-list'
export default {
? components: { myCycleList },
? data() {
? ? return {
? ? ? // 文章列表
? ? ? articleLists: [
? ? ? ? { articleId: 'article-1', articleDesc: '圍城' },
? ? ? ? { articleId: 'article-2', articleDesc: '駱駝祥子' },
? ? ? ? { articleId: 'article-3', articleDesc: '邊城' },
? ? ? ? { articleId: 'article-4', articleDesc: '朝花夕拾' }
? ? ? ],
? ? ? // 評(píng)論列表
? ? ? commentsList: [
? ? ? ? {
? ? ? ? ? userId: 'user-1',
? ? ? ? ? userName: '趙一',
? ? ? ? ? articleId: 'article-1', // 關(guān)聯(lián)的文章id
? ? ? ? ? commentId: 'comment-1', // 評(píng)論id
? ? ? ? ? replyId: null, // 回復(fù)哪條評(píng)論的id
? ? ? ? ? desc: '作者是誰(shuí)',
? ? ? ? ? time: '2021-04-05 15:30:25'
? ? ? ? },
? ? ? ? {
? ? ? ? ? userId: 'user-2',
? ? ? ? ? userName: '錢二',
? ? ? ? ? articleId: 'article-1',
? ? ? ? ? commentId: 'comment-2',
? ? ? ? ? replyId: null,
? ? ? ? ? desc: '對(duì)呀，作者也不寫',
? ? ? ? ? time: '2021-04-05 15:30:25'
? ? ? ? },
? ? ? ? {
? ? ? ? ? userId: 'user-3',
? ? ? ? ? userName: '孫三',
? ? ? ? ? articleId: 'article-1',
? ? ? ? ? commentId: 'comment-3',
? ? ? ? ? replyId: null,
? ? ? ? ? desc: '樓上倆初中沒畢業(yè)吧',
? ? ? ? ? time: '2021-04-05 15:30:25'
? ? ? ? },
? ? ? ? {
? ? ? ? ? userId: 'user-4',
? ? ? ? ? userName: '李四',
? ? ? ? ? articleId: 'article-1',
? ? ? ? ? commentId: 'comment-4',
? ? ? ? ? replyId: 'comment-1',
? ? ? ? ? desc: '作者是錢鐘書',
? ? ? ? ? time: '2021-04-05 15:30:25'
? ? ? ? },
? ? ? ? {
? ? ? ? ? userId: 'user-9',
? ? ? ? ? userName: '牛九',
? ? ? ? ? articleId: 'article-1',
? ? ? ? ? commentId: 'comment-10',
? ? ? ? ? replyId: 'comment-1',
? ? ? ? ? desc: '錢鐘書',
? ? ? ? ? time: '2021-04-05 15:30:25'
? ? ? ? },
? ? ? ? {
? ? ? ? ? userId: 'user-5',
? ? ? ? ? userName: '王五',
? ? ? ? ? articleId: 'article-2',
? ? ? ? ? commentId: 'comment-5',
? ? ? ? ? replyId: null,
? ? ? ? ? desc: '哈哈哈',
? ? ? ? ? time: '2021-04-05 15:30:25'
? ? ? ? },
? ? ? ? {
? ? ? ? ? userId: 'user-6',
? ? ? ? ? userName: '張六',
? ? ? ? ? articleId: 'article-1',
? ? ? ? ? commentId: 'comment-6',
? ? ? ? ? replyId: 'comment-4',
? ? ? ? ? desc: '不對(duì)吧',
? ? ? ? ? time: '2021-04-05 15:30:25'
? ? ? ? },
? ? ? ? {
? ? ? ? ? userId: 'user-7',
? ? ? ? ? userName: '顧七',
? ? ? ? ? articleId: 'article-1',
? ? ? ? ? commentId: 'comment-7',
? ? ? ? ? replyId: 'comment-6',
? ? ? ? ? desc: '對(duì)的，就是錢鐘書',
? ? ? ? ? time: '2021-04-05 15:30:25'
? ? ? ? },
? ? ? ? {
? ? ? ? ? userId: 'user-8',
? ? ? ? ? userName: '朱八',
? ? ? ? ? articleId: 'article-3',
? ? ? ? ? commentId: 'comment-8',
? ? ? ? ? replyId: null,
? ? ? ? ? desc: '這本書真不錯(cuò)',
? ? ? ? ? time: '2021-04-05 15:30:25'
? ? ? ? },
? ? ? ? {
? ? ? ? ? userId: 'user-9',
? ? ? ? ? userName: '紀(jì)九',
? ? ? ? ? articleId: 'article-4',
? ? ? ? ? commentId: 'comment-9',
? ? ? ? ? replyId: null,
? ? ? ? ? desc: '真的好看',
? ? ? ? ? time: '2021-04-05 15:30:25'
? ? ? ? }
? ? ? ]
? ? }
? },
? created() {
? ? this.initCommentLists()
? ? this.initArticleLists()
? },
? methods: {
? ? // 格式化評(píng)論數(shù)據(jù)
? ? initCommentLists() {
? ? ? this.commentsList.forEach(i => {
? ? ? ? this.$set(i, 'children', [])
? ? ? ? // 將回復(fù)該評(píng)論的列表放入children中
? ? ? ? let filterList = this.commentsList.filter(
? ? ? ? ? j => j.replyId === i.commentId
? ? ? ? )
? ? ? ? if (filterList.length > 0) {
? ? ? ? ? i.children = filterList
? ? ? ? }
? ? ? })
? ? ? // 過濾出最高級(jí)
? ? ? this.commentsList = this.commentsList.filter(i => i.replyId === null)
? ? },
? ? // 格式化文章數(shù)據(jù)
? ? initArticleLists() {
? ? ? this.articleLists.forEach(i => {
? ? ? ? this.$set(i, 'children', [])
? ? ? ? let filterList = this.commentsList.filter(
? ? ? ? ? j => j.articleId === i.articleId
? ? ? ? )
? ? ? ? if (filterList.length > 0) {
? ? ? ? ? i.children = filterList
? ? ? ? }
? ? ? })
? ? }
? }
}
</script>
<style scoped lang="scss">
.comment-reply {
? .article-list {
? ? margin: 15px;
? ? .article-desc {
? ? ? color: coral;
? ? ? font-size: 26px;
? ? ? font-weight: bold;
? ? }
? }
? .comment-list {
? ? margin: 10px;
? ? .comment {
? ? ? .comment-username {
? ? ? ? color: #999;
? ? ? ? cursor: pointer;
? ? ? }
? ? }
? }
}
</style>

<template>
? <div class="my-cycle-list">
? ? <div class="lists">
? ? ? <!-- 回復(fù) -->
? ? ? <div v-if="self.replyId">
? ? ? ? <span class="self-username"> {{ self.userName }} 回復(fù) </span>
? ? ? ? <span class="parent-username" @click="parentClick"
? ? ? ? ? >{{ parent.userName }}：</span
? ? ? ? >
? ? ? ? {{ self.desc }}
? ? ? ? <span class="time">{{ self.time }}</span>
? ? ? </div>
? ? ? <!-- 評(píng)論 -->
? ? ? <div v-else>
? ? ? ? <span class="self-username" @click="commentUserNameClick">
? ? ? ? ? {{ self.userName }}：
? ? ? ? </span>
? ? ? ? {{ self.desc }}
? ? ? ? <span class="time">{{ self.time }}</span>
? ? ? </div>
? ? ? <!-- 遞歸組件 -->
? ? ? <div v-if="self.children.length < flagNum || showAll">
? ? ? ? <my-cycle-list
? ? ? ? ? v-for="(child, index) in self.children"
? ? ? ? ? :self="child"
? ? ? ? ? :parent="self"
? ? ? ? ? :key="index"
? ? ? ? ></my-cycle-list>
? ? ? </div>
? ? ? <!-- 查看全部 -->
? ? ? <div
? ? ? ? v-if="self.children.length >= flagNum"
? ? ? ? class="view-all"
? ? ? ? @click="viewAll"
? ? ? >
? ? ? {{ !showAll ? `查看全部 ${self.children.length} 條回復(fù)` : `收起 ${self.children.length} 條回復(fù)`}}
? ? ? ? ?
? ? ? </div>
? ? </div>
? </div>
</template>
<script>
import myCycleList from '@/components/my-cycle-list'
export default {
? props: ['self', 'parent'],
? components: { myCycleList },
? name: 'my-cycle-list',
? data() {
? ? return {
? ? ? flagNum: 2, // 超過多少條折疊
? ? ? showAll: false
? ? }
? },
? created() {},
? methods: {
? ? // 點(diǎn)擊被回復(fù)的昵稱事件
? ? parentClick() {
? ? ? console.log(this.parent)
? ? },
? ? // 評(píng)論人點(diǎn)擊事件
? ? commentUserNameClick() {
? ? ? console.log(this.self)
? ? },
? ? // 查看/收起回復(fù)
? ? viewAll() {
? ? ? this.showAll = !this.showAll
? ? }
? }
}
</script>
<style scoped lang="scss">
.my-cycle-list {
? .lists {
? ? margin: 10px;
? ? .self-username {
? ? ? cursor: pointer;
? ? ? color: #999;
? ? }
? ? .parent-username {
? ? ? color: burlywood;
? ? ? cursor: pointer;
? ? }
? ? .time {
? ? ? margin: 0 10px;
? ? ? color: #666;
? ? ? font-size: 12px;
? ? }
? ? .view-all {
? ? ? margin: 10px 0;
? ? ? color: darkcyan;
? ? ? cursor: pointer;
? ? }
? }
}
</style>