fix: ScrollContainer的一个问题 #3046 (#3119)

vbenjs · Oct 10, 2023 · aa03c87 · aa03c87
1 parent f5ce480
commit aa03c87
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 7 deletions.
diff --git 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
@@ -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,17 +154,17 @@
           } else {
             realHeightRef.value = props.height
               ? props.height
-              : realHeight > maxHeight
+              : realHeight.value > maxHeight
               ? maxHeight
-              : realHeight;
+              : realHeight.value;
           }
           emit('height-change', unref(realHeightRef));
         } catch (error) {
           console.log(error);
         }
       }
 
-      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
@@ -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);