1.0.1 • Published 3 years ago
@mas.io/adc-evaluation v1.0.1
安装
tnpm install --save @alipay/adc-evaluation组件介绍
行业小程序评论组件。实现了评论系统在渲染层面的一套完整解决方案。 使用限制： 1. 暂不支持对二级评论的点赞。 2. ios下，由于小程序不能使textarea自动聚焦唤起键盘，因此在发送消息时的交互上有缺陷。
参数说明
| 属性 | 必填 | 参数类型 | 参数说明 | 默认值 | 示例 |
|---|---|---|---|---|---|
| comments | 是 | Object | 所有的评论数据。 | { total: 0, data: [] }, | 见详解 |
| mode | 否 | 'A' | 'B' | 'C' | 模式A：最简单的模式，完全根据comments的数据一次性全部渲染。此模式的demo在/demo/pages/index。 模式B：一级评论支持上拉分页加载。需要传onFetchComment数据加载方法配合使用。 模式C：在模式B的基础上，使二级评论的展开使用弹窗㫫示，并支持上拉分页加载。需要传onFetchChildComment数据加载方法配合使用 | 'A' | -- |
| article | 否 | Array | 主题相关数据。likesCount：点赞数，liked：本人是否点了赞，collected：本人是否点了收藏 | { likesCount: 0, liked: false, collected: false } | -- |
| user | 是 | Object | 用户（本人）的id和name | -- | { id: 123, name: 'XXXX' } |
| author | 是 | Object | 主题文章作者的id和name | -- | { id: 123, name: 'XXXX' } |
| messageConfig | 否 | Object | min设置回复消息的最小长度，max设置回复消息textarea的maxlength | { min: 1, max: -1 } | -- |
| childCommentFoldLimit | 否 | Number | 二级评论的折叠限度。超过以后会显“剩余X条回复” | 2 | -- |
| limit | 否 | Number | 分页请求每页条数 | 10 | -- |
| loadContent | 否 | Array | 加载时的底部提示 | '马不停蹄加载更多数据中...', '-- 已经到底了，加不了咯 --' | -- |
| autoScroll | 否 | Boolean | 插入新评论后，如果不在可视区域，是否自动滚动（mode B C生效） | true | -- |
| showComplain | 否 | Boolean | 底部选项弹窗是否显示投拆按钮 | true | -- |
| extraBottomOptions | 否 | Array | 底部选项弹窗可新增的自定义按钮 | [] | '复制', '转发' |
| footerIcons | 否 | Object | 底部输入框右侧的图标按钮显示配置。设为false则不显示 | { liked: true, collect: true, share: true } | -- |
| useDefaultFooterIcons | 否 | Boolean | 若要使用底部输入框右侧的图标的自定义插槽，需要设为false | true | -- |
| defaultPlaceholder | 否 | String | 底部输入框的默认placeholder | '说点什么…' | -- |
| className | 否 | String | 组件容器自定义类名 | -- | -- |
| onTapLikes | 否 | Function | 评论点赞事件。(commentId) => void; | null | -- |
| onUserTap | 否 | Function | 用户头像、名称点击事件。(user: Object) => void; user是comments中的相应user数据 | null | -- |
| onLoadMore | 否 | Function | 折叠的二级评论点击展开事件。(commentId) => void; | null | -- |
| onIconTap | 否 | Function | 底部输入框右侧的图标按钮点击事件。(type: 'likes' | 'collect' | 'share') => void; | null | -- |
| onSendMessage | 否 | Function | 新消息发送事件，成功后需返回新评论的id。(msgData: Object) => id; msgData包含：commentId: 回复评论的id。如果回复的是主题，为null。message: 回复内容。replyToAuthor: 回复对象的信息。replyType: 'author' | 'self' | 'others' | null | -- |
| onDelete | 否 | Function | 删除事件。只有自已的评论才能删除。删除成功后需返回true。(commentId, childCommentId) => boolean; | null | -- |
| onComplain | 否 | Function | 投诉事件。(commentId, childCommentId) => void; | null | -- |
| onBottomPopupTap | 否 | Function | 底部选项弹窗自定义事件。 | null | -- |
| onFetchComment | 是(mode B C) | Function | 评论数据请求; (page: number, limit: number) => Promise < { total(数据总数): number, list(数据): [] }>;使用方法详见demo | null | -- |
| onFetchChildComment | 是(mode C) | Function | 二级评论数据请求; (page: number, limit: number, commentId) => Promise < { total(数据总数): number, list(数据): [] }>; 使用方法详见demo | null | -- |
comments详解
comments.data是所有的评论数据，comments.total是所有评论的数量。 组件为受控组件，只负责数据渲染与基本的交互，因此所有相关的操作都需要使用方自已处理comments数据。 comments.data的内容示例如下：
[{
"id": 893699089, // 评论id
"content": "原来吃得饱真的会容易犯困😂", // 评论内容
"createdTime": 1585838087000, // 创建时间
"hot": true, // 热评标记
"author": { // 评论作者
"id": "1989c9da524485b28b221c90ea43a755",// 作者id
"name": "Micky", // 作者名称
"avatarUrl": "https://pic2.zhimg.com/da8e974dc.jpg?source=06d4cd63" // 作者头像
},
"likesCount": 97, // 点赞数
"liked": false, // 本人是否点赞
"childCommentCount": 4, // 子评论总条数
"childComments": [ // 子评论数据
{
"id": 893717955,
"content": "所以记住吃八分饱哦～加餐补充能量",
"createdTime": 1585839133000,
"author": {
"id": "5b9b52904d577fb91a65f88896aa758b",
"name": "杨布豆",
"avatarUrl": "https://pic2.zhimg.com/v2-88b0739e47e888591ae3052d4640fa7f.jpg?source=06d4cd63"
},
"replyToAuthor": { // 子评论的回复对象
"id": "1989c9da524485b28b221c90ea43a755",
"name": "Micky",
"avatarUrl": "https://pic1.zhimg.com/da8e974dc.jpg?source=06d4cd63"
}
}
]
}]Slot
| Name | 说明 | 是否必传 |
|---|---|---|
| header | B、C模式使用，文章正文需要放在此插槽内 | B、C模式必传 |
| footerIcons | 底部输入框右侧的图标按钮的自定义插槽，使用时需设置useDefaultFooterIcons为false | 否 |
附带的投诉页面
组件附带的投诉页面，需要使用方自行创建页面，实现跳转。 页面只需要引入投诉组件就可以了。详细示例见demo。
投诉页面参数说明
| 属性 | 必填 | 参数类型 | 参数说明 | 默认值 | 示例 |
|---|---|---|---|---|---|
| className | 否 | String | 组件容器自定义类名 | -- | -- |
| options | 否 | Array | 投诉选项 | '含有广告信息', '含有色情、淫秽内容', '含有低俗、辱骂内容', '含有反社会、暴力等内容' | -- |
| onSubmit | 是 | Function | 提交事件。(option: string) => void; | null | -- |
时间格式显示规则
距当前时间 1. 一分钟内，显示为 刚刚 2. 一小时内，显示为 xx 分钟前 3. 小于 24 小时，显示为 xx 小时 xx 分钟前（整小时不显示分钟） 4. 间隔超过 24 小时，并且处于昨天，显示：昨天 xx：xx 5. 同一年，显示：xx 月 xx 日 xx：xx 6. 跨年，显示：xxxx 年 xx 月 xx 日 xx：xx
在小程序中使用
主组件
{
"usingComponents": {
"adc-evaluation": "/components/es/index"
}
}投诉页面
{
"usingComponents": {
"adc-evaluation-complain": "/components/es/sub_components/complain/index"
}
}在 page.axml 中引用组件
A模式
<!-- 页面使用方式 -->
<view>
<view class="article">
文章正文
</view>
<adc-evaluation mode="A"
comments="{{comments}}"
article="{{article}}"
user="{{user}}"
author="{{author}}"
onTapLikes="onTapLikes"
onLoadMore="onLoadMore"
onIconTap="onIconTap"
onUserTap="onUserTap"
onSendMessage="onSendMessage"
onDelete="onDelete"
onComplain="onComplain">
</adc-evaluation>
</view>B、C模式
<!-- 页面使用方式 -->
<adc-evaluation mode="C"
comments="{{comments}}"
article="{{article}}"
user="{{user}}"
author="{{author}}"
onTapLikes="onTapLikes"
onIconTap="onIconTap"
onSendMessage="onSendMessage"
onDelete="onDelete"
onComplain="onComplain"
onFetchComment="onFetchComment"
onFetchChildComment="onFetchChildComment">
<view slot="header"
class="article">
文章正文，需要用slot插入
</view>
</adc-evaluation>Badges
1.0.1
3 years ago