这是我参与「第四届青训营 」笔记创作活动的第4天。
设计及实现思路
全部评论区域
设计思路
- 全部的评论信息存储到 comments 数组中 ，以二维数组的形式存储一级二级评论，通过双重循环分别遍历一级二级评论，二级评论挂载到一级评论的下方。
- 为一级评论绑定一个点击事件，当点击全部评论的任意区域且发布评论的输入框为空时，将按钮和边框隐藏。
- 为一级评论二级评论的点赞，回复图标添加点击事件，实现点击，回复功能。
实现思路
-
编写前端页面
全部评论{{item.name}}{{item.comment}}{{item.like}}{{item.commentNum}}{{reply.from}}回复{{reply.to}}{{reply.comment}}{{reply.like}}回复</div> </div>
全部评论区域共分为两大部分，一级评论区和二级评论区，根据 data 中存储的数据结构，通过 v-for 进行渲染，
一级评论和二级评论的结构大致相同，区别在于二级评论会在评论人名称的后面显示被评论人名称。
-
为整个全部评论区域绑定一个点击事件，当点击全部评论区域时，执行 UnShowReplyBtnOne 方法，对发布评论区域的输入框进行判定，决定是否隐藏发布评论按钮。
-
通过 v-for 循环遍历 comments 数组中存储的数据，获得的数据中包含一级二级评论信息，一级评论信息存储在数组中的各个对象中，二级评论信息存储在对象中的 reply 数组中，再通过 v-for 循环遍历 reply 数组 即可获取，详细请见前端代码和数据结构代码。
-
为一级二级评论区域的回复图标添加一个点击事件，点击回复图标执 showReplyInput(i,name,id) 方法，传入参数分别为当前一级评论的位置 i ，被点击二级评论的用户名和用户ID name，id。将传入的数据存储到对应位置，并根据传入的 i 关闭上一个回复输入框
-
为一级二级评论区域的点赞图标添加一个点击事件，点击点赞图标直接增加点赞数，（注：想要其他效果可以自行更改，这里就不详细讲解了）。
-
实现评论区域功能相关的 methods
在评论区输入框为空且点击全部评论区域时,隐藏发布按钮 UnShowReplyBtnOne(){ if (!this.commentThis.replyComment && this.commentThis.btnShow){ this.commentThis.btnShow = false var richInput = document.getElementsByClassName('input-box')[0]; richInput.style.border = "2px solid #fff" } },
当点击全部评论区域时，执行 UnShowReplyBtnOne() 方法，判断 数据replyComment 中是否有数据并且判断 数据btnShow 是否为 true，若 数据replyComment 为空，且 数据btnShow 为true，证明发布评论区的输入框为空且输入框获得焦点，发布评论按钮显示，然后将 btnShow 改为 false，隐藏按钮，并将输入框的边框颜色改为白色。
showReplyInput(i, name, id) {
//关闭上一个评论的输入框
this.commentThis.comments[this.commentThis.index].inputShow = false
//将当前边框返回
this.commentThis.index = i
this.commentThis.comments[i].inputShow = true
this.commentThis.to = name
this.commentThis.toId = id
},
当点击回复图标时，执行 showReplyInput(i, name, id) 方法，首先根据数据 index 获取到上一个回复框的位置，并将数据inputShow 改为 false ，将上一个回复框隐藏。然后将传入的参数 i ，name ，in ，分别存入 到回复数据 index ，to，toId 中，然后根据传入 的参数 i 将回复框显示到对应的一级评论中的二级评论列表的最后，即将inputShow改为true。
