本文实例为大家分享了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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
