From 054cdefd40ac8963fac897e4fe98ffc1de4e0b69 Mon Sep 17 00:00:00 2001
From: inleft <inleft@qq.com>
Date: Wed, 17 Aug 2022 17:30:53 +0800
Subject: [PATCH] 重构消息盒子,优化表情组件
---
src/components/group/MyMessage.vue | 146 ++++++++++++++++++++++++++++--------------------
1 files changed, 86 insertions(+), 60 deletions(-)
diff --git a/src/components/group/MyMessage.vue b/src/components/group/MyMessage.vue
index 67fe22a..31428ee 100644
--- a/src/components/group/MyMessage.vue
+++ b/src/components/group/MyMessage.vue
@@ -2,61 +2,47 @@
<div class="myModal">
<a-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: 4,
+ pageSize: 3,
showButton: true,
refresh: false,
+ myOwOConfig: {},
+ re: new RegExp(":&\\(\\S*?\\)", "g"),
}
},
beforeMount() {},
mounted() {
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 = 4;
+ this.pageSize = 3;
this.showButton = true;
this.dataList = [];
setTimeout(() => {
@@ -133,18 +149,28 @@
},
}
</script>
-<style scoped>
+<style lang="less">
.loadmore-list {
min-height: 350px;
}
- .ant-list-item-meta-avatar {
- width: 65px;
+ .commentContent {
+ * {
+ max-width: 100% !important;
+ }
}
+ .myComment {
+ a {
+ color: black;
+ font-size: 15px;
+ }
- a {
- color: black;
+ img {
+ margin-bottom: 0.2rem;
+ min-height: 5rem;
+ height: 2em;
+ }
}
</style>
--
Gitblit v1.9.1