uniapp评论列表插件获取

从评论列表，回复，点赞，删除，留言板 - DCloud 插件市场里导入，并使用。

代码样式优化及接入如下：

<template><view class="hb-comment"><!-- 阅读数-start --><view v-if="false"><img style="width: 14px; height: 14px;"src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAA0tJREFUWEftVk2IHUUQ/qp311NOksRT8JBDkARCfrxEDyLK+pe/DQkmJpBlZ7ofDwQ15iRocjYSSWAzU/OWd4hCMJiQH43xBz2YXCRivIgHQQ8SRPGUU/btfNLPnuU5O7OZlWz2kobh8aq/qvq6qrq6BEu8ZIn94wGBBUWg3W6v6vV62wFsILlGRNYA6AH4AcCPJH8mebPT6dxomtpGBJxz4wD2kny2oWHN81ybEJmXQKvVWpfn+VsAXi45vgPgj/D5rUfC91AJ54m83el0PLZy1RKw1u4GkAB4OGj+LSJXRORMkiSXq6xFUfSUiHi93SKyImB+BeBU9fMqnUoCcRy/IiIfFAoicp7kYVX9pUkKrLWrReRdkjsLvNfPsuxYWX8OAWvtOwCODACPqOrRJo7LmApbe1T17CDuPwSccy2SpwZYj2VZdr7K+fj4+IqRkZFVIjJD8ndV/asKdzcSswTiON4iIlcBLPOGROTFNE0/rTHqQ3motHdWVffU1YYx5utizxjzXJIk3te/nbDdbi/r9XpesCWAasNureV86VDVurqKRUSD7k8zMzPPT01N/dYHW2uPA3gtnDxL09TWnPwjX+F+j+Q1EfkCwC0ALwHYGnTeU9U3q/Sdc0oyDnvnVHWXOOdeIPlJEN4E8ExVPq21ywH8GXCXVHXboJM4jr8VkSe8bHp6emW32y2ws7Bg40sA68NhD3gCXZIHA2q07r4659aT9C3XL3+vi3D2BaVi26Sq31dFIY7jgyLSDXs3xFp7rci9MebJJEn8/zlrMQj00+ic20/ydAjJhTRNd9Tk/56ngOT2ogg/BjAWHB9X1TfuQxG+r6qv9wlMTEw8OjQ0dAXAY8HxYl/D68PDw6OTk5O3Z+9sq9UazfP8s+Lki9iIbpMczbLsej/tg6F2zr1K8kQhI3n/WnHhdDEfI5L7syz7cPDQlW2zHIl78RwDqCzu2oEkiqKnjTFfDbD9vwOJb9vHsiw7XHWz5h3JoijaZIzxz/PjJeVGIxnJb4wxJ9M0PVflfE4R1oGcc2Mk9wHYVYcpyS8BuKiqnbvhG03FhRHn3GaSG0muM8as9b8AjB/HRcR/35G8oKr+hWy0FkSgkcUFgh4QWPII/ANy0cUvD9WbkgAAAABJRU5ErkJggg==" /><span class="top-read">{{commentData.readNumer}}</span></view><!-- 阅读数-end --><!-- 阅读数下边那条线-start --><view class="seg_line_box"><view class="seg_line"></view><view class="seg_dot"></view><view class="seg_line"></view></view><!-- 阅读数下边那条线-end --><!-- 评论主体-start --><view class="comment-list" v-if="commentData.comment.length != 0"><!-- 评论主体-顶部数量及发表评论按钮-start --><view class="comment-num"><view>共 {{commentData.commentSize}} 条评论</view><view class="add-btn"><button class="publishcomment" type="primary" size="mini" @click="commentInput(true)">发表评论</button></view></view><!-- 评论主体-顶部数量及发表评论按钮-end --><!-- 评论列表-start --><view class="comment-box" v-for="(item, index) in commentData.comment"><view class="comment-box-item"><view><image :src="baseUrl+item.avatar || emptyAvatar" mode="aspectFill" class="avatar"></image></view><view class="comment-main"><!-- 父评论体-start --><view class="comment-main-top"><view class="nick-name-box"><view class="comLogo com1" v-if="index == 0">沙发</view><view class="comLogo com2" v-if="index == 1">板凳</view><view class="comLogo com3" v-if="index == 2">地板</view><view class="comLogo com4" v-if="index > 2">{{index + 1}}楼</view><view class="nick-name">{{item.nickName}}</view></view><view  v-if="false" class="zan-box" @click="like(item.id)"><span :class="item.hasLike ? 'isLike' : 'notLike'">{{item.likeNum == 0 ? '抢首赞' : item.likeNum}}</span><img style="width: 14px; height: 14px;" v-if="!item.hasLike"src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAApVJREFUWEfFlz9oFEEUxr93SWEhFkIaBUljo4WgATEaiI0GwVLBQg2EzLd3hSBqLI2lRgWLY+ftSSQgggoWNv5pImLUwjQBg1goqCCIIBqwueSeTLg7Ln9Mcmdub7vdnZnvN9+8fe+toMWXtFgfDQGMjo52zM7OHgMwIyLTg4ODk41upG4A7/0OEbkPYGdFVEQuOOeuNQJRN4CqBvGw+3dm9kZEBsrCPSRf1gvRCIAFETPrjqLodZIkY2Z2SkQmnHMHUgMgOQ8fx3FvJpMZB/CDZEfqACEgi8XidwA/SW5uKkCN2AzJTYscmCTZ1VQA7/2AiNwSkefOuYNBLEmSnJnlATwgebypAKr6CMBRANdJng9i3vu8iORE5Mrc3NyTlQDM7HMul/tYO2bNX0GhUDhRKpXumtlvAPuiKJouOzBuZr117HyBU6sCqOpeAH0AhssiwyQvVwTjOO5va2s7vRaAGtCrJC+GOVUAVb1UTjDVDLd4URHJOuf8WsSWG5MkSbeZTYR3lc+4CpAkyUpWht3fI/m+UfEwL5/Pb2xvb59ZFkBV5zNchazsSBBeYPn/ABQKhZ5SqfQCwBTJXYuPoOkAqnoGwE0Ad0ieTB3Ae39bRPoBDJEcSR1AVd8C2CMifc65p6kCmJkkSfIHwAYAW0h+SxVAVXcDmDSzL1EUbasEc20eaGoQVuoIgMckj6QOoKo3AJwFMEJyqBUAIegOAegnOdYKgK8AtmYyma7aLjqVGPDebxeRDwB+AeggWUzVAVV1ABTAK5L7l+0HVPUTgM7Q7VQGhPJZe99oHagpw4dJPvsXQPixONeoyErzRGTKzB7W9hFLjiA8iOO4M7iw3hDZbLbq6pIeY73F6l1v1Zas3gXrHf8XhhNvMGSmtPYAAAAASUVORK5CYII=" /><img style="width: 14px; height: 14px;" v-elsesrc="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAfVJREFUWEfFl79LHEEUx7/vclr4g51TLFQQW9FNDFhFBDvjtcF0gXSp5eYuWJlUAW9NIP9BIFUEOxFtTKF2FrezKFgkkEBS3h4SAtHbJ6vu5W5d1F3cm20WZt+b7+e9mTfzlqD5Ic36SATw+OPJQP2ft+ABJwQ+VFIcJA0kEYBpVfcAehKIMqHoFISVBCI2wOS76mi9g76HxTLwZiqybzcuRGwAc7WWB/NGWIhBu440ZlIHmFitLRPzm+tC9EtJY1gjAP9VMtelEQC2kuJR6gCm5X4BsBAWImDdluJZqgBjH/4MZr3TYzB6IoRWmHnzJgDK0g+1KL4128SqgnD9x432yn5NSfE88L0VYPx9rS/jYR6EJTCPJxQNu60oKV77gw2Ai/Ly1/ZKRElx8c20XL4n0ZZpgvkbAKbl7gCYDax0ALREmjJAo2SbM9A+AKLPqmC8aNkD4bVOMwPEKNlFUdYGkAE9rUhjSxvA2YOOoaPF7t+6AH4qKUauHURt3AObSoq8NgAGyo4UJW0ABH5py9wnbQAAppq76HYfRLXOXmPg4BWdasoA7yuZm47sB0zL9Vvt0TQvI/bqc06pfzsS4KHlWgwUUgKwmWjdKRhvI1q5/0P+T8dZ9jILTjH31X9PlKuNKzppXxDMFeV/a0eUVPSuftoBzgHKR/ohZwAugwAAAABJRU5ErkJggg==" /></view></view><view class="comment-main-content">{{item.content.length > 60 ? item.content.slice(0, 59) : item.content}}<span v-if="item.content.length > 60">{{item.hasShowMore ? item.content.slice(59) : '...'}}<span class="foot-btn" @click="showMore(item.id)">{{item.hasShowMore ? '收起' : '展开'}}</span></span></view><view class="comment-main-foot"><view class="foot-time">{{item.createTime}}</view><view class="foot-btn" @click="reply(item.nickName,item.nickName,item.id)">回复</view><view class="foot-btn" v-if="item.owner" @click="confirmDelete(item.id)">删除</view></view><!-- 父评论体-end --><!-- 子评论列表-start --><view class="comment-sub-box"><view class="comment-sub-item" v-for="each in item.children"><view><image :src="baseUrl+each.avatar || emptyAvatar" mode="aspectFill" class="avatar"></image></view><view class="comment-main"><view class="sub-comment-main-top"><view class="nick-name">{{each.nickName}}</view><view  v-if="false" class="zan-box" @click="like(each.id)"><span :class="each.hasLike ? 'isLike' : 'notLike'">{{each.likeNum == 0 ? '抢首赞' : each.likeNum}}</span><img style="width: 14px; height: 14px;" v-if="!each.hasLike"src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAApVJREFUWEfFlz9oFEEUxr93SWEhFkIaBUljo4WgATEaiI0GwVLBQg2EzLd3hSBqLI2lRgWLY+ftSSQgggoWNv5pImLUwjQBg1goqCCIIBqwueSeTLg7Ln9Mcmdub7vdnZnvN9+8fe+toMWXtFgfDQGMjo52zM7OHgMwIyLTg4ODk41upG4A7/0OEbkPYGdFVEQuOOeuNQJRN4CqBvGw+3dm9kZEBsrCPSRf1gvRCIAFETPrjqLodZIkY2Z2SkQmnHMHUgMgOQ8fx3FvJpMZB/CDZEfqACEgi8XidwA/SW5uKkCN2AzJTYscmCTZ1VQA7/2AiNwSkefOuYNBLEmSnJnlATwgebypAKr6CMBRANdJng9i3vu8iORE5Mrc3NyTlQDM7HMul/tYO2bNX0GhUDhRKpXumtlvAPuiKJouOzBuZr117HyBU6sCqOpeAH0AhssiwyQvVwTjOO5va2s7vRaAGtCrJC+GOVUAVb1UTjDVDLd4URHJOuf8WsSWG5MkSbeZTYR3lc+4CpAkyUpWht3fI/m+UfEwL5/Pb2xvb59ZFkBV5zNchazsSBBeYPn/ABQKhZ5SqfQCwBTJXYuPoOkAqnoGwE0Ad0ieTB3Ae39bRPoBDJEcSR1AVd8C2CMifc65p6kCmJkkSfIHwAYAW0h+SxVAVXcDmDSzL1EUbasEc20eaGoQVuoIgMckj6QOoKo3AJwFMEJyqBUAIegOAegnOdYKgK8AtmYyma7aLjqVGPDebxeRDwB+AeggWUzVAVV1ABTAK5L7l+0HVPUTgM7Q7VQGhPJZe99oHagpw4dJPvsXQPixONeoyErzRGTKzB7W9hFLjiA8iOO4M7iw3hDZbLbq6pIeY73F6l1v1Zas3gXrHf8XhhNvMGSmtPYAAAAASUVORK5CYII=" /><img style="width: 14px; height: 14px;" v-elsesrc="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAfVJREFUWEfFl79LHEEUx7/vclr4g51TLFQQW9FNDFhFBDvjtcF0gXSp5eYuWJlUAW9NIP9BIFUEOxFtTKF2FrezKFgkkEBS3h4SAtHbJ6vu5W5d1F3cm20WZt+b7+e9mTfzlqD5Ic36SATw+OPJQP2ft+ABJwQ+VFIcJA0kEYBpVfcAehKIMqHoFISVBCI2wOS76mi9g76HxTLwZiqybzcuRGwAc7WWB/NGWIhBu440ZlIHmFitLRPzm+tC9EtJY1gjAP9VMtelEQC2kuJR6gCm5X4BsBAWImDdluJZqgBjH/4MZr3TYzB6IoRWmHnzJgDK0g+1KL4128SqgnD9x432yn5NSfE88L0VYPx9rS/jYR6EJTCPJxQNu60oKV77gw2Ai/Ly1/ZKRElx8c20XL4n0ZZpgvkbAKbl7gCYDax0ALREmjJAo2SbM9A+AKLPqmC8aNkD4bVOMwPEKNlFUdYGkAE9rUhjSxvA2YOOoaPF7t+6AH4qKUauHURt3AObSoq8NgAGyo4UJW0ABH5py9wnbQAAppq76HYfRLXOXmPg4BWdasoA7yuZm47sB0zL9Vvt0TQvI/bqc06pfzsS4KHlWgwUUgKwmWjdKRhvI1q5/0P+T8dZ9jILTjH31X9PlKuNKzppXxDMFeV/a0eUVPSuftoBzgHKR/ohZwAugwAAAABJRU5ErkJggg==" /></view></view><view class="comment-main-content">{{each.content.length > 60 ? each.content.slice(0, 59) : each.content}}<span v-if="each.content.length > 60">{{each.hasShowMore ? each.content.slice(59) : '...'}}<span class="foot-btn" @click="showMore(each.id)">{{each.hasShowMore ? '收起' : '展开'}}</span></span></view><view class="comment-main-foot"><view class="foot-time">{{each.createTime}}</view><view class="foot-btn" @click="reply(item.nickName,each.nickName,item.id)">回复</view><view class="foot-btn" v-if="each.owner" @click="confirmDelete(each.id)">删除</view></view></view></view></view><!-- 子评论列表-end --></view></view></view><!-- 评论列表-end --></view><!-- 评论主体-end --><!-- 无评论-start --><view class="comment-none" v-else>暂无评论，<span @click="commentInput(true)" style="color: #007AFF;">抢沙发</span></view><!-- 无评论-end --><!-- 新增评论-start --><view class="comment-submit-box" v-if="submit" @click="closeInput"><!-- 下边的click.stop.prevent用于让上边的click不传下去，以防点到下边的空白处触发closeInput方法 --><view class="comment-add" @click.stop.prevent="stopPrevent" :style="'bottom:' + KeyboardHeight + 'px'"><view class="comment-submit"><view class="btn-click cancel" @click="closeInput">取消</view><view><view class="replayTag" v-show="showTag"><view v-if="pUser">回复在 {{pUser}} 的评论下</view><view v-else>发表评论</view><view @click="tagClose" v-if="false" class="replyTagClose">×</view></view></view><view><view class="btn-click" @click="add">发布</view></view></view><textarea class="textarea" v-model="commentReq.content" :placeholder="placeholder" :adjust-position="false" :show-confirm-bar="false"@blur="blur" @focus="focusOn" :focus="focus" maxlength="800"></textarea></view></view><!-- 新增评论-end --></view>
</template><script>import config from '@/config'export default {name: 'hb-comment',props: {cmData: {type: Object,default: () => {return null;}},deleteTip: {type: String,default: () => {return '操作不可逆，如果评论下有子评论，也将被一并删除，确认？';}},},watch: {cmData: {handler: function(newVal, oldVal) {this.init(newVal);},immediate: true}},data() {return {"emptyAvatar": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAABF5JREFUWEfFl11oHFUUx//nbmKwxdJ9qFL7YPEhRJC2gljjF60WG0WsoNkWfSnZ7Jy7FVPF0AoKpmBFqyIG3Jk7G1iIQXHbBz+KbbGtRfBbMe2LseKjiVDoiqIhwZ0jV3fb3cnM7kQCuU+7M+ec/+9+nHPPEJZ50DLrY1EApVJp9fz8/BYRuZ2INgDYWJvAWRE5R0RnZmZmPh4ZGZlPOrFEAMVi8e4gCPYSUZ+IXGGFgiCYIaJpKyQi1yql1orIFgAXARxRSvm5XO67diBtAYwxRQCDAE4RUUkpdWxwcNCKLBiu665TSj0kIpqIbgTgMzO3gmgJYIz5CMB9AIaZ+bXGQMVi8RoRuZeI/lZKHc1ms3/U34+Pj6+cnZ3dC+AggGPMfH8cRCyAMUZqThlmPlwPUCgU0qlUyq7Kww1BrbjHzPsahYwx/QDK9hkzR2pFPjTGnAWwIexkjOkRkRIR3Rozo5Miskdr/VMIxE7mHDPXD+2l1wsA6nseBMHmfD7/dSjQOwB2tTlYC/bddd1blFJfARhj5lyjfxNA7bSfitpz3/d3iYgFaDuUUjeHM8AY8zSAV5VS9+RyudP1IE0Axpj3Aaxk5m1hFc/zPiWiO9uq/2dwiJn3h22NMScB/MnMOxYAjI6Orurq6rpgU0hrXYpw/hFAd0KAD5n5wbCt7/t7ROT1ubm5NUNDQ7/b95dWwHXd7Uqp452dnVcPDAxciACwDlclAbAFynGcdRGr2EtEnwdB0JfP5080ARhjDhLRbY7jbI0SMcZUAKxOAgDgN2ZOx8SxGfEiMz/bBOD7/lgQBCu01o/GOH4PYFNCgElmvinK1vf9X2xxchzHVtfLW2CMOQpgipmHYwBeBtBUaOJgRKSgtX48Js63AH5l5geaADzPe1cpddFxnHyM42YAXyZYAXt+epn557iVFJHzWuudYYDnlFJ9juPcESfi+35JRHa3gdjPzIfibIwxNtPe0Fq/EAZ4hIhcZl4T5+y67nql1CcA1kfZENFnrSZQ6ycqItKvtT4SBthIRJMdHR092WzW5nzk8H1/WEReiQHY4TjOB3G+nuf9qyEim7TW9r65fAjL5fKVlUrlPICXmPnNFquwWym1oFBZ+yAItubz+TMtAJ4gon3pdLo7k8nMNgHYP7ZeE5EWkbuYeaYx0NjY2HXValUDeApAV4zIJIADzPxe+H2hULg+lUp9U6sBl3qLprugXC6nKpXKF0R02nGcZ2wQ3/e3ichOEckQ0aoEWQDbsgF4a3p6eqLeH3qeN0FE3el0ujeTyVTrcaKuY1uIjIg8CaCfiLYnEW1hY4WPi8gEgMeY+e1G27iGxHYxtptZynGYmTPhgK1asqWEiBRfcAjDdMaYpYCIFW8LUMuM54nIsb3/YvbDXskiYtuzA6382n4X1CDWAnCSgNSFa98ETakcWbwWMytjzAoAPUEQ3JBKpXrs75r/VLVanVJK/VC7Uf9KGjfRCiQN9n/slh3gHz9i4jC+FVL5AAAAAElFTkSuQmCC","commentData": null,"placeholder": "请输入评论","commentReq": {"pId": null, // 评论父id"content": null // 评论内容},"pUser": null, // 标签-回复人"showTag": false, // 标签展示与否"focus": false, // 输入框自动聚焦"submit": false, // 弹出评论"KeyboardHeight": 0 ,// 键盘高度baseUrl:config.baseUrl,};},mounted: function() {uni.onKeyboardHeightChange(res => {this.KeyboardHeight = res.height;})},methods: {// 初始化评论init(cmData) {// for (var i in cmData.comment) {// 	cmData.comment[i].hasShowMore = false;// 	for (var j in cmData.comment[i].children) {// 		cmData.comment[i].children[j].hasShowMore = false;// 	}// }this.commentData = cmData;},// 没用的方法，但不要删stopPrevent() {},// 回复评论reply(pUser, reUser, pId) {this.pUser = pUser;this.commentReq.pId = pId;if (reUser) {this.commentReq.content = '@' + reUser + ' ';} else {this.commentReq.content = '';}this.showTag = true;this.commentInput(false);},// 删除评论前确认confirmDelete(commentId) {var that = this;uni.showModal({title: '警告',content: that.deleteTip,confirmText: '确认删除',success: function(res) {if (res.confirm) {that.$emit('del', commentId);}}});},// 新增评论add() {if (this.commentReq.content == null || this.commentReq.content.length < 2) {uni.showToast({title: '评论内容过短',duration: 2000});return}this.$emit('add', this.commentReq);},// 点赞评论like(commentId) {this.$emit('like', commentId);},// 新增完成addComplete() {this.commentReq.content = null;this.tagClose();this.closeInput();},// 点赞完成-本地修改点赞结果likeComplete(commentId) {for (var i in this.commentData.comment) {if (this.commentData.comment[i].id == commentId) {this.commentData.comment[i].hasLike ? this.commentData.comment[i].likeNum-- : this.commentData.comment[i].likeNum++;this.commentData.comment[i].hasLike = !this.commentData.comment[i].hasLike;return}for (var j in this.commentData.comment[i].children) {if (this.commentData.comment[i].children[j].id == commentId) {this.commentData.comment[i].children[j].hasLike ? this.commentData.comment[i].children[j].likeNum-- : this.commentData.comment[i].children[j].likeNum++;this.commentData.comment[i].children[j].hasLike = !this.commentData.comment[i].children[j].hasLike;return}}}},// 删除完成-本地删除评论deleteComplete(commentId) {for (var i in this.commentData.comment) {for (var j in this.commentData.comment[i].children) {if (this.commentData.comment[i].children[j].id == commentId) {this.commentData.comment[i].children.splice(Number(j), 1);return}}if (this.commentData.comment[i].id == commentId) {this.commentData.comment.splice(Number(i), 1);return}}},// 展开评论showMore(commentId) {for (var i in this.commentData.comment) {if (this.commentData.comment[i].id == commentId) {this.commentData.comment[i].hasShowMore = !this.commentData.comment[i].hasShowMore;this.$forceUpdate();return}for (var j in this.commentData.comment[i].children) {if (this.commentData.comment[i].children[j].id == commentId) {this.commentData.comment[i].children[j].hasShowMore = !this.commentData.comment[i].children[j].hasShowMore;this.$forceUpdate();return}}}},// 输入框失去焦点blur() {this.focus = false;},// 输入框聚焦focusOn() {this.$emit('focusOn');},// 标签关闭tagClose() {this.showTag = false;this.pUser = null;this.commentReq.pId = null;},// 输入评论commentInput(data) {if(data){this.commentReq = {"pId": null, // 评论父id"content": null // 评论内容};}// TODO 调起键盘方法this.submit = true;setTimeout(() => {this.focus = true;}, 50)},// 关闭输入评论closeInput() {this.focus = false;this.submit = false;}}};
</script><style lang="scss" scoped>.hb-comment {padding: 10rpx;background-color: #f4ffff;width: 95%;border-radius: 5px;border-color: lightskyblue;padding-left: 5px;margin-left: 10px;}.top-read {font-size: 28rpx;padding-left: 10rpx;color: #999999;}.seg_line_box {display: flex;height: 5rpx;justify-content: space-between;margin: 5rpx 0;}.seg_line {width: 45%;border-bottom: 1rpx solid #e1e1e1;}.seg_dot {width: 8%;border-bottom: 5rpx dotted #dbdbdb;}.comment-num {display: flex;justify-content: space-between;align-items: center;padding: 20rpx 0;.publishcomment{background-color: lightgreen;}}.comment-box {padding: 10rpx 0;}.comment-box-item {display: flex;}.comment-main {padding-left: 20rpx;}.comment-main-top {width: 600rpx;padding-top: 6rpx;display: flex;justify-content: space-between;}.sub-comment-main-top {width: 510rpx;padding-top: 6rpx;display: flex;justify-content: space-between;}.avatar {width: 70rpx;height: 70rpx;border-radius: 50%;}.nick-name-box {display: flex;align-items: center;}.comLogo {margin-right: 18rpx;font-size: 22rpx;border-radius: 10rpx;padding: 5rpx 15rpx;color: #FFFFFF;}.com1 {background-color: #d218b1;}.com2 {background-color: #f19c0b;}.com3 {background-color: #c8da85;}.com4 {background-color: #bfd0da;}.nick-name {color: #2d8cf0;}.isLike {font-size: 28rpx;padding-right: 10rpx;color: #2d8cf0;}.notLike {font-size: 28rpx;padding-right: 10rpx;color: #999999;}.comment-main-content {padding: 10rpx 10rpx 10rpx 0;}.comment-main-foot {display: flex;font-size: 22rpx;}.replayTag {color: #909399;margin-bottom: 5px;border: 1px solid #c8c9cc;background-color: #f4f4f5;border-radius: 3px;display: flex;justify-content: space-between;align-items: center;font-size: 16rpx;padding: 5px 10px;}.replyTagClose {font-size: 20px;line-height: 12px;padding: 0 0 2px 5px;}.foot-btn {padding-left: 10rpx;color: #007AFF;}.comment-sub-box {padding: 20rpx 0;}.comment-sub-item {display: flex;}.comment-none {padding: 20rpx;width: 100%;text-align: center;color: #999999;}.comment-submit-box {position: fixed;display: flex;align-items: flex-end;z-index: 9900;left: 0;top: var(--window-top);bottom: 0;background-color: rgba($color: #000000, $alpha: 0.5);width: 100%;}.comment-add {position: fixed;background-color: #FFFFFF;width: 100%;padding: 5rpx;border: 1px solid #ddd;transition: .3s;-webkit-transition: .3s;}.btn-click {color: #007AFF;font-size: 28rpx;padding: 10rpx;}.cancel {color: #606266;}.textarea {height: 100px;padding: 16rpx;width: 100%;}.comment-submit {padding: 5rpx 20rpx 0 20rpx;border-bottom: 1px dashed #ddd;width: calc(100% - 40rpx);display: flex;justify-content: space-between;align-items: center;}
</style>

页面接入：

<view class="comment"><hb-comment ref="hbComment" @add="sendComment" @del="delcomment" @like="like" @focusOn="focusOn" :deleteTip="'确认删除？'":cmData="commentData" v-if="commentData"></hb-comment></view>getTree(data) {let result = [];let map = {};data.forEach(item => {map[item.id] = item;});data.forEach(item => {let parent = map[item.parentId];if (parent) {(parent.children || (parent.children = [])).push(item);} else {result.push(item);}});return result;},bindTextAreaBlur: function (e) {console.log(e.detail.value)},focusOn(){this.$refs.hbComment.focusOn();},sendComment(data){var type=0if(data.pId){type = 1;}var form = {"content":data.content,"blogId":this.item.id,"type":type,"parentId":data.pId};addCommentBlog(form).then(response=>{this.$refs.hbComment.closeInput();this.getCommentList();})},delcomment(data){delcomment(data).then(response=>{this.getCommentList();})},getCommentList(){listCommentBlogMinApp({"blogId":this.item.id}).then(res=>{// res.readNumer = 193;res.commentList=res.data.rows;this.commentData = {"readNumer": res.readNumer,"commentSize": res.commentList.length,"comment": this.getTree(res.commentList)}})},