fix(frontend): disconnect ResizeObserver
This commit is contained in:
parent
6addf9002c
commit
1cc616b86c
3 changed files with 40 additions and 20 deletions
|
@ -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>
|
||||
|
||||
|
|
|
@ -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,
|
||||
});
|
||||
|
|
|
@ -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>
|
||||
|
||||
|
|
Loading…
Reference in a new issue