vue + element-ui + scss 仿简书评论模块

一、前言

最近开发项目需要用到评论模块，参考了多家平台，对比之后觉得简书的最漂亮，就它了。

前端当然要先放图

简书原图

注意评论的输入框默认是隐藏的，点击回复才会显示出来

本篇文章实现的效果

同样输入框需要点击回复才会显示

二、功能分析

从 UI 上看，整个评论模块大致分为四个版块

1. 评论人信息。包括头像，昵称，评论时间
2. 评论的内容。包括文字内容，赞的个数和回复按钮
3. 他人的回复。回复可能有多条，所以这是个 v-for 循环。回复包括回复人及被回复人的昵称，回复内容，时间，以及回复按钮
4. 评论输入框。输入框最开始是隐藏的，点击回复按钮或添加新评论时才会显示，点取消隐藏。

回复功能可以回复当前评论本身，也可以回复其他用户对这条评论的评论，我们称之为子评论。所有子评论都挂载最初的父评论下。

当点击子评论的回复按钮时，输入框弹出的同时会自动填上 @ + 被回复者的昵称，使逻辑更加合理。

点击添加新评论是添加对本条评论的子评论，不是对文章的新评论，所以文章末尾处应该还有一个输入框，用来发表新评论。

三、数据结构设计

参照的效果图有了，接下来就是设计数据了。数据库设计就不在这里说了，本项目把评论模块分了两张表，分别存放评论和回复。新建一个 mockdata.js 文件，模拟服务器返回的数据

//模拟评论数据
const comment = {
  status: "成功",
  code: 200,
  data: [
    {
      id: 'comment0001', //主键id
      date: '2018-07-05 08:30',  //评论时间
      ownerId: 'talents100020', //文章的id
      fromId: 'errhefe232213',  //评论者id
      fromName: '犀利的评论家',   //评论者昵称
      fromAvatar: 'http://ww4.sinaimg.cn/bmiddle/006DLFVFgy1ft0j2pddjuj30v90uvagf.jpg', //评论者头像
      likeNum: 3, //点赞人数
      content: '非常靠谱的程序员',  //评论内容
      reply: [  //回复，或子评论
        {
          id: '34523244545',  //主键id
          commentId: 'comment0001',  //父评论id，即父亲的id
          fromId: 'observer223432',  //评论者id
          fromName: '夕阳红',  //评论者昵称
          fromAvatar: 'https://wx4.sinaimg.cn/mw690/69e273f8gy1ft1541dmb7j215o0qv7wh.jpg', //评论者头像
          toId: 'errhefe232213',  //被评论者id
          toName: '犀利的评论家',  //被评论者昵称
          toAvatar: 'http://ww4.sinaimg.cn/bmiddle/006DLFVFgy1ft0j2pddjuj30v90uvagf.jpg',  //被评论者头像
          content: '赞同，很靠谱，水平很高',  //评论内容
          date: '2018-07-05 08:35'   //评论时间
        },
        {
          id: '34523244545',
          commentId: 'comment0001',
          fromId: 'observer567422',
          fr