项目实训记录（9周）

---

前言

这周主要开发了学生端讨论区域的构建

---

一、学生端讨论区功能构想

我希望这个讨论区的讨论分为两级，二级讨论是跟在一级讨论后面的回复，相当于从属于1级讨论。这里我不想针对2级讨论再做回复，因为如果这样的话，那就永远没有止境了。也就是发表1级讨论的相当于楼主，发表2级讨论的相当于在2级讨论后面盖楼。

二、学生端讨论区前端页面部分代码

<template>
  <div>
    <div v-if="class_id"  v-clickoutside="hideReplyBtn" @click="inputFocus" class="my-reply ">
      <el-avatar class="header-img" :size="40" :src="myHeader"></el-avatar>
      <div class="reply-info" >
        <div
            tabindex="0"
            contenteditable="true"
            id="replyInput"
            spellcheck="false"
            placeholder="我想问..."
            class="reply-input"
            @focus="showReplyBtn"
            @input="onDivInput($event)"
        >
        </div>
      </div>
      <div class="reply-btn-box" v-show="btnShow">
        <el-button class="reply-btn" size="medium" @click="sendComment" type="primary">提问</el-button>
      </div>
    </div>
    <div v-for="(item,i) in comments" :key="i" class="author-title reply-father">
      <el-avatar class="header-img" :size="40" :src="item.headImg"></el-avatar>
      <div class="author-info">
        <span class="author-name">
          {{item.name}}
        </span>
        <span class="author-time">
          {{item.submit_time}}
        </span>
      </div>


      <el-row class="icon-btn">
        <el-col :span="8">
          <span @click="showReplyInput(i,item.name,item.sid)"><i class="iconfont el-icon-s-comment"></i></span>
        </el-col>
        <el-col :span="8">
          <i @click="_reply_box_Show2(i)" class="iconfont el-icon-arrow-down"></i>
        </el-col>
      </el-row>



      <div class="talk-box">


        <div class="reply" >{{item.content}}</div>

      </div>

      <!--这是我下面的输入框 -->
      <div  v-show="_inputShow(i)"  class="my-reply my-comment-reply">

        <!-- 下面输入框的头像 -->
        <el-avatar class="header-img" :size="40" :src="myHeader"></el-avatar>

        <!-- 下面输入框的内容区域 -->
        <div class="reply-info" >
          <div tabindex="0" contenteditable="true" spellcheck="false" placeholder="输入评论..."   @input="onDivInput($event)"  class="reply-input reply-comment-input"></div>
        </div>

        <!-- 下面输入框的按钮 -->
        <div  class=" reply-btn-box">
          <el-button class="reply-btn" size="medium" @click="sendCommentReply0(i)" type="primary">发表评论</el-button>
        </div>
      </div>



      <!-- 这是2级评论展示了 -->
      <div class="reply-box" v-show="_reply_box_Show(i)">
        <div v-for="(reply,j) in item.reply" :key="j" class="author-title">

          <!-- 这是2级评论的头像 -->
          <el-avatar class="header-img" :size="40" :src="reply.fromHeadImg"></el-avatar>

          <!-- 这是2级评论的两行信息 -->
          <div class="author-info">
            <span class="author-name">{{reply.from}}</span>
            <span class="author-time">{{reply.submit_time}}</span>
          </div>

          <!-- 这是2级评论的按钮信息 -->


          <!-- 这是2级评论的具体内容 -->
          <div class="talk-box">
            <p>
            <div class="reply">回复 {{reply.to}}:{{reply.comment}}</div>


          </div>

          <!-- 这是2级评论的输入框-->
          <div  v-show="_inputShow2(i,j)"  class="my-reply my-comment-reply">

            <el-avatar class="header-img" :size="40" :src="myHeader"></el-avatar>

            <div class="reply-info" >
              <div tabindex="0" contenteditable="true" spellcheck="false" placeholder="输入评论..."   @input="onDivInput($event)"  class="reply-input reply-comment-input"></div>
            </div>

            <div  class=" reply-btn-box">
              <el-button class="reply-btn" size="medium" @click="sendCommentReply(i,j)" type="primary">发表评论</el-button>
            </div>

          </div>


        </div>

      </div>




    </div>
  </div>
</template>

三、页面展示

在上图中，第一个输入框就是学生发表1级评论的地方，第二个输入框是学生发布二级评论的地方

上图显示了一个展开二级评论的功能，深色区域就相当于在盖楼。