b站评论功能(一级评论到n级)

叁歲伎倆 2021-07-24 22:39 456阅读 0赞

一二级评论无@显示,所以可以直接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);
        }

改造结果类似:  
![在这里插入图片描述][202008102043291.png]  
评论容器

<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'>
             
         </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>
                        
                    </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>

效果图:  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70]

[202008102043291.png]: /images/20210724/d4a72d38d11d46b184bbfae841b27108.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70]: /images/20210724/833ac78c712b41c280132e8a273a9ded.png