个人博客——添加评论区样式和评论回复

上篇文章完成了评论区一二级评论的展示，下面我们来添加评论区样式和对一二级评论的回复
需求：

• 一二级评论都展示评论人的头像、姓名、评论事件、评论内容，点击评论右上角的“回复”，则在对应评论下方弹出评论框填写评论。
• 一级评论中还展示拥有的二级评论总数
• 二级评论做成手风琴的效果，初始时收起，点击后展开
  思路：
• 使用两层循环，第一层读取一级评论并展示，如果一级评论中存在二级评- 论，则读取二级评论在第二层循环中展示。
• 使用element的Collapse 折叠面板组件实现二级评论的折叠展开效果。

评论区页面

评论页面代码如下

                  <el-card v-if="commentList && commentList.length != 0" style="margin-top: 50px;">
            <!-- 一级评论 -->
          <div class="comment" v-for="(comment,index) in commentList ">
            <el-row>
              <el-col class="avatar" :span="2">
                <el-avatar :size="40">
                 <img
                  src="https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png"/>
                </el-avatar>
              </el-col>
              <el-col :span="18">
                <el-row><span class="userName">{{ comment["userName"] }}</span></el-row>
                <el-row><span>{{ changeFormdate(comment["commentTime"]) }}</span></el-row>
              </el-col>
              <el-col :span="2">
                <el-icon><ChatLineSquare /></el-icon>
                <span class="childCount" v-if="comment.child != null">{{  Object.keys(comment.child).length}}</span>
                <span class="childCount" v-else>0</span>
              </el-col>
              <el-col :span="2">
                <el-button @click="replyInput = index">回复</el-button>
              </el-col>
            </el-row>
            <el-row class="commentContent">
              <span>{{ comment["commentContent"] }}</span>
            </el-row>
            <div v-if="replyInput == index"> 
              <el-input  
               v-model.trim="commentReply.commentContent"
               :rows="3"
                resize="none"
                type="textarea"
                placeholder="请输入评论"></el-input>
                <el-button 
                :disabled="!userMsg.userToken"
                style="margin-top: 10px;"
                @click="publishComment(comment.commentId)" >评论</el-button> 

            </div>
            <!-- 二级评论 -->
            <el-collapse v-if="comment.child != null" accordion>
              <el-collapse-item title="查看更多回复" :name="comment.commentId">
                <div class="commentChild" v-for="(childComment,childIndex) in comment.child">
                <el-row>
              <el-col class="avatar" :span="2">
                <el-avatar :size="40">
                 <img
                  src="https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png"/>
                </el-avatar>
              </el-col>
              <el-col :span="18">
                <el-row>
                  <span class="userName">{{ childComment["userName"] }}</span>
                  <template v-if="typeof comment.child[childComment.parentId] == 'object'">
                     <span class="replyText">回复</span>
                      <span class="userName"> {{ comment.child[childComment.parentId].userName }}</span>
                   </template> 
                </el-row>
                <el-row><span>{{ changeFormdate(childComment["commentTime"]) }}</span></el-row>
              </el-col>
              <el-col :span="2">
                <span style="cursor: pointer;" @click="replyInput = childIndex">回复</span>
              </el-col>
            </el-row>
            <el-row class="commentContent">
              <span>{{ childComment["commentContent"] }}</span>
            </el-row>
                  
                  <div v-if="replyInput == childIndex"> 
                    <el-input  
                     v-model.trim="commentReply.commentContent"
                     :rows="3"
                      resize="none"
                      type="textarea"
                      placeholder="请输入评论"></el-input>
                      <el-button 
                      :disabled="!userMsg.userToken"
                      style="margin-top: 10px;"
                      @click="publishComment(comment.commentId,childComment.commentId)" >评论</el-button> 

                  </div>
                  <el-divider />
                </div>
              </el-collapse-item>
            </el-collapse>
             <el-divider />
          </div>
        </el-card>

评论区样式

<style scoped>


.comment{
  padding: 10px;
 
}

.avatar {
}

.commentContent{
  margin-left: 70px;
}

.childCount{
  margin-left: 5px;
}

.userName{
  font-size: 16px;
  font-weight: bold;
}

.commentChild{
  margin-left: 70px;
}

.replyText{
  color: gray;
  height: 28px;
  line-height: 28px;
  vertical-align: middle;
  margin: 0 5px;
}
</style>

评论回复

/**
 * 评论
 */

const commentEnpty = reactive(new CommentClass());
const commentPublish = reactive(new CommentClass());
const commentReply = reactive(new CommentClass());
const replyInput = ref(-1);
const commentList =ref([] as any[])

//获取文章评论
const getPassageComment = ()=>{
   commentAPI.getPassageComment(passageId).then((res:any)=>{
    console.log(res);
    commentList.value = res.data;
   })
}

//发布评论
const publishComment = (rootParentId?:number,parentId?:number)=>{
  console.log( rootParentId == undefined && parentId == undefined)
  //在文章下发表评论
  if(rootParentId == undefined && parentId == undefined){
     console.log(commentPublish.commentContent)
      if(commentPublish.commentContent == '' ||commentPublish.commentContent ==  undefined){
        ElMessage.warning('评论不能为空');
        return
      }
       commentPublish.userId =userMsg.userId;
       commentPublish.passageId = passageId;
       commentAPI.addComment(commentPublish).then((res)=>{
         console.log(res);
         ElMessage.success(res.data as string);
         Object.assign(commentPublish,commentEnpty);
         console.log(commentPublish);
         getPassageComment();
       })
  }
  //在评论下回复评论
  else{
    if(commentReply.commentContent == '' ||commentReply.commentContent ==  undefined){
        ElMessage.warning('评论不能为空');
        return
      }
    if(commentReply.commentContent == ''){
        ElMessage.warning('评论不能为空');
        return
      }
      if(rootParentId != undefined){
      commentReply.rootParentId = rootParentId;
      }
      if(parentId != undefined){
        commentReply.parentId = parentId;
      }
       commentReply.userId =userMsg.userId;
       commentReply.passageId = passageId;
       console.log(commentReply);
       commentAPI.addComment(commentReply).then((res)=>{
         console.log(res);
         ElMessage.success(res.data as string);
         Object.assign(commentReply,commentEnpty);
         getPassageComment();
       })
  }
 


  
}

遇到的问题

因为每条评论下方都有评论框，使用一个变量replyInput 控制评论框的显示与否，如果将显示条件设置为 v-if="replyInput "，就存在点击回复一条评论时，所有评论的评论框都显示的问题。
解决方法
改成v-if=“replyInput == childIndex” 或 v-if=“replyInput == index”，这样就可以只在对应评论的下方显示评论框了。

参考文章

完成效果如下