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>

效果图: