vue + element-ui + scss 仿简书评论模块
一、前言
最近开发项目需要用到评论模块，参考了多家平台，对比之后觉得简书的最漂亮，就它了。
前端当然要先放图
简书原图
注意评论的输入框默认是隐藏的，点击回复才会显示出来
本篇文章实现的效果
同样输入框需要点击回复才会显示
二、功能分析
从 UI 上看，整个评论模块大致分为四个版块
- 评论人信息。包括头像，昵称，评论时间
- 评论的内容。包括文字内容，赞的个数和回复按钮
- 他人的回复。回复可能有多条，所以这是个 v-for 循环。回复包括回复人及被回复人的昵称，回复内容，时间，以及回复按钮
- 评论输入框。输入框最开始是隐藏的，点击回复按钮或添加新评论时才会显示，点取消隐藏。
回复功能可以回复当前评论本身，也可以回复其他用户对这条评论的评论，我们称之为子评论。所有子评论都挂载最初的父评论下。
当点击子评论的回复按钮时，输入框弹出的同时会自动填上 @ + 被回复者的昵称，使逻辑更加合理。
点击添加新评论是添加对本条评论的子评论，不是对文章的新评论，所以文章末尾处应该还有一个输入框，用来发表新评论。
三、数据结构设计
参照的效果图有了，接下来就是设计数据了。数据库设计就不在这里说了，本项目把评论模块分了两张表，分别存放评论和回复。新建一个 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',
fromName: '清晨一缕阳光',
fromAvatar: 'http://imgsrc.baidu.com/imgad/pic/item/c2fdfc039245d688fcba1b80aec27d1ed21b245d.jpg',
toId: 'observer223432',
toName: '夕阳红',
toAvatar: 'https://wx4.sinaimg.cn/mw690/69e273f8gy1ft1541dmb7j215o0qv7wh.jpg',
content: '大神一个！',
date: '2018-07-05 08:50'
}
]
},
{
id: 'comment0002',
date: '2018-07-05 08:30',
ownerId: 'talents100020',
fromId: 'errhefe232213',
fromName: '毒蛇郭德纲',
fromAvatar: 'http://ww1.sinaimg.cn/bmiddle/006DLFVFgy1ft0j2q2p8pj30v90uzmzz.jpg',
likeNum: 0,
content: '从没见过这么优秀的人',
reply: []
}
]
};
export {comment}
数据包裹在 data 中，评论可能有多条所以 data 是一个数组。每个字段的含义备注里写的很清楚了，不再过多解释。
所有关于母评论的子评论都挂载在母评论的 reply 字段下。
四、代码封装
新建 comment.vue 作为评论组件
![]()
{{item.fromName}}
{{item.date}}
{{item.content}}
{{item.likeNum > 0 ? item.likeNum + '人赞' : '赞'}}
回复
添加新评论
取消
确定
数据由使用的时候通过 comments 使用 props 传入。
布局用到了 Element-ui 的一些组件，组件的属性和方法请查看官方文档。
css 用了预处理器 SASS/SCSS 编写，$开头的为 SCSS 的变量，所有的颜色都放在了一个文件下，便于日后维护修改
$color-main: #409EFF;
$color-success: #67C23A;
$color-warning: #E6A23C;
$color-danger: #F56C6C;
$color-info: #909399;
$text-main: #303133;
$text-normal: #606266;
$text-minor: #909399; //次要文字
$text-placeholder: #C0C4CC;
$text-333: #333;
$border-first: #DCDFE6;
$border-second: #E4E7ED;
$border-third: #EBEEF5;
$border-fourth: #F2F6FC;
$content-bg-color: #fff
五、使用
封装完之后，就可以愉快的使用啦！
在需要使用的文件里，先将第三步模拟好的数据导入进来，再引入 comment 组件，再将模拟的数据赋值给组件的 :comments 属性。
只留下核心代码，则使用方法如下：