From a23166e4fac771238a90ae5ddc5b1e53a1c7afb8 Mon Sep 17 00:00:00 2001 From: inleft <inleft@qq.com> Date: Thu, 25 Aug 2022 18:10:21 +0800 Subject: [PATCH] 更新后的细节调整 --- src/components/group/MyMessage.vue | 160 +++++++++++++++++++++++++++++++---------------------- 1 files changed, 93 insertions(+), 67 deletions(-) diff --git a/src/components/group/MyMessage.vue b/src/components/group/MyMessage.vue index c5c64af..bd63567 100644 --- a/src/components/group/MyMessage.vue +++ b/src/components/group/MyMessage.vue @@ -1,62 +1,48 @@ <template> <div class="myModal"> - <a-modal v-model="visible" title="天涯共此时.." :footer="null" + <a-modal v-drag-modal v-model="visible" title="天涯共此时.." :footer="null" :bodyStyle="{'overflow':'overlay','maxHeight': '550px'}"> - <!-- <template #actions> - <a-button> - 未读 - <a-icon type="bell" /> - </a-button> - </template> --> - <a-list item-layout="horizontal" :data-source="dataList"> - <template slot="renderItem" slot-scope="item"> - <a-list-item> - <a-list-item-meta :description="item.commentContent"> - <template #avatar> - <a :href="item.visitorHomePage" target="_blank" v-if="item.visitorHomePage!=''"> - <a-tooltip placement="bottomLeft" :title="item.visitorNickName"> - <span class="myTip">{{item.visitorNickName}} :</span> - </a-tooltip> - </a> - <a-tooltip placement="bottomLeft" :title="item.visitorNickName" v-else> - <span class="myTip">{{item.visitorNickName}} :</span> - </a-tooltip> - </template> - <template #title> - 在 - <router-link to="/comment" @click.native="handleCancel()" v-if="item.commentType==1"> - {{item.articleTitle}} - </router-link> - <router-link :to="{path:'/mdDetail',query:{id:item.articleId}}" - :title="item.articleTitle" @click.native="handleCancel()" v-else> - {{item.articleTitle}} - </router-link> - 中留言 - </template> - </a-list-item-meta> - <!-- <template #extra> - {{item.createDate}} - </template> --> - </a-list-item> - </template> - <template #loadMore> - <div :style="{ textAlign: 'center', marginTop: '12px', height: '32px', lineHeight: '32px' }"> - <a-button @click="loadMore" :disabled="refresh" v-if="showButton"> - 加载更多 - </a-button> - <a-button disabled v-else> - 更多记录就不展示啦.. - </a-button> - <span style="margin: 20px;"> - <a-button @click="reload" :disabled="refresh"> - <a-icon type="redo" /> - </a-button> - </span> + <div class="myComment" v-for="item in dataList" style="display: flex;padding: 0px 10px 10px 10px;"> + <div style="min-width: 15%;"> + <a :href="item.visitorHomePage" target="_blank" v-if="item.visitorHomePage!=''"> + <a-tooltip placement="bottomLeft" :title="item.visitorNickName"> + <span class="myTip">{{item.visitorNickName}} :</span> + </a-tooltip> + </a> + <a-tooltip placement="bottomLeft" :title="item.visitorNickName" v-else> + <span class="myTip">{{item.visitorNickName}} :</span> + </a-tooltip> + </div> + <div> + <div style="padding-bottom: 10px;"> + 在 + <router-link to="/comment" @click.native="handleCancel()" v-if="item.commentType==1"> + {{item.articleTitle}} + </router-link> + <router-link :to="{path:'/mdDetail',query:{id:item.articleId}}" :title="item.articleTitle" + @click.native="handleCancel()" v-else> + {{item.articleTitle}} + </router-link> + 中留言 </div> - </template> - </a-list> + <div class="commentContent" v-html="parseContent(item.commentContent)"></div> + </div> + </div> + <div :style="{ textAlign: 'center', marginTop: '12px', height: '32px', lineHeight: '32px' }"> + <a-button @click="loadMore" :disabled="refresh" v-if="showButton"> + 加载更多 + </a-button> + <a-button disabled v-else> + 更多记录就不展示啦.. + </a-button> + <span style="margin: 20px;"> + <a-button @click="reload" :disabled="refresh"> + <a-icon type="redo" /> + </a-button> + </span> + </div> </a-modal> </div> @@ -66,7 +52,7 @@ import { history } from '../../api/blogArticleComment.js' - + import OwOjsonConfig from '../../assets/OwO.json' export default { data() { return { @@ -74,16 +60,46 @@ visible: false, loading: false, pageNo: 1, - pageSize: 5, + pageSize: 3, showButton: true, refresh: false, + myOwOConfig: {}, + re: new RegExp(":&\\(\\S*?\\)", "g"), } }, beforeMount() {}, mounted() { - this.loadData() + this.loadMore() + + let packages = Object.keys(OwOjsonConfig) + for (let i = 0; i < packages.length; i++) { + let opackage = OwOjsonConfig[packages[i]].container + let type = OwOjsonConfig[packages[i]].type + for (let j = 0; j < opackage.length; j++) { + if (type == 'image') { + this.myOwOConfig[opackage[j].data] = `<img loading="lazy" class="biaoqing ` + opackage[j].css + + `" src="` + opackage[j].icon + `">` + } + } + } }, methods: { + parseContent(content) { + let tempStrArray = content.match(this.re); + + if (tempStrArray == null) { + return content; + } + + for (var i = 0; i < tempStrArray.length; i++) { + if (this.myOwOConfig[tempStrArray[i]] == undefined || this.myOwOConfig[tempStrArray[i]] == null) { + continue; + } + content = content.replace(tempStrArray[i], this.myOwOConfig[tempStrArray[i]]) + } + + return content; + }, loadMore() { this.$message.info("拉取信息中..") this.loadData() @@ -91,7 +107,7 @@ reload() { this.$message.info("重新拉取信息..") this.pageNo = 1; - this.pageSize = 5; + this.pageSize = 3; this.showButton = true; this.dataList = []; setTimeout(() => { @@ -133,24 +149,34 @@ }, } </script> -<style scoped> +<style lang="less"> .loadmore-list { min-height: 350px; } - .ant-list-item-meta-avatar { - width: 65px; + .commentContent { + + * { + max-width: 100% !important; + } } - .myhiden { - display: -webkit-container; - -webkit-line-clamp: 3; - text-overflow: ellipsis; - overflow: hidden; + .myComment { + a { + color: black; + font-size: 15px; + } + + img { + margin-bottom: 0.2rem; + height: 2rem; + } } - a { - color: black; + .myComment:hover { + // background: #d0d7dc; + background: #f5f8fa; + border-radius: 14px; } </style> -- Gitblit v1.9.1