Vue实现评论功能

实现评论功能最开始确实是令我头疼的一件时间，因为不确定评论的字数，就要自适应高度，还不确定评论的层级，这看起来就很令人头疼。评论功能麻烦在于它是由层次的，有不停的回复功能，这点是令人比较头疼的地方，我在写这个功能的时候做了比较笨的一个方法去处理它。

我先选择了布局页面，先把页面布局好以后在去想怎么发表评论怎么回复评论一起渲染不确定层次的评论内容。

1、布局页面

 想要实现以上布局方式，我在这个地方采取了flex布局， 让他自己去撑开盒子，这样就实现了高度自适应的一个方式，我在每一条评论内容下面隐藏一个评论发表框，这样点击评论的时候出现当前评论下面的评论框，点击下一个评论内容的评论时利用排他思想隐藏了其他评论框显示当前点击的评论框，其实每个评论框的内容都是用的一个变量接收的，但是当我在点击下一条评论或者发表评论后有做一个清空接收评论变量的一个操作，具体的布局代码如下所示：

<div style="letter-spacing: 1px">
    <div class="head">
      <!-- 评论区域如果当前用户有头像则显示头像,没有则显示默认头像 -->
      <img v-if="picture" :src="`http://` + picture" alt="" />
      <img v-else src="../../assets/头像.jpg" alt="" />
      <!-- 评论框 -->
      <input
        type="text"
        placeholder="请输入评论 . . ."
        ref="input"
        @focus="obtain"
        @blur="lose"
        v-model="firstComments"
        @keyup.enter="sumbit"
      />
      <!-- 发布按钮 -->
      <button @click="sumbit">发表评论</button>
    </div>
    <div class="content">
      <!-- 一级评论 -->
      <div class="first" v-for="(item, index) in comments" :key="index">
        <a href="javascript:;" class="first-img">
          <!-- 如果当前用户有头像则显示头像,没有则显示默认头像 -->
          <!-- <img :src="`http://` + item.picture" /> -->
          <img v-if="item.picture" :src="`http://` + item.picture" alt="" />
          <img v-else src="../../assets/头像.jpg" alt="" />
        </a>
        <div class="first-content">
          <!-- 一级评论用户昵称 -->
          <h3 class="first-username">{
  { item.username }}</h3>
          <!-- 一级评论发布时间 -->
          <span class="first-time">{
  { item.date }}</span>
          <!-- 一级评论评论内容 -->
          <p class="first-comment">
            {
  { item.content }}
          </p>
          <!-- 一级评论评论点赞 -->
          <div
            class="first-right"
            @mouseleave="delete_leave(item)"
            @mouseover="delete_after(item)"
          >
            <span
              class="delete"
              v-if="item.delete"
              @click="comment_del