评论回复组件库的使用

<template>
  <!-- 
   属性及事件详情详见 https://github.com/wanglinyong/hbl-comment
 -->
  <div>
    <comment
      :commentList="commentList"
      @doSend="sendContent"
      @doChidSend="childSend"
      :commentNum="commentList.length"
    />
  </div>
</template>

<script>
import comment from "hbl-comment";
export default {
  components: {
    comment,
  },
  data() {
    /**
     * commentList中对象的id以当前commentList的长度+1依次增长，
     * childrenList中对象的id以父级id开头拼上当前childrenList长度+1一次增长
     */
    return {
      // commentList: [
      //   {
      //     id: 11,
      //     commentUser: {
      //       id: "222",
      //       nickName: "果子",
      //       avatar:
      //         "https://ae01.alicdn.com/kf/H94c78935ffa64e7e977544d19ecebf06L.jpg",
      //     },
      //     targetUser: {},
      //     content: "今天天气真好",
      //     createDate: "2021-9-6",
      //     childrenList: [
      //       {
      //         id: 21,
      //         commentUser: {
      //           id: "333",
      //           nickName: "弹过",
      //           avatar:
      //             "https://ae01.alicdn.com/kf/Hd60a3f7c06fd47ae85624badd32ce54dv.jpg",
      //         },
      //         targetUser: {
      //           id: "2221",
      //           nickName: "果子",
      //           avatar:
      //             "https://ae01.alicdn.com/kf/H94c78935ffa64e7e977544d19ecebf06L.jpg",
      //         },
      //         content: "[哈哈][可爱][可怜]",
      //         createDate: "2021-9-6",
      //       },
      //       {
      //         id: 22,
      //         commentUser: {
      //           id: "333",
      //           nickName: "gg过",
      //           avatar:
      //             "https://ae01.alicdn.com/kf/Hdd856ae4c81545d2b51fa0c209f7aa28Z.jpg",
      //         },
      //         targetUser: {
      //           id: "333",
      //           nickName: "弹过",
      //           avatar:
      //             "https://ae01.alicdn.com/kf/Hd60a3f7c06fd47ae85624badd32ce54dv.jpg",
      //         },
      //         content: "[哈哈][可爱][可怜]",
      //         createDate: "2021-9-6",
      //       },
      //     ],
      //   },
      // ],
      commentList: [],
    };
  },

  mounted() {
    console.log(JSON.parse(localStorage.getItem("userInfo")));
  },

  methods: {
    sendContent(val, isFather) {
      let userInfo = JSON.parse(localStorage.getItem("userInfo"));
      //初始文本框发送事件只有一个参数，因此第二个参数为undefined
      if (isFather === undefined) {
        this.commentList.push({
          id: this.commentList.length + 1,
          commentUser: {
            id: userInfo.id,
            nickName: userInfo.username,
            avatar:
              "https://ae01.alicdn.com/kf/H94c78935ffa64e7e977544d19ecebf06L.jpg",
          },
          targetUser: {},
          content: val,
          createDate: "2021-9-6",
          childrenList: [],
        });
      }
    },

    childSend(content, commentUserId, pid) {
      // 评论列表中文本框发送事件有三个参数，分别为：评论内容,被评论用户id,父级评论id
      this.commentList.map((item, index) => {
        if (item.id === pid) {
          this.commentList[index].childrenList.push({
            id: `${pid}${this.commentList[index].childrenList.length + 1}`,
            commentUser: {
              id: "333",
              nickName: "弹过",
              avatar:
                "https://ae01.alicdn.com/kf/Hd60a3f7c06fd47ae85624badd32ce54dv.jpg",
            },
            targetUser: {
              id: "222",
              nickName: "果子",
              avatar:
                "https://ae01.alicdn.com/kf/H94c78935ffa64e7e977544d19ecebf06L.jpg",
            },
            content: content,
            createDate: "2021-9-6",
          });
        }
      });
    },
  },
};
</script>
<style scoped></style>