From b1254d2b87d42a2c4b2ecd508d92555eb07d45cb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E2=80=9Chuailei000=E2=80=9D?= <2280131253@qq.com>
Date: Fri, 10 Nov 2023 18:24:20 +0800
Subject: [PATCH] =?UTF-8?q?perf:=20=E4=BC=98=E5=8C=96markdown=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Widgets/MarkDown/index.vue | 35 +++++++++++++++++++----
 1 file changed, 30 insertions(+), 5 deletions(-)

diff --git a/src/components/Widgets/MarkDown/index.vue b/src/components/Widgets/MarkDown/index.vue
index ec9a854fe..6e2315cee 100644
--- a/src/components/Widgets/MarkDown/index.vue
+++ b/src/components/Widgets/MarkDown/index.vue
@@ -8,7 +8,7 @@
           </span>
         </div>
       </div>
-      <el-col :span="span">
+      <el-col :span="span" :style="{'height': height + 'px' }">
         <el-input
           v-model="iValue"
           autosize
@@ -17,7 +17,7 @@
           @change="onChange"
         />
       </el-col>
-      <el-col v-if="isShow" :span="span">
+      <el-col v-show="isShow" :span="span">
         <VueMarkdown class="result-html" :source="iValue" :show="true" :html="true" />
       </el-col>
     </el-row>
@@ -49,11 +49,33 @@ export default {
   },
   data() {
     return {
+      height: 0,
+      resizeObserver: null,
       span: 12,
       isShow: true,
       iValue: this.value
     }
   },
+  mounted() {
+    this.$nextTick(() => {
+      this.resizeObserver = new ResizeObserver(entries => {
+        // 监听高度变化
+        const height = entries[0].target.offsetHeight
+        if (height) {
+          this.height = height
+        }
+      })
+      const el = document.querySelector('.result-html')
+      this.resizeObserver.observe(el)
+    })
+  },
+  beforeDestroy() {
+    const el = document.querySelector('.result-html')
+    if (el) {
+      this.resizeObserver.unobserve(el)
+    }
+    this.resizeObserver = null
+  },
   methods: {
     onChange() {
       this.$emit('change', this.iValue)
@@ -76,14 +98,17 @@ export default {
   font-size: 13px;
 }
 
->>> .el-textarea__inner {
-  min-height: 210px !important;
+>>> .el-textarea {
+  height: 100% !important;
+  .el-textarea__inner {
+    min-height: 210px !important;
+    height: 100% !important;
+  }
 }
 .source {
   padding: 6px;
 }
 .result-html {
-  height: 100%;
   min-height: 210px;
   margin-left: 4px;
   padding: 5px 10px;