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.pswp.cn/news/42227.shtml
繁體地址，請注明出處：http://hk.pswp.cn/news/42227.shtml
英文地址，請注明出處：http://en.pswp.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