From aa03c87383c703ddce7759bd7ba114709f2f5241 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=BB=84=E5=B0=8F=E6=B0=91?=
 <DesignHhuang@users.noreply.github.com>
Date: Tue, 10 Oct 2023 11:39:12 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20ScrollContainer=E7=9A=84=E4=B8=80?=
 =?UTF-8?q?=E4=B8=AA=E9=97=AE=E9=A2=98=20#3046=20(#3119)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Container/src/ScrollContainer.vue   | 10 +++++++++-
 .../Modal/src/components/ModalWrapper.vue          | 12 ++++++------
 src/components/Scrollbar/src/Scrollbar.vue         | 14 ++++++++++++++
 3 files changed, 29 insertions(+), 7 deletions(-)

diff --git a/src/components/Container/src/ScrollContainer.vue b/src/components/Container/src/ScrollContainer.vue
index ca190034540..2580eec9aa8 100644
--- a/src/components/Container/src/ScrollContainer.vue
+++ b/src/components/Container/src/ScrollContainer.vue
@@ -1,5 +1,10 @@
 <template>
-  <Scrollbar ref="scrollbarRef" class="scroll-container" v-bind="$attrs">
+  <Scrollbar
+    ref="scrollbarRef"
+    class="scroll-container"
+    :scrollHeight="scrollHeight"
+    v-bind="$attrs"
+  >
     <slot></slot>
   </Scrollbar>
 </template>
@@ -13,6 +18,9 @@
   export default defineComponent({
     name: 'ScrollContainer',
     components: { Scrollbar },
+    props: {
+      scrollHeight: { type: Number },
+    },
     setup() {
       const scrollbarRef = ref<Nullable<ScrollbarType>>(null);
 
diff --git a/src/components/Modal/src/components/ModalWrapper.vue b/src/components/Modal/src/components/ModalWrapper.vue
index 3fe44d1b101..9c5ad687afe 100644
--- a/src/components/Modal/src/components/ModalWrapper.vue
+++ b/src/components/Modal/src/components/ModalWrapper.vue
@@ -1,5 +1,5 @@
 <template>
-  <ScrollContainer ref="wrapperRef">
+  <ScrollContainer ref="wrapperRef" :scrollHeight="realHeight">
     <div ref="spinRef" :style="spinStyle" v-loading="loading" :loading-tip="loadingTip">
       <slot></slot>
     </div>
@@ -49,7 +49,7 @@
       const realHeightRef = ref(0);
       const minRealHeightRef = ref(0);
 
-      let realHeight = 0;
+      const realHeight = ref(0);
 
       let stopElResizeFn: AnyFunction = () => {};
 
@@ -145,7 +145,7 @@
           if (!spinEl) return;
           await nextTick();
           // if (!realHeight) {
-          realHeight = spinEl.scrollHeight;
+          realHeight.value = spinEl.scrollHeight;
           // }
 
           if (props.fullScreen) {
@@ -154,9 +154,9 @@
           } else {
             realHeightRef.value = props.height
               ? props.height
-              : realHeight > maxHeight
+              : realHeight.value > maxHeight
               ? maxHeight
-              : realHeight;
+              : realHeight.value;
           }
           emit('height-change', unref(realHeightRef));
         } catch (error) {
@@ -164,7 +164,7 @@
         }
       }
 
-      return { wrapperRef, spinRef, spinStyle, scrollTop, setModalHeight };
+      return { wrapperRef, spinRef, spinStyle, scrollTop, setModalHeight, realHeight };
     },
   });
 </script>
diff --git a/src/components/Scrollbar/src/Scrollbar.vue b/src/components/Scrollbar/src/Scrollbar.vue
index daeb2307f6e..8e2b3fef137 100644
--- a/src/components/Scrollbar/src/Scrollbar.vue
+++ b/src/components/Scrollbar/src/Scrollbar.vue
@@ -29,6 +29,7 @@
     provide,
     computed,
     unref,
+    watch,
   } from 'vue';
   import Bar from './bar';
 
@@ -64,6 +65,11 @@
         type: String,
         default: 'div',
       },
+      scrollHeight: {
+        // 用于监控内部scrollHeight的变化
+        type: Number,
+        default: 0,
+      },
     },
     setup(props) {
       const sizeWidth = ref('0');
@@ -99,6 +105,14 @@
         sizeWidth.value = widthPercentage < 100 ? widthPercentage + '%' : '';
       };
 
+      watch(
+        () => props.scrollHeight,
+        () => {
+          if (props.native) return;
+          update();
+        },
+      );
+
       onMounted(() => {
         if (props.native) return;
         nextTick(update);