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)}})},

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/42227.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

5.利用matlab完成 符号矩阵的转置和 符号方阵的幂运算（matlab程序）

5.利用matlab完成 符号矩阵的转置和 符号方阵的幂运算（matlab程序）

1.简述 Matlab符号运算中的矩阵转置 转置向量或矩阵 B A. B transpose(A) 说明 B A. 返回 A 的非共轭转置&#xff0c;即每个元素的行和列索引都会互换。如果 A 包含复数元素&#xff0c;则 A. 不会影响虚部符号。例如&#xff0c;如果 A(3,2) 是 12i 且 B A.&#xff0…
阅读更多...
java中excel文件下载

java中excel文件下载

1、System.getProperty(user.dir) 获取的是启动项目的容器位置 2、 Files.copy(sourceFile.toPath(), destinationFile.toPath(), StandardCopyOption.REPLACE_EXISTING); StandardCopyOption.REPLACE_EXISTING 来忽略文件已经存在的异常&#xff0c;如果存在就去覆盖掉它Sta…
阅读更多...
00-认识C++

00-认识C++

2、认识C 2.1、例子 一个简单的C例子 #include <iostream>int main() {using namespace std; //使用名称空间cout << "Com up and C me some time.";cout << endl; //换行符&#xff0c;还可以cout<<"\n";cout <…
阅读更多...
驱动DAY5

驱动DAY5

1.实现设备文件和设备的绑定&#xff0c;编写LED驱动 2.复习竞态的解决方法和阻塞IO实现 第一个任务 头文件 #ifndef __HEAD_H__ #define __HEAD_H__ typedef struct{unsigned int MODER;unsigned int OTYPER;unsigned int OSPEEDR;unsigned int PUPDR;unsigned int IDR;u…
阅读更多...
【MySQL系列】表内容的基本操作（增删查改）

【MySQL系列】表内容的基本操作（增删查改）

「前言」文章内容大致是对MySQL表内容的基本操作&#xff0c;即增删查改。 「归属专栏」MySQL 「主页链接」个人主页 「笔者」枫叶先生(fy) 目录 一、MySQL表内容的增删查改1.1 Create1.1.1 单行数据全列插入1.1.2 多行数据指定列插入1.1.3 插入否则更新1.1.4 数据替换 1.2 Ret…
阅读更多...
MS Word表格宽度自适应

MS Word表格宽度自适应

x.1 问题&#xff1a; 你的表格可能并没有占满整行&#xff0c;且右对齐&#xff0c;例如如下&#xff0c; x.2 解决方式 这个时候你想右对齐&#xff0c;你可以这么操作&#xff0c;点左上角的十字全选表格&#xff0c; 在布局里选择自动对齐&#xff0c; 对齐方式选择居中右…
阅读更多...
git日常操作-案例

git日常操作-案例

文章目录 查看tag对应版本tag一个版本切换到指定tag查看远程有那些分支 查看tag对应版本 要查看 Git 仓库中标签&#xff08;tag&#xff09;对应的版本&#xff0c;可以使用以下命令&#xff1a; git show <tag>将 替换为你要查看的标签名称。该命令将显示与标签对应的…
阅读更多...
springBoot是如何实现自动装配的

springBoot是如何实现自动装配的

目录 1 什么是自动装配 2 Spring自动装配原理 2.1 SpringBootConfiguration ​编辑 2.2 EnableAutoConfiguration 2.2.1 AutoConfigurationPackage 2.2.2 Import({AutoConfigurationImportSelector.class}) 2.3 ComponentScan 1 什么是自动装配 自动装配就是将官方写好的的…
阅读更多...
vue-cli前端工程化——创建vue-cli工程 router版本的创建 目录结构 案例初步

vue-cli前端工程化——创建vue-cli工程 router版本的创建 目录结构 案例初步

目录 引出创建vue-cli前端工程vue-cli是什么自动构建创建vue-cli项目选择Vue的版本号 手动安装进行选择创建成功 手动创建router版多了一个router 运行测试bug解决 Vue项目结构main.jspackage.jsonvue.config.js Vue项目初步hello案例 总结 引出 1.vue-cli是啥&#xff0c;创建…
阅读更多...
Redis Geo 数据类型在移动互联网中的应用

Redis Geo 数据类型在移动互联网中的应用

