From 57314ee1d08a24dac7271b7e9f9438bbe4d52917 Mon Sep 17 00:00:00 2001
From: xingyu <xingyu4j@vip.qq.com>
Date: Tue, 10 Oct 2023 12:12:33 +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?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Container/src/ScrollContainer.vue         | 11 ++++++-
 .../Modal/src/components/ModalWrapper.vue     |  8 ++---
 src/components/Scrollbar/src/Scrollbar.vue    | 32 +++++++++++++------
 3 files changed, 36 insertions(+), 15 deletions(-)

diff --git a/src/components/Container/src/ScrollContainer.vue b/src/components/Container/src/ScrollContainer.vue
index 4aaa25d3..2f955e47 100644
--- a/src/components/Container/src/ScrollContainer.vue
+++ b/src/components/Container/src/ScrollContainer.vue
@@ -6,6 +6,10 @@ import { useScrollTo } from '@/hooks/event/useScrollTo'
 
 defineOptions({ name: 'ScrollContainer' })
 
+defineProps({
+  scrollHeight: { type: Number },
+})
+
 const scrollbarRef = ref<Nullable<ScrollbarType>>(null)
 
 /**
@@ -72,7 +76,12 @@ defineExpose({ scrollbarRef, scrollTo, scrollBottom, getScrollWrap })
 </script>
 
 <template>
-  <Scrollbar ref="scrollbarRef" class="scroll-container" v-bind="$attrs">
+  <Scrollbar
+    ref="scrollbarRef"
+    class="scroll-container"
+    :scroll-height="scrollHeight"
+    v-bind="$attrs"
+  >
     <slot />
   </Scrollbar>
 </template>
diff --git a/src/components/Modal/src/components/ModalWrapper.vue b/src/components/Modal/src/components/ModalWrapper.vue
index 705d7c1b..e8c7bef9 100644
--- a/src/components/Modal/src/components/ModalWrapper.vue
+++ b/src/components/Modal/src/components/ModalWrapper.vue
@@ -26,7 +26,7 @@ const spinRef = ref<ElRef>(null)
 const realHeightRef = ref(0)
 const minRealHeightRef = ref(0)
 
-let realHeight = 0
+const realHeight = ref(0);
 
 const stopElResizeFn: Fn = () => {}
 
@@ -122,13 +122,13 @@ async function setModalHeight() {
       return
     await nextTick()
     // if (!realHeight) {
-    realHeight = spinEl.scrollHeight
+    realHeight.value = spinEl.scrollHeight
     // }
 
     if (props.fullScreen)
       realHeightRef.value = window.innerHeight - props.modalFooterHeight - props.modalHeaderHeight - 28
     else
-      realHeightRef.value = props.height ? props.height : realHeight > maxHeight ? maxHeight : realHeight
+      realHeightRef.value = props.height ? props.height : realHeight.value > maxHeight ? maxHeight : realHeight.value
 
     emit('heightChange', unref(realHeightRef))
   }
@@ -141,7 +141,7 @@ defineExpose({ scrollTop })
 </script>
 
 <template>
-  <ScrollContainer ref="wrapperRef">
+  <ScrollContainer ref="wrapperRef" :scrollHeight="realHeight">
     <div ref="spinRef" v-loading="loading" :style="spinStyle" :loading-tip="loadingTip">
       <slot />
     </div>
diff --git a/src/components/Scrollbar/src/Scrollbar.vue b/src/components/Scrollbar/src/Scrollbar.vue
index 81c06306..b4f74001 100644
--- a/src/components/Scrollbar/src/Scrollbar.vue
+++ b/src/components/Scrollbar/src/Scrollbar.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { computed, nextTick, onBeforeUnmount, onMounted, provide, ref, unref } from 'vue'
+import { computed, nextTick, onBeforeUnmount, onMounted, provide, ref, unref, watch } from 'vue'
 import { toObject } from './util'
 import Bar from './bar'
 import { addResizeListener, removeResizeListener } from '@/utils/event'
@@ -33,6 +33,11 @@ const props = defineProps({
     type: String,
     default: 'div',
   },
+  scrollHeight: {
+    // 用于监控内部scrollHeight的变化
+    type: Number,
+    default: 0,
+  },
 })
 
 const sizeWidth = ref('0')
@@ -69,6 +74,15 @@ function update() {
   sizeWidth.value = widthPercentage < 100 ? `${widthPercentage}%` : ''
 }
 
+watch(
+  () => props.scrollHeight,
+  () => {
+    if (props.native)
+      return
+    update()
+  },
+)
+
 onMounted(() => {
   if (props.native)
     return
@@ -94,10 +108,8 @@ onBeforeUnmount(() => {
 <template>
   <div class="scrollbar">
     <div
-      ref="wrap"
-      class="scrollbar__wrap" :class="[wrapClass, native ? '' : 'scrollbar__wrap--hidden-default']"
-      :style="style as any"
-      @scroll="handleScroll"
+      ref="wrap" class="scrollbar__wrap" :class="[wrapClass, native ? '' : 'scrollbar__wrap--hidden-default']"
+      :style="style as any" @scroll="handleScroll"
     >
       <component :is="tag" ref="resize" class="scrollbar__view" :class="[viewClass]" :style="viewStyle">
         <slot />
@@ -160,7 +172,7 @@ onBeforeUnmount(() => {
       top: 2px;
       width: 6px;
 
-      & > div {
+      &>div {
         width: 100%;
       }
     }
@@ -169,16 +181,16 @@ onBeforeUnmount(() => {
       left: 2px;
       height: 6px;
 
-      & > div {
+      &>div {
         height: 100%;
       }
     }
   }
 }
 
-.scrollbar:active > .scrollbar__bar,
-.scrollbar:focus > .scrollbar__bar,
-.scrollbar:hover > .scrollbar__bar {
+.scrollbar:active>.scrollbar__bar,
+.scrollbar:focus>.scrollbar__bar,
+.scrollbar:hover>.scrollbar__bar {
   opacity: 1;
   transition: opacity 340ms ease-out;
 }