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);