vue实现文章评论和回复列表
作者：nao儿
这篇文章主要为大家详细介绍了vue实现文章评论和回复列表，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了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>my-cycle-list组件：
<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>以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。