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/mini/box12-comment.vue | 53 +++++++++++++++++++++++++++++++++++++++++++++--------
1 files changed, 45 insertions(+), 8 deletions(-)
diff --git a/src/components/mini/box12-comment.vue b/src/components/mini/box12-comment.vue
index 9e748ed..28c0ab0 100644
--- a/src/components/mini/box12-comment.vue
+++ b/src/components/mini/box12-comment.vue
@@ -6,7 +6,7 @@
</a-collapse-panel>
</a-collapse>
<div v-else>
- <replyBox ref="commentBoxId" v-bind="$attrs" @sendMsg="sendMsg()" ></replyBox>
+ <replyBox ref="commentBoxId" v-bind="$attrs" @sendMsg="sendMsg()"></replyBox>
</div>
<a-modal v-model="visible" :title="replyTaget" :footer="null"
@@ -114,12 +114,34 @@
default: false,
},
},
+ mounted() {
+ 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("\:\&\(.*\)");
-
- console.log(OwOjsonConfig);
- console.log(333);
+ 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;
},
updateCommentList(articleId) {
@@ -182,18 +204,33 @@
replyTaget: "",
visible: false,
commentListData: [],
+ myOwOConfig: {},
+ re: new RegExp(":&\\(\\S*?\\)", "g"),
}
}
}
</script>
<style lang="less">
- .myContent img {
- margin-bottom: -0.125rem;
- img min-height: 3.5rem;
+ img.biaoqing.quyin {
+ margin-bottom: 0.2rem;
+ min-height: 2.5rem;
height: 2em;
}
+ .ant-comment img,
+ .myContent img {
+ margin-bottom: 0.2rem;
+ min-height: 2.5rem;
+ height: 2em;
+ }
+
+ .myContent {
+ * {
+ max-width: 100% !important;
+ }
+ }
+
.samllPadding {
padding: 0px 3px 5px;
}
--
Gitblit v1.9.1