https://github.com/konglingwen94/message-tree
:speech_balloon:A comment message component based on Vue
https://github.com/konglingwen94/message-tree
comment message message-tree reply tree
Last synced: about 1 month ago
JSON representation
:speech_balloon:A comment message component based on Vue
- Host: GitHub
- URL: https://github.com/konglingwen94/message-tree
- Owner: konglingwen94
- Created: 2020-02-15T02:38:05.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2023-01-05T07:23:01.000Z (over 2 years ago)
- Last Synced: 2025-03-21T06:33:26.541Z (about 2 months ago)
- Topics: comment, message, message-tree, reply, tree
- Language: JavaScript
- Homepage: https://konglingwen94.github.io/message-tree/examples/index.html
- Size: 2.23 MB
- Stars: 15
- Watchers: 0
- Forks: 6
- Open Issues: 27
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# message-tree
General use comments list component based on Vue
## Live Demo
[点击查看](https://konglingwen94.github.io/message-tree/examples/index.html)
## ScreenShots
## Install
```
npm install message-tree --save-dev
```
## Usage
### Global Registration component
```javascript
import Vue from 'vue'
import MessageTree from 'message-tree'
Vue.use(MessageTree)
```
### Writing in single file
```HTML
export default {
data(){
return {
dataList:[
{
"thumbupCount": 4,
"email": "[email protected]",
"nickname": "nickname",
"content": "message",
"createdAt": "2020-02-29T03:57:51.466Z",
"updatedAt": "2020-02-29T10:37:39.238Z",
"id": "5e59e13f961db51ad45c9ebb",
"children": []
},
{
"thumbupCount": 0,
"email": "[email protected]",
"nickname": "昵称二",
"content": "这是第二个留言",
"createdAt": "2020-03-23T06:23:15.952Z",
"updatedAt": "2020-03-23T06:23:15.952Z",
"id": "5e7855d3ffbc160b9c2d3098",
"children": [
{
"thumbupCount": 0,
"email": "[email protected]",
"nickname": "昵称",
"content": "这是一条回复",
"parentID": "5e7855d3ffbc160b9c2d3098",
"createdAt": "2020-03-23T06:23:37.972Z",
"updatedAt": "2020-03-23T06:23:37.972Z",
"id": "5e7855e9ffbc160b9c2d3099",
"children": [
{
"thumbupCount": 0,
"email": "[email protected]",
"nickname": "昵称1",
"content": "这是一条@昵称的回复",
"parentID": "5e7855e9ffbc160b9c2d3099",
"createdAt": "2020-03-23T06:24:00.857Z",
"updatedAt": "2020-03-23T06:24:00.857Z",
"id": "5e785600ffbc160b9c2d309a",
"children": []
},
]
}
]
}
]
}
}
}
```
## Component Props
| Field | Type | Description | Default |
| :----------------: | :----------------: | :------------------: | :-----: |
| dataList | Array | 用户评论列表数组 | [] |
| renderLayer | Nunmber | 渲染消息树的结构层级 | 2 |
| defaultExpandLayer | Number | 消息树默认展开的层级 | 2 |
### CommentData
| Field | Type | Description |
| :----------: | :----------------: | :----------------------------------------------------------------------------------: |
| nickname | String | 用户昵称 |
| content | String | 留言内容 |
| thumbupCount | Number | 点赞个数 |
| parentID | String | 所回复的评论 ID（当更改 renderLayer 字段的值时，组件内部根据此字段自动处理数据结构） |
| children | Array | 评论消息的子评论 |
## Component Events
| Name | Description | Parameters |
| :-----------: | :------------------------------------: | :---------: |
| tree-expanded | 单个评论切换其回复列表的展开状态时触发 | CommentData |
| on-thumbup | 用户点赞时触发 | commentData |
| on-reply | 点击回复按钮时触发 | commentData |
## Component Methods
| Name | Description | Parameters |
| :----------: | :------------: | :--------: |
| removeEditor | 移除评论编辑器 | -- |
| hideEditor | 隐藏评论编辑器 | -- |
| showEditor | 显示评论编辑器 | -- |
## Component slots
| Name | Description | Default |
| :-----: | :----------------: | :-----------------------------------------------------------------------: |
| default | 默认评论编辑器插槽 | [组件默认编辑器](https://github.com/konglingwen94/comment-message-editor) |