Skip to content

Latest commit

 

History

History
executable file
·
142 lines (111 loc) · 4.45 KB

README.md

File metadata and controls

executable file
·
142 lines (111 loc) · 4.45 KB

message-tree

General use comments list component based on Vue

Live Demo

点击查看

ScreenShots

message-treemessage-tree

Install

npm install message-tree --save-dev

Usage

Global Registration component

import Vue from 'vue'
import MessageTree from 'message-tree'

Vue.use(MessageTree)

Writing in single file

<template>
  <div class="message-container">
    <message-tree :data-list="dataList">
      <!-- default slots of comment-editor -->

    </message-tree>
  </div>

</template>

<script>
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": []
          },
          
        ]
      }
    ]
  }
]

    }
  }
}
</script>

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 默认评论编辑器插槽 组件默认编辑器