vue实现文章评论和回复列表

<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: '朝花夕拾' }
      ],
      // 评论列表
      commentsList: [
        {
          userId: 'user-1',
          userName: '赵一',
          articleId: 'article-1', // 关联的文章id
          commentId: 'comment-1', // 评论id
          replyId: null, // 回复哪条评论的id
          desc: '作者是谁',
          time: '2021-04-05 15:30:25'
        },
        {
          userId: 'user-2',
          userName: '钱二',
          articleId: 'article-1',
          commentId: 'comment-2',
          replyId: null,
          desc: '对呀，作者也不写',
          time: '2021-04-05 15:30:25'
        },
        {
          userId: 'user-3',
          userName: '孙三',
          articleId: 'article-1',
          commentId: 'comment-3',
          replyId: null,
          desc: '楼上俩初中没毕业吧',
          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: '不对吧',
          time: '2021-04-05 15:30:25'
        },
        {
          userId: 'user-7',
          userName: '顾七',
          articleId: 'article-1',
          commentId: 'comment-7',
          replyId: 'comment-6',
          desc: '对的，就是钱钟书',
          time: '2021-04-05 15:30:25'
        },
        {
          userId: 'user-8',
          userName: '朱八',
          articleId: 'article-3',
          commentId: 'comment-8',
          replyId: null,
          desc: '这本书真不错',
          time: '2021-04-05 15:30:25'
        },
        {
          userId: 'user-9',
          userName: '纪九',
          articleId: 'article-4',
          commentId: 'comment-9',
          replyId: null,
          desc: '真的好看',
          time: '2021-04-05 15:30:25'
        }
      ]
    }
  },
  created() {
    this.initCommentLists()
    this.initArticleLists()
  },
  methods: {
    // 格式化评论数据
    initCommentLists() {
      this.commentsList.forEach(i => {
        this.$set(i, 'children', [])
        // 将回复该评论的列表放入children中
        let filterList = this.commentsList.filter(
          j => j.replyId === i.commentId
        )
        if (filterList.length > 0) {
          i.children = filterList
        }
      })
      // 过滤出最高级
      this.commentsList = this.commentsList.filter(i => i.replyId === null)
    },
    // 格式化文章数据
    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">
      <!-- 回复 -->
      <div v-if="self.replyId">
        <span class="self-username"> {{ self.userName }} 回复 </span>
        <span class="parent-username" @click="parentClick"
          >{{ parent.userName }}：</span
        >
        {{ self.desc }}
        <span class="time">{{ self.time }}</span>
      </div>
      <!-- 评论 -->
      <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} 条回复` : `收起 ${self.children.length} 条回复`}}
         
      </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: {
    // 点击被回复的昵称事件
    parentClick() {
      console.log(this.parent)
    },
    // 评论人点击事件
    commentUserNameClick() {
      console.log(this.self)
    },
    // 查看/收起回复
    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>