0.1.0 • Published 3 years ago
iview-comment-tree v0.1.0
安装
npm install iview-comment-tree
使用
//main.js
import ViewUI from "view-design";
import IViewCommentTree from "../index";
Vue.use(ViewUI);
Vue.use(IViewCommentTree);
或
<template>
<div id="app">
<iview-comment-tree
class="middle"
:comments="comments"
@on-comment="reply"
/>
</div>
</template>
<script>
import IviewCommentTree from "iview-comment-tree";
export default {
name: "App",
components: {
IviewCommentTree
},
}
</script>
Props
属性 | 描述 | 类型 | 接受值 | 默认值 |
---|---|---|---|---|
pageSize | 每页评论数 | Number | 正整数 | 10 |
defaultPlaceholder | 默认placeholder | String | - | "写下你的评论" |
RenderTime | 时间渲染函数 | Function | 参数为Date,返回值为字符串的函数 | 默认渲染函数 |
comments | 评论数组树 | Array | 见comment | 演示默认值 |
avatarSize | 头像大小 | String或Number | 可选为 large、small、default或具体数字 | "small" |
comments
属性 | 描述 | 类型 | 接受值 |
---|---|---|---|
username | 用户名 | String | - |
content | 评论内容 | String | - |
CreateTime | 日期 | Date | - |
ReplyComments | 评论数组树 | Array | comments,可空 |
avatar | 头像 | String | 一个指向图片的url |
event
事件名 | 说明 | 返回值 |
---|---|---|
on-comment | 回复评论后的事件 | {content:评论内容,reply:所回复的评论的引用,若无则为null} |
示例
或者本地运行npm run serve
或者查看线上示例