原生js手写评论功能（仅支持评论记录的渲染）

最新推荐文章于 2024-03-26 16:17:24 发布

失去才懂得

最新推荐文章于 2024-03-26 16:17:24 发布

阅读量378

点赞数 9

文章标签： javascript css 前端

本文链接：https://blog.csdn.net/qq_51795337/article/details/136474524

版权

由于市面上很多原生js的评论插件多存在局限性，且公司需要，所以我用原生js做了个评论聊天记录的展示，以下代码仅供参考，可在此基础上修改。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

  <head>
    <style>
      body {
        background-color: #eee;
      }

      #bim_comments {
        border-radius: 5px;
        background-color: #fff;
        width: 50%;
        margin: 100px auto;
        display: flex;
        justify-content: center;
      }

      #bim_comments .content {
        width: 100%;
        padding: 20px;
      }

      #bim_comments .comments-item {
        width: 100%;
        padding: 10px 30px 0 30px;
        box-sizing: border-box;
        overflow: hidden;
      }

      #bim_comments .user_info {
        display: flex;
        justify-content: center;
      }

      #bim_comments .user_info .avatar img {
        border-radius: 50%;
        width: 50px;
        height: 50px;
        margin-right: 20px;
      }

      #bim_comments .comments-item .top {
        display: flex;
        justify-content: space-between;
        align-items: center;
      }

      #bim_comments .comments-item .bottom {
        padding-left: 70px;
      }

      #bim_comments .comments-item .head {
        display: flex;
        align-items: center;
      }

      #bim_comments .comments-item .content {
        max-width: 200px;
        display: flex;
        word-break: break-all;
      }
      #bim_comments .comments-item .reply{
        margin-right:5px;
      }
      #bim_comments .comments-item .name {
        color: #295c9d;
        margin-right: 5px;
      }

      #bim_comments .comments-item .time {
        color: rgb(128, 128, 128);
        margin-left: 15px;
      }

      p {
        margin: 0;
      }
      .second_comments_list{
        padding:20px 0px 0 70px !important;
      }
    </style>
  </head>

<body>

  <script>
    const arr = [
      {
        comment_id: '23efce23ddf',
        userName: '黎明',
        avatar: 'https://img.51miz.com/Element/00/75/21/30/5932cb1c_E752130_e013e9f4.jpg',
        comment_time: '2024-10-10 12:20',
        comment_content: '<p>破碎的vvsw1111111111</p>',
        children:[
          {
          comment_id: '23e344444sdgf',
          reply_id:'23efce23ddf',
          userName: 'zou',
          avatar: 'https://qlogo1.store.qq.com/qzone/1430271732/1430271732/30?1707578984',
          comment_time: '2024-10-10 12:20',
          comment_content: `<p>
            破碎的vvsw1111111111
            </p>
            <a href="javascript:;" title="点击查看原图">
              <img src="https://img.zcool.cn/community/014e485d6ba1dea801211f9e3e209a.jpg@2o.jpg" style="width:200px"/>  
            </a>
          `,
         },
         {
          comment_id: 'rtyrtysdgfrty',
          reply_id:'rtyrtysdgfrty',
          userName: '辉',
          avatar: 'https://qlogo1.store.qq.com/qzone/1430271732/1430271732/30?1707578984',
          comment_time: '2024-10-10 12:20',
          comment_content: `<p>
            破碎的vvsw1111111111
            </p>
            <a href="javascript:;" title="点击查看原图">
              <img src="https://img.zcool.cn/community/014e485d6ba1dea801211f9e3e209a.jpg@2o.jpg" style="width:200px"/>  
            </a>
          `,
         },
         {
          comment_id: 'rtyrtyrt48',
          reply_id:'rtyrtysdgfrty',
          userName: 'zou',
          avatar: 'https://img.zcool.cn/community/0101195543065f0000019ae94cc470.jpg@3000w_1l_0o_100sh.jpg',
          comment_time: '2024-10-10 12:20',
          comment_content: `<p>
            破碎的vvsw1111111111
            </p>
            <a href="javascript:;" title="点击查看原图">
              <img src="https://tse1-mm.cn.bing.net/th/id/OIP-C.7KW5GT7NQ8yUGlBbCHEm0gHaNK?rs=1&pid=ImgDetMain" style="width:200px"/>  
            </a>
          `,
         }
        ]
      },
      {
        comment_id: '12313424324',
        userName: '雪月花',
        avatar: 'https://img.zcool.cn/community/0101195543065f0000019ae94cc470.jpg@3000w_1l_0o_100sh.jpg',
        comment_time: '2024-10-10 12:20',
        comment_content: `你无敌了<image src="http://qzonestyle.gtimg.cn/qzone/em/e105.png"/>`,
        children:[
          {
          comment_id: 'wgergvb345',
          reply_id:'12313424324',
          userName: '杨润斌',
          avatar: 'https://qlogo1.store.qq.com/qzone/1430271732/1430271732/30?1707578984',
          comment_time: '2024-10-10 12:20',
          comment_content: '<p>破碎的vvsw1111111111</p>',
         }
        ]
      }
    ]
    renderComment(arr)

    function renderComment(comment) {
      document.body.innerHTML = `
         <div id="bim_comments">
            <div class="content">
                  ${arr.map((item,index) => {
                  return `
                          <div class="comments-item">
                             ${getSingleCommentNode(item,[index])}
                            <div class="second_comments_list comments-item">
                              ${item.children?
                                item.children.map((item2,index2)=>{
                                 return getSingleCommentNode(item2,[index,index2])
                                })
                                :''}
                             </div>
                          </div>  
                         `
          }).join('')
        }
             </div>
          <div class="">
      
          </div>
         </div>
       `
    }
    function getSingleCommentNode(comment,index) {
      return `
      <div class="top">
    <div class="user_info">
      <div class="avatar">
        <img src="${comment.avatar}" />
      </div>
      <div class="head">
        <div class="name">${comment.userName}</div>
        ${
          comment.reply_id&&byReplyIdGetResponseInfo(comment.reply_id,index)?
          `<div class="reply">回复</div>
          <div class="name">
          ${byReplyIdGetResponseInfo(comment.reply_id,index)}
          </div>`
          :''}
        <div class="time">${comment.comment_time}</div>
      </div>
    </div>
    <div class="operate">
      <a href="#" value="${index}">删除</a>
      <a href="#" value="${index}">回复</a>
    </div>
  </div>
  <div class="bottom">
    <div class="comments_content">
      ${comment.comment_content}
    </div>
  </div>
      `
    }
    function byReplyIdGetResponseInfo(id,index){
      console.log(index)
      var name=arr[index[0]].userName
      if(arr[index[0]].comment_id!=id){
        name=arr[index[0]].children.filter(item=>item.comment_id==id&&id!=arr[index[0]].children[index[1]].comment_id)[0]
        name=name&&name.userName?name.userName:''
      }
      return name
    }
  </script>
</body>

</html>