{"id":18304171,"url":"https://github.com/konglingwen94/message-tree","last_synced_at":"2025-04-05T15:31:11.323Z","repository":{"id":40857090,"uuid":"240633562","full_name":"konglingwen94/message-tree","owner":"konglingwen94","description":":speech_balloon:A comment message  component based on Vue","archived":false,"fork":false,"pushed_at":"2023-01-05T07:23:01.000Z","size":2342,"stargazers_count":15,"open_issues_count":27,"forks_count":6,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-03-21T06:33:26.541Z","etag":null,"topics":["comment","message","message-tree","reply","tree"],"latest_commit_sha":null,"homepage":"https://konglingwen94.github.io/message-tree/examples/index.html","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/konglingwen94.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-02-15T02:38:05.000Z","updated_at":"2025-01-10T05:45:17.000Z","dependencies_parsed_at":"2023-02-03T18:01:53.943Z","dependency_job_id":null,"html_url":"https://github.com/konglingwen94/message-tree","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/konglingwen94%2Fmessage-tree","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/konglingwen94%2Fmessage-tree/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/konglingwen94%2Fmessage-tree/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/konglingwen94%2Fmessage-tree/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/konglingwen94","download_url":"https://codeload.github.com/konglingwen94/message-tree/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247358551,"owners_count":20926242,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["comment","message","message-tree","reply","tree"],"created_at":"2024-11-05T15:28:02.323Z","updated_at":"2025-04-05T15:31:08.322Z","avatar_url":"https://github.com/konglingwen94.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# message-tree\n\nGeneral use comments list component based on Vue\n\n## Live Demo\n\n[点击查看](https://konglingwen94.github.io/message-tree/examples/index.html)\n\n## ScreenShots\n\n![message-tree](/screenshots/1.gif)![message-tree](/screenshots/2.gif)\n\n## Install\n\n```\nnpm install message-tree --save-dev\n```\n\n## Usage\n\n### Global Registration component\n\n```javascript\nimport Vue from 'vue'\nimport MessageTree from 'message-tree'\n\nVue.use(MessageTree)\n```\n\n### Writing in single file\n\n```HTML\n\u003ctemplate\u003e\n  \u003cdiv class=\"message-container\"\u003e\n    \u003cmessage-tree :data-list=\"dataList\"\u003e\n      \u003c!-- default slots of comment-editor --\u003e\n\n    \u003c/message-tree\u003e\n  \u003c/div\u003e\n\n\u003c/template\u003e\n\n\u003cscript\u003e\nexport default {\n  data(){\n    return {\n      dataList:[\n  {\n    \"thumbupCount\": 4,\n    \"email\": \"email@sina.com\",\n    \"nickname\": \"nickname\",\n    \"content\": \"message\",\n    \"createdAt\": \"2020-02-29T03:57:51.466Z\",\n    \"updatedAt\": \"2020-02-29T10:37:39.238Z\",\n    \"id\": \"5e59e13f961db51ad45c9ebb\",\n    \"children\": []\n  },\n  {\n    \"thumbupCount\": 0,\n    \"email\": \"email@sina.com.cn\",\n    \"nickname\": \"昵称二\",\n    \"content\": \"这是第二个留言\",\n    \"createdAt\": \"2020-03-23T06:23:15.952Z\",\n    \"updatedAt\": \"2020-03-23T06:23:15.952Z\",\n    \"id\": \"5e7855d3ffbc160b9c2d3098\",\n    \"children\": [\n      {\n        \"thumbupCount\": 0,\n        \"email\": \"email@sina.com\",\n        \"nickname\": \"昵称\",\n        \"content\": \"这是一条回复\",\n        \"parentID\": \"5e7855d3ffbc160b9c2d3098\",\n        \"createdAt\": \"2020-03-23T06:23:37.972Z\",\n        \"updatedAt\": \"2020-03-23T06:23:37.972Z\",\n        \"id\": \"5e7855e9ffbc160b9c2d3099\",\n        \"children\": [\n          {\n            \"thumbupCount\": 0,\n            \"email\": \"email@sina.com\",\n            \"nickname\": \"昵称1\",\n            \"content\": \"这是一条@昵称的回复\",\n            \"parentID\": \"5e7855e9ffbc160b9c2d3099\",\n            \"createdAt\": \"2020-03-23T06:24:00.857Z\",\n            \"updatedAt\": \"2020-03-23T06:24:00.857Z\",\n            \"id\": \"5e785600ffbc160b9c2d309a\",\n            \"children\": []\n          },\n          \n        ]\n      }\n    ]\n  }\n]\n\n    }\n  }\n}\n\u003c/script\u003e\n\n\n\n```\n\n## Component Props\n\n|       Field        |        Type        |     Description      | Default |\n| :----------------: | :----------------: | :------------------: | :-----: |\n|      dataList      | Array\u003cCommentData\u003e |   用户评论列表数组   |   []    |\n|    renderLayer     |      Nunmber       | 渲染消息树的结构层级 |    2    |\n| defaultExpandLayer |       Number       | 消息树默认展开的层级 |    2    |\n\n### CommentData\n\n|    Field     |        Type        |                                     Description                                      |\n| :----------: | :----------------: | :----------------------------------------------------------------------------------: |\n|   nickname   |       String       |                                       用户昵称                                       |\n|   content    |       String       |                                       留言内容                                       |\n| thumbupCount |       Number       |                                       点赞个数                                       |\n|   parentID   |       String       | 所回复的评论 ID（当更改 renderLayer 字段的值时，组件内部根据此字段自动处理数据结构） |\n|   children   | Array\u003cCommentData\u003e |                                   评论消息的子评论                                   |\n\n## Component Events\n\n|     Name      |              Description               | Parameters  |\n| :-----------: | :------------------------------------: | :---------: |\n| tree-expanded | 单个评论切换其回复列表的展开状态时触发 | CommentData |\n|  on-thumbup   |             用户点赞时触发             | commentData |\n|   on-reply    |           点击回复按钮时触发           | commentData |\n\n## Component Methods\n\n|     Name     |  Description   | Parameters |\n| :----------: | :------------: | :--------: |\n| removeEditor | 移除评论编辑器 |     --     |\n|  hideEditor  | 隐藏评论编辑器 |     --     |\n|  showEditor  | 显示评论编辑器 |     --     |\n\n## Component slots\n\n|  Name   |    Description     |                                  Default                                  |\n| :-----: | :----------------: | :-----------------------------------------------------------------------: |\n| default | 默认评论编辑器插槽 | [组件默认编辑器](https://github.com/konglingwen94/comment-message-editor) |\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkonglingwen94%2Fmessage-tree","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkonglingwen94%2Fmessage-tree","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkonglingwen94%2Fmessage-tree/lists"}