Redis Geo 数据类型在移动互联网中的应用 一、简介1 Redis2 数据类型 二、Geo 数据类型1 Geo 数据类型2 Geo 数据类型的存储方式3 Geo 数据类型的常用命令 三、Geo 数据类型应用场景1 附近的人和地点功能2 出租车实时定位3 物流配送服务 四、Redis Geo 数据优化策略1 降低查询延…
阅读更多...
android手势事件

android手势事件

与手势事件有关的方法 dispatchTouchEvent()&#xff1a;该方法将触摸事件分发给相应的视图或视图组。onInterceptTouchEvent()&#xff1a;该方法用于判断是否需要拦截触摸事件&#xff0c;如果需要拦截&#xff0c;则返回 true&#xff0c;否则返回 false。onTouchEvent()&a…
阅读更多...
神经网络基础-神经网络补充概念-36-dropout正则化

神经网络基础-神经网络补充概念-36-dropout正则化

概念 Dropout 是一种常用的正则化技术&#xff0c;用于减少深度神经网络中的过拟合问题。它在训练过程中随机地将一部分神经元的输出置为零&#xff0c;从而强制模型在训练过程中学习多个独立的子模型&#xff0c;从而减少神经元之间的依赖关系&#xff0c;提高模型的泛化能力…
阅读更多...
记一次项目内存优化--内存泄漏

记一次项目内存优化--内存泄漏

需求–内存泄漏优化&#xff0c;PSS有所下降&#xff0c; OOM率减少 主要是与某个版本作基准进行对比&#xff08;一般是最新版本的前一个版本作原数据&#xff09;&#xff0c;优化后&#xff0c;PSS有所下降&#xff0c;线上OOM率减少&#xff08;Bugly版本对比&#xff09;…
阅读更多...
程序员如何利用公网远程访问查询本地硬盘【内网穿透】

程序员如何利用公网远程访问查询本地硬盘【内网穿透】

&#x1f3ac; 鸽芷咕&#xff1a;个人主页 &#x1f525; 个人专栏: 《高效编程技巧》《cpolar》 ⛺️生活的理想&#xff0c;就是为了理想的生活! 公网远程访问本地硬盘文件【内网穿透】 文章目录 公网远程访问本地硬盘文件【内网穿透】前言1. 下载cpolar和Everything软件1.…
阅读更多...
React 生态应用 - React Router（1）

React 生态应用 - React Router（1）

目录 扩展学习资料 安装和导入 Route匹配 src/components/navbar.jsx src/App.js 扩展学习资料 资料名称 链接 备注 阅读react router组件文档 https://react-router.docschina.org/web/guides/philosophy Introduction | React Router 中文文档 扩展阅读 路由鉴权 …
阅读更多...
（stm32）低功耗模式

（stm32）低功耗模式

低功耗模式 执行哪个低功耗模式的程序判断流程 标志位设置操作一定要在WFI/WFE之前&#xff0c;调用此指令后立即进入睡眠判断流程 模式对比 睡眠模式 停止模式 待机模式
阅读更多...
FLatten Transformer

FLatten Transformer

FLatten Transformer: Vision Transformer using Focused Linear Attention ICCV 2023 聚焦式线性注意力模块 关于Transformer 在Transformer模型应用于视觉领域的过程中&#xff0c;降低自注意力的计算复杂度是一个重要的研究方向。线性注意力通过两个独立的映射函数来近似S…
阅读更多...
3 Python的数据类型

3 Python的数据类型

概述 在上一节&#xff0c;我们介绍了Python的基础语法&#xff0c;包括&#xff1a;编码格式、标识符、关键字、注释、多行、空行、缩进、引号、输入输出、import、运算符、条件控制、循环等内容。Python是一种动态类型的编程语言&#xff0c;这意味着当你创建一个变量时&…
阅读更多...
1.初识Web

1.初识Web

文章目录 1. 什么是Web?2.初始Web前端2.1.Web标准 1. 什么是Web? web:全球广域网&#xff0c;也称万维网(www World Wide Web)&#xff0c;能够通过浏览器访问的网站。 2.初始Web前端 网页有哪些部分组成&#xff1f; 文字、图片、音频、视频、超链接… 我们看到的网页&am…
阅读更多...
react 生命周期方法

react 生命周期方法

组件的生命周期 每个组件都包含 “生命周期方法”&#xff0c;你可以重写这些方法&#xff0c;以便于在运行过程中特定的阶段执行这些方法。你可以使用此生命周期图谱作为速查表。在下述列表中&#xff0c;常用的生命周期方法会被加粗。其余生命周期函数的使用则相对罕见。 挂…
阅读更多...
最新文章

Copyright @ 2022~2023