From 846bd0e9adb70bb23778045ee1a252a6a58adc4f Mon Sep 17 00:00:00 2001 From: inleft <inleft@qq.com> Date: Wed, 02 Mar 2022 21:45:39 +0800 Subject: [PATCH] 文件结构调整,日志评论实现 --- src/components/mini/box12-comment.vue | 212 ++++++++++++++++++++++++---------------------------- 1 files changed, 99 insertions(+), 113 deletions(-) diff --git a/src/components/mini/box12-comment.vue b/src/components/mini/box12-comment.vue index c025ffe..22e675e 100644 --- a/src/components/mini/box12-comment.vue +++ b/src/components/mini/box12-comment.vue @@ -1,56 +1,82 @@ <template> - <div class="myFriend" style="min-height: 950px;"> - <h1 style="text-align: center;">碎碎念</h1> - <replyBox ref="commentBoxId"></replyBox> + <div> + <replyBox ref="commentBoxId" v-bind="$attrs"></replyBox> <a-modal v-model="visible" :title="replyTaget" :footer="null" :bodyStyle="{'overflow':'overlay','maxHeight': '550px','scrollbarWidth': 'none'}"> - <replyBox ref="replyBoxId"></replyBox> + <replyBox ref="replyBoxId" v-bind="$attrs"></replyBox> </a-modal> - + <div class="mySecret" v-if="commentListData.length==0"> + <p>空空如也..</p> + </div> <div v-for="temp in commentListData" class="commentList"> <div class="commentGroup"> <a-comment> - <span slot="actions" key="comment-nested-reply-to"> - <span style="cursor: default;">{{temp.createDate}} </span> + <div slot="actions" key="comment-nested-reply-to" class="actionList"> + <span style="cursor: default;padding-right: 6px;" class="myTip">{{temp.createDate}} </span> <span @click="replyCall(temp)"> - <a-icon type="edit" /> - 回复 + <a-icon type="message" /> </span> + </div> - <span @click="loadMore(temp)" v-if="temp.isHasNext==1"> - <a-icon type="down" />更多.. - </span> - </span> - - <div slot="avatar"> - <a :href="temp.userHomePage" target="_blank" class="no-underline"> - {{temp.visitorNickName}} : - </a> + <div slot="avatar" style="display: flex;"> + <div class="myTextDeal"> + <a :href="temp.visitorHomePage" target="_blank" v-if="temp.visitorHomePage!=''"> + <a-tooltip placement="bottomLeft" :title="temp.visitorNickName"> + {{temp.visitorNickName}} + </a-tooltip> + </a> + <a-tooltip placement="bottomLeft" :title="temp.visitorNickName" v-else> + {{temp.visitorNickName}} + </a-tooltip> + </div> + <div>:</div> </div> <p slot="content">{{temp.commentContent}}</p> <a-comment v-for="tempData in temp.replyList"> - <span slot="actions" key="comment-nested-reply-to" @click="replyCall(tempData)"> - <a-icon type="edit" />回复 - </span> - <div slot="avatar"> - <a :href="tempData.userHomePage" target="_blank" class="no-underline"> - {{tempData.visitorNickName}} + <div slot="actions" key="comment-nested-reply-to" class="actionList"> + <span style="cursor: default;padding-right: 6px;" class="myTip">{{tempData.createDate}} + </span> + <span @click="replyCall(tempData)"> + <a-icon type="message" /> + </span> + </div> + <div slot="avatar" style="display: flex;"> + <div class="myTextDeal"> + <a :href="tempData.visitorHomePage" target="_blank" v-if="tempData.visitorHomePage!=''"> + <a-tooltip placement="bottomLeft" :title="tempData.visitorNickName"> + {{tempData.visitorNickName}} + </a-tooltip> + </a> + <a-tooltip placement="bottomLeft" :title="tempData.visitorNickName" v-else> + {{tempData.visitorNickName}} + </a-tooltip> + </div> + <div>:</div> + </div> + + <div slot="content" class="myTip myTextDeal" style="padding-bottom: 5px; max-width: 150px;"> + @<a :href="tempData.replyUserHomePage" target="_blank" + v-if="tempData.replyUserHomePage!=''"> + <a-tooltip placement="bottomLeft" :title="tempData.replyUserName"> + {{tempData.replyUserName}} + </a-tooltip> </a> - @ - <a :href="tempData.replyUserHomePage" target="_blank" class="no-underline"> - {{tempData.replyUserName}} : - </a> + <a-tooltip placement="bottomLeft" :title="tempData.replyUserName" v-else> + {{tempData.replyUserName}} + </a-tooltip> </div> <p slot="content">{{tempData.commentContent}}</p> </a-comment> - - <!-- <div class="loadMore" v-if="temp.isHasNext!=1"> - <a-icon type="smile" /><span>到底了..</span> - </div> --> </a-comment> + + <div class="loadMore" @click="loadMore(temp)" v-if="temp.isHasNext==1"> + <span> + <a-icon type="down" />展开 + </span> + </div> </div> </div> @@ -73,6 +99,7 @@ } from '../../api/blogArticleComment.js' export default { + props: ["articleId"], components: { replyBox }, @@ -80,7 +107,7 @@ queryBlogCommentList({ pageNo: this.page.current, pageSize: this.page.pageSize, - articleId: this.articleId + articleId: this.$attrs.acticleId }).then((res) => { this.page.total = Number(res.data.total) this.page.pageSize = Number(res.data.size); @@ -94,7 +121,7 @@ queryBlogCommentList({ pageNo: this.page.current, pageSize: this.page.pageSize, - articleId: this.articleId + articleId: this.$attrs.articleId }).then((res) => { this.page.total = Number(res.data.total) this.page.pageSize = Number(res.data.size); @@ -129,89 +156,18 @@ }, data() { return { - articleId: null, + // articleId: null, + isAllowedComment: true, page: { size: "small", total: 1, - pageSize: 2, + pageSize: 5, current: 1, defaultPageSize: 10 }, replyTaget: "", visible: false, - commentListData: [ - // { - // userName: "bimo", - // userComment: "1+1=2?", - // commentTime: "2022-02-22 22:22:22", - // id: "1", - // parentId: null, - // replyId: null, - // replyUserName: null, - // userHomePage: "", - // replyUserHomePage: "", - // replyList: { - // total: "3", - // current: "1", - // listData: [{ - // userName: "inleft", - // userComment: "2", - // commentTime: "2022-02-22 23:22:22", - // id: "2", - // parentId: "1", - // replyId: "1", - // replyUserName: "bimo", - // userHomePage: "", - // replyUserHomePage: "", - // }, { - // userName: "air", - // userComment: "不对是3", - // commentTime: "2022-02-23 13:13:13", - // id: "3", - // parentId: "1", - // replyId: "2", - // replyUserName: "inleft", - // userHomePage: "", - // replyUserHomePage: "", - // }] - // }, - // }, { - // userName: "bimo", - // userComment: "1+1=2?", - // commentTime: "2022-02-22 22:22:22", - // id: "1", - // parentId: null, - // replyId: null, - // replyUserName: null, - // userHomePage: "", - // replyUserHomePage: "", - // replyList: { - // total: "3", - // current: "1", - // listData: [{ - // userName: "inleft", - // userComment: "2", - // commentTime: "2022-02-22 23:22:22", - // id: "2", - // parentId: "1", - // replyId: "1", - // replyUserName: "bimo", - // userHomePage: "", - // replyUserHomePage: "", - // }, { - // userName: "air", - // userComment: "不对是3", - // commentTime: "2022-02-23 13:13:13", - // id: "3", - // parentId: "1", - // replyId: "2", - // replyUserName: "inleft", - // userHomePage: "", - // replyUserHomePage: "", - // }] - // }, - // }, - ], + commentListData: [], } } @@ -223,9 +179,35 @@ user-select: none; } + .myTextDeal { + // display: -webkit-container; + max-width: 80px; + -webkit-line-clamp: 1; + text-overflow: ellipsis; + overflow: hidden; + word-wrap: break-word; + white-space: nowrap; + word-break: break-all; + } + + .loadMore { + margin: 10px; + display: flex; + justify-content: center; + } + + .loadMore:hover { + background-color: #00000021 + } + .ant-drawer-wrapper-body::-webkit-scrollbar, .ant-modal-body::-webkit-scrollbar { display: none; + } + + .actionList { + display: flex; + justify-content: flex-end; } .commentList { @@ -242,8 +224,12 @@ } .ant-comment-actions { - display: flex; - justify-content: flex-end; + + li { + width: -webkit-fill-available; + } + + margin-bottom: 0px; } .ant-comment-content-author { @@ -256,8 +242,8 @@ .commentGroup { border-top: 1px solid #e5e9ef; - margin-bottom: 10px; - padding-bottom: 15px; + margin-bottom: 5px; + padding-bottom: 0px; } .ant-comment-content-detail { -- Gitblit v1.9.1