先看效果

下载地址

uni-app官方插件市场: cc-comment组件

环境

基于vue3.2和uni-ui开发; 依赖版本参考如下:

{

"dependencies": {

"@dcloudio/uni-mp-weixin": "3.0.0-3090820231124001",

"@dcloudio/uni-ui": "^1.4.28",

"uni-ui": "^1.0.0",

"vue": "^3.2.45"

},

"devDependencies": {

"vite": "4.0.3"

}

}

小程序调试基础库: 3.3.0

场景

即拿即用, 组件有详细注释内容, 方便二次开发; 目前仅在小程序使用, 其他平台能否使用请评论留言反馈谢谢, 祝大家使用愉快.

附言

主要是插件市场没找到满意的, 诸多用着也不顺, 所以有了cc-comment, 如有Bug请留言或Email, 开源不易且用且珍惜, 感谢使用. 关于功能样式, 主打一个借鉴如下; 参考[小红书]App的评论回复功能: 点击评论内容展示回复弹窗, 二级评论默认显示一条, 点击展开查看更多, 无评论收起功能. 参考[什么值得买]App的多层级回复评论title显示效果

功能

已实现

无评论显示场景 √显示评论数量(新增和删除动态更新数量) √发起新评论 √点击评论内容回复 √回复一级评论 √回复二级评论 √展开二级评论 √展开超长评论内容 √不能回复自身评论 √删除 √仅可删除自身评论 √可选三类删除模式 √点赞 √点赞大于100显示99+ √

待实现

图片上传 ×

有其他需求的评论区留言

:props 属性

属性名说明类型默认值必填说明ref实例Object-truetableData评论列表Array[ ]truetableTotal评论总数Number0truedeleteMode评论删除模式Stringallfalsebind-当被删除的一级评论存在回复评论, 那么该评论内容变更显示为[当前评论内容已被移除] only-仅删除当前评论(后端删除相关联的回复评论, 否则总数显示不对) all-删除所有评论包括回复评论

deleteMode

@event 事件

属性名说明参数说明likeClick点赞事件{{params},callback}{ params: 评论id }, callback回调函数, 请求后端接口后调用, 执行后续逻辑replyClick回复事件{{params},callback}{ params:评论参数 }, callback回调函数, 请求后端接口后调用, 执行后续逻辑deleteClick删除事件{{params,mode},callback}{ params: 评论数组id, mode:删除模式[all,bind,only] }, callback回调函数, 请求后端接口后调用, 执行后续逻辑

$ref 实例可调用属性&事件

属性名说明回调参数说明平台差异说明newCommentFun发起新评论-event-

数据说明

// 用户信息

type userInfoKeys = {

id: number // 用户id

user_name: string // 用户名

user_avatar: string // 用户头像地址

}

// 评论表

type tableDataKeys = {

id: number // 评论id

parent_id: number // 父级评论id

reply_id: number // 被回复人评论id

reply_name: string // 被回复人名称

user_name: string // 用户名

user_avatar: string // 评论者头像地址

user_content: string // 评论内容

is_like: boolean // 是否点赞

like_count: number // 点赞数统计

create_time: string // 创建时间

}

使用方法

再放一遍下载地址

uni-app官方插件市场: cc-comment组件

感谢使用

推荐文章

评论可见，请评论后查看内容，谢谢！！！
 您阅读本篇文章共花了：