更新记录
1.0(2021-05-31) 下载此版本
评论回复点赞
平台兼容性
Vue2 | Vue3 |
---|---|
√ | × |
App | 快应用 | 微信小程序 | 支付宝小程序 | 百度小程序 | 字节小程序 | QQ小程序 |
---|---|---|---|---|---|---|
HBuilderX 3.1.8 | × | √ | × | × | × | × |
钉钉小程序 | 快手小程序 | 飞书小程序 | 京东小程序 |
---|---|---|---|
× | × | × | × |
H5-Safari | Android Browser | 微信浏览器(Android) | QQ浏览器(Android) | Chrome | IE | Edge | Firefox | PC-Safari |
---|---|---|---|---|---|---|---|---|
× | × | × | × | √ | × | × | × | × |
comments数据保存格式:
[
{
id: 1, // 评论唯一标识id
avatar: 'https//xxx', // 头像地址
nickname: 'zzz', // 评论者姓名
content: '我是评论。', // 评论
addTime: '刚刚', // 评论时间
isLike: '0', // 查看评论的用户是否点赞了该评论
likeNums: 26, // 该评论的点赞数
layer: 1, // 该评论所在的层级
superNickname: null, // 上级评论的用户名
superCommentId: null, // 上级评论的id
children: [
{
id: 2,
avatar: 'https//xxx',
nickname: '程序猿2',
content: '我是回复。',
addTime: '刚刚',
isLike: '0',
likeNums: 23,
layer: 2,
superNickname: 'zzz',
superCommentId: 1
},
{
id: 3,
avatar: 'https//xxx',
nickname: '马老师',
content: '我是回复的回复。',
addTime: '刚刚',
isLike: '0',
likeNums: 69,
layer: 3,
superNickname: '程序猿2',
superCommentId: 1
}
]
}
]
eg:
<zwz-comment :comments="comments" @comment-like="commentLike" @send-comment="commentSend" v-model="commentText" @lower="lower" @reply="reply"></zwz-comment>
v-model:评论内容双向绑定。
event
comment-like :点赞触发事件。
commentLike(e) {
console.log('返回点击的评论信息', e);
},
send-comment:发送触发事件。
commentSend() {
}
lower:评论滑块到底触发事件。
lower() {
console.log('到底了');
}
reply:点击回复触发事件。
reply(index, id, userNickName, layer, reply) {
console.log(index, id, userNickName, layer, reply);
// index: 回复的顶级评论的索引
// id: 回复的顶级评论的id
// ueserNickName: 上级评论的用户名
// layer: 改回复所处的层级
// reply: 回复评论的全部信息
}