b站评论功能(一级评论到n级)
一二级评论无@显示,所以可以直接v-for渲染,二级评论之后会有@,利用组件递归实现
代码示例:
数据:
arr :[
{comment_id: 1, user_id: 43, comment_date: "04-23", comment_content: "蜡笔小新很好看!", parent_id: null,userinfo:{name:'jeff1'}},
{ comment_id: 2, user_id: 19, comment_date: "04-24", comment_content: "还不错哦!很好看", parent_id: null },
{ comment_id: 3, user_id: 17, comment_date: "04-25", comment_content: "我也感觉蜡笔小新很好看", parent_id: "1",userinfo:{name:'jeff2'} },
{ comment_id: 4, user_id: 14, comment_date: "04-26", comment_content: "我感觉机器猫更好看一点", parent_id: "3",userinfo:{name:'jeff3'},parent_user_info:{name:'jeff2'} },
{ comment_id: 5, user_id: 13, comment_date: "04-27", comment_content: "好看,已三连!", parent_id: null },
{ comment_id: 6, user_id: 21, comment_date: "04-26", comment_content: "你是机器猫的粉丝吗", parent_id: "4",userinfo:{name:'jeff4'},parent_user_info:{name:'jeff3'} },
{ comment_id: 7, user_id: 14, comment_date: "04-27", comment_content: "是的,我是机器猫的粉丝", parent_id: "6",userinfo:{name:'jeff5'},parent_user_info:{name:'jeff4'} },
{ comment_id: 10, user_id: 22, comment_date: "04-25", comment_content: "我也感觉蜡笔小新很好看2", parent_id: "1",userinfo:{name:'jeff2.2'}},
]
递归改造:
changeCommentData(data) {
function fn(temp) {
let arr1 = [];
for (var i = 0; i < data.length; i++) {
if (data[i].parent_id == temp) {
arr1.push(data[i]);
data[i].child = fn(data[i].comment_id);
}
}
return arr1;
}
return fn(null);
}
改造结果类似:
评论容器
<template>
<div class='com-com'>
<CommentParent :commentList='commentList' v-if='commentList.length'/>
</div>
</template>
<script>
import CommentParent from './commentParent'
export default {
name:'comment',
data(){
return{
commentList:[],
arr :[
{comment_id: 1, user_id: 43, comment_date: "04-23", comment_content: "蜡笔小新很好看!", parent_id: null,userinfo:{name:'jeff1'}},
{ comment_id: 2, user_id: 19, comment_date: "04-24", comment_content: "还不错哦!很好看", parent_id: null },
{ comment_id: 3, user_id: 17, comment_date: "04-25", comment_content: "我也感觉蜡笔小新很好看", parent_id: "1",userinfo:{name:'jeff2'} },
{ comment_id: 4, user_id: 14, comment_date: "04-26", comment_content: "我感觉机器猫更好看一点", parent_id: "3",userinfo:{name:'jeff3'},parent_user_info:{name:'jeff2'} },
{ comment_id: 5, user_id: 13, comment_date: "04-27", comment_content: "好看,已三连!", parent_id: null },
{ comment_id: 6, user_id: 21, comment_date: "04-26", comment_content: "你是机器猫的粉丝吗", parent_id: "4",userinfo:{name:'jeff4'},parent_user_info:{name:'jeff3'} },
{ comment_id: 7, user_id: 14, comment_date: "04-27", comment_content: "是的,我是机器猫的粉丝", parent_id: "6",userinfo:{name:'jeff5'},parent_user_info:{name:'jeff4'} },
{ comment_id: 10, user_id: 22, comment_date: "04-25", comment_content: "我也感觉蜡笔小新很好看2", parent_id: "1",userinfo:{name:'jeff2.2'}},
]
}
},
created() {
this.commentData();
},
methods:{
async commentData() {
this.commentList = this.changeCommentData(this.arr);
console.log(this.commentList);
},
changeCommentData(data) {
function fn(temp) {
let arr1 = [];
for (var i = 0; i < data.length; i++) {
if (data[i].parent_id == temp) {
arr1.push(data[i]);
data[i].child = fn(data[i].comment_id);
}
}
return arr1;
}
return fn(null);
}
},
components:{
CommentParent
}
}
</script>
<style scoped>
</style>
一级评论和二级评论,无@直接v-for渲染
<template>
<div class='coms'>
<div class='com' v-for='(item,index) in commentList' :key='index'>
<!-- 一级评论 -->
<div class='com-img'>
<!-- <img :src="item.userinfo.user_img" alt=""> -->
</div>
<div class='com-info'>
<div class='com-det'>
<span v-if='item.userinfo'>{{item.userinfo.name}}</span>
<span>{{item.comment_date}}</span>
</div>
<div class='com-cont' v-if='item.comment_content'>{{item.comment_content}}</div>
<div class='com-cont' v-else>你好帅你好帅你好帅你好帅</div>
<!-- 二级评论,无@,二级之后有 -->
<div v-for='(item2,index2) in item.child' :key='index2'>
<div class='sub-com'>
<p>
<span class='sub-name'>{{item2.userinfo.name}}</span>
<span>{{item2.comment_content}}</span>
<!-- <span>{{item2.child}}</span> -->
</p>
<!-- 二级之后递归组件 -->
<CommentThree :child='item2.child'/>
</div>
</div>
<!-- 二级评论空随便渲染的数据 -->
<div v-if='!item.child.length'>
<div class='sub-com'>
<p>
<span class='sub-name'>彭于晏</span>
<span >是吴彦祖吗是吴彦祖吗是吴彦祖吗</span>
</p>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import CommentThree from './commentThree'
export default {
name:'cp',
props:['commentList'],
data(){
return{
}
},
methods:{
},
mounted()
{
console.log(this.commentList)
},
components:{
CommentThree
}
}
</script>
<style scoped>
.com{
display: flex;
border-bottom: solid 1px #ccc;
padding-bottom: 5vw;
margin-top: 10px;
}
.com-img{
text-align: center;
}
.com-img>img{
width: 30px;
height: 30px;
border-radius: 30px;
margin-right: 2vw;
}
.com-det{
display: flex;
color:#6D758A;
justify-content: space-between;
font-size:3.46667vw;
}
.com-info{
width: 100%;
}
.com-cont{
font-size: 3.46667vw;
color: #212121;
white-space: pre-line;
word-break: break-word;
}
.sub-com{
padding:10px 10px;
background-color: #F4F4F4;
}
.sub-com>p{
margin-top: 0;
}
.sub-name{
color: #5090cc;
word-break: break-all;
margin-right: 3vw;
}
.sub-cont{
word-break: break-all;
}
</style>
递归组件:
<template>
<div>
<div v-for='(item,index) in child' :key='index'>
<span style='color:#5090cc'>{{item.userinfo.name}} 回复 @{{item.parent_user_info.name}}</span>
<span>{{item.comment_content}}</span>
<!-- 递归组件 -->
<ct :child='item.child'/>
</div>
</div>
</template>
<script>
export default {
name:'ct',
props:['child'],
data(){
return{
}
},
mounted()
{
console.log(this.child);
}
}
</script>
<style scoped>
</style>
效果图:
