Vue含表情评论回复组件

一、评论回复组件效果

使用vue开发一款精美实用的评论回复组件，并包含emoji表情包，整体效果如下

文本框获取焦点时弹出Emoji表情按钮、发送和取消按钮，如下图

点击Emoji表情即可弹出表情包，如下图

二、使用

1、使用下面命令下载hbl-comment组件

npm i bright-comment

2、下载完成之后在项目中引入

import comment from 'bright-comment'
components:{
  comment
},

3、使用

 <comment></comment>

4、如果没有下载element-ui的使用下面命令进行下载

npm i element-ui -S

5、下载完成后在main.js中引入

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI);

三、属性及事件

1、props属性

名称	类型	说明	默认值
avatar	String	头像	空
placeholder	String	文本框提示内容	在此输入评论内容...
minRows	Number	文本框最小行数	4
maxRows	Number	文本框最大行数	8
commentNum	Number	评论条数	2
authorId	Number	当前登录用户id	1
label	String	标签名	作者
commentWidth	String	文本框宽度	80%
commentList	Array	评论列表	包含内容较多，此处略

评论列表commentList 包含多个评论comment，关于comment相关字段如下：

2、comment包含字段

名称	类型	说明
id	Number	评论id
commentUser	Object	评论用户
targetUser	Object	被评论用户
content	String	评论内容
createDate	String	评论时间
childrenList	Array	子评论列表

3、用户包含字段

名称	类型	说明
id	Number	用户id
nickName	String	用户昵称
avatar	String	用户头像

4、事件Events

名称	说明	参数
doSend	初始文本框发送事件	评论内容
doChidSend	评论列表中文本框发送事件	评论内容,被评论用户id,父级评论id