欢迎大家进群，一起探讨学习
微信公众号，每天给大家提供技术干货
vue评论回复组件
1.使用下面命令下载bright-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);
三、属性及事件
| 名称 | 类型 | 说明 | 默认值 |
|---|
| 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(content) | 初始文本框发送事件 | 评论内容 |
| doChidSend(content,bid,pid) | 评论列表中文本框发送事件 | 评论内容,被评论用户id,父级评论id |
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！
