diff --git a/packages/frontend/src/components/MkContainer.vue b/packages/frontend/src/components/MkContainer.vue index d2d0fa3e4b..f7cc697d67 100644 --- a/packages/frontend/src/components/MkContainer.vue +++ b/packages/frontend/src/components/MkContainer.vue @@ -34,7 +34,7 @@ </template> <script lang="ts" setup> -import { onMounted, ref, shallowRef, watch } from 'vue'; +import { onMounted, onUnmounted, ref, shallowRef, watch } from 'vue'; import { defaultStore } from '@/store'; import { i18n } from '@/i18n'; @@ -83,13 +83,19 @@ function afterLeave(el) { const calcOmit = () => { if (omitted.value || ignoreOmit.value || props.maxHeight == null) return; + if (!contentEl.value) return; const height = contentEl.value.offsetHeight; omitted.value = height > props.maxHeight; }; +const omitObserver = new ResizeObserver((entries, observer) => { + calcOmit(); +}); + onMounted(() => { watch(showBody, v => { - const headerHeight = props.showHeader ? headerEl.value.offsetHeight : 0; + if (!rootEl.value) return; + const headerHeight = props.showHeader ? headerEl.value?.offsetHeight ?? 0 : 0; rootEl.value.style.minHeight = `${headerHeight}px`; if (v) { rootEl.value.style.flexBasis = 'auto'; @@ -100,13 +106,15 @@ onMounted(() => { immediate: true, }); - rootEl.value.style.setProperty('--maxHeight', props.maxHeight + 'px'); + if (rootEl.value) rootEl.value.style.setProperty('--maxHeight', props.maxHeight + 'px'); calcOmit(); - new ResizeObserver((entries, observer) => { - calcOmit(); - }).observe(contentEl.value); + if (contentEl.value) omitObserver.observe(contentEl.value); +}); + +onUnmounted(() => { + omitObserver.disconnect(); }); </script> diff --git a/packages/frontend/src/components/MkModal.vue b/packages/frontend/src/components/MkModal.vue index a33bb2d0e2..b9ce6de697 100644 --- a/packages/frontend/src/components/MkModal.vue +++ b/packages/frontend/src/components/MkModal.vue @@ -17,7 +17,7 @@ </template> <script lang="ts" setup> -import { nextTick, onMounted, watch, provide } from 'vue'; +import { nextTick, onMounted, watch, provide, onUnmounted } from 'vue'; import * as os from '@/os'; import { isTouchUsing } from '@/scripts/touch'; import { defaultStore } from '@/store'; @@ -38,7 +38,7 @@ type ModalTypes = 'popup' | 'dialog' | 'drawer'; const props = withDefaults(defineProps<{ manualShowing?: boolean | null; anchor?: { x: string; y: string; }; - src?: HTMLElement; + src?: HTMLElement | null; preferType?: ModalTypes | 'auto'; zPriority?: 'low' | 'middle' | 'high'; noOverlap?: boolean; @@ -264,6 +264,10 @@ const onOpened = () => { }, { passive: true }); }; +const alignObserver = new ResizeObserver((entries, observer) => { + align(); +}); + onMounted(() => { watch(() => props.src, async () => { if (props.src) { @@ -278,12 +282,14 @@ onMounted(() => { }, { immediate: true }); nextTick(() => { - new ResizeObserver((entries, observer) => { - align(); - }).observe(content!); + alignObserver.observe(content!); }); }); +onUnmounted(() => { + alignObserver.disconnect(); +}); + defineExpose({ close, }); diff --git a/packages/frontend/src/components/MkOmit.vue b/packages/frontend/src/components/MkOmit.vue index e2d68d12c3..668f9ff5af 100644 --- a/packages/frontend/src/components/MkOmit.vue +++ b/packages/frontend/src/components/MkOmit.vue @@ -8,7 +8,7 @@ </template> <script lang="ts" setup> -import { onMounted } from 'vue'; +import { onMounted, onUnmounted } from 'vue'; import { i18n } from '@/i18n'; const props = withDefaults(defineProps<{ @@ -21,16 +21,22 @@ let content = $shallowRef<HTMLElement>(); let omitted = $ref(false); let ignoreOmit = $ref(false); -onMounted(() => { - const calcOmit = () => { - if (omitted || ignoreOmit) return; - omitted = content.offsetHeight > props.maxHeight; - }; +const calcOmit = () => { + if (omitted || ignoreOmit) return; + omitted = content.offsetHeight > props.maxHeight; +}; +const omitObserver = new ResizeObserver((entries, observer) => { calcOmit(); - new ResizeObserver((entries, observer) => { - calcOmit(); - }).observe(content); +}); + +onMounted(() => { + calcOmit(); + omitObserver.observe(content); +}); + +onUnmounted(() => { + omitObserver.disconnect(); }); </script>