1.2.3 • Published 6 years ago
hbl-comment v1.2.3
Vue含表情评论回复组件
一、评论回复组件效果
使用vue开发一款精美实用的评论回复组件，并包含emoji表情包，整体效果如下
文本框获取焦点时弹出Emoji表情按钮、发送和取消按钮，如下图
点击Emoji表情即可弹出表情包，如下图
二、使用
1、使用下面命令下载hbl-comment组件
npm i hbl-comment2、下载完成之后在项目中引入
import comment from 'hbl-comment'
components:{
comment
},3、使用
<comment></comment>4、如果没有下载element-ui的使用下面命令进行下载
npm i element-ui -S5、下载完成后在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 |