diff --git a/src/components/dialogs/SafeDialog.vue b/src/components/dialogs/SafeDialog.vue
index cb89294f..0e2dbada 100644
--- a/src/components/dialogs/SafeDialog.vue
+++ b/src/components/dialogs/SafeDialog.vue
@@ -5,7 +5,8 @@
v-bind="attrs"
:close-on-click-modal="false"
@open="handleOpen"
- @close="handleClose">
+ @close="handleClose"
+ :top="marginTop">
@@ -38,6 +39,7 @@
const mouseDownOnWrapper = ref(false);
const styleObserver = ref(null);
const resizeObserver = ref(null);
+ const marginTop = ref('5px');
let handleResize = null;
const handleOpen = () => {
@@ -46,7 +48,7 @@
nextTick(() => {
addWrapperListeners();
removeTitleAttribute();
- centerDialog();
+ adjustDialogMarginTop();
});
};
@@ -118,50 +120,22 @@
mouseDownOnWrapper.value = false;
};
- const centerDialog = () => {
+ const adjustDialogMarginTop = () => {
const wrapper = elDialogRef.value?.$el;
if (!wrapper) return;
const dialog = wrapper.querySelector('.el-dialog');
if (!dialog) return;
- const applyCenterStyle = () => {
+ const applyStyle = () => {
const dialogHeight = dialog.offsetHeight;
const viewportHeight = window.innerHeight;
- let marginTop;
- if (dialogHeight >= viewportHeight) {
- marginTop = '25px';
- } else {
- const topOffset = Math.max(0, (viewportHeight - dialogHeight) / 2);
- marginTop = `${topOffset}px`;
- }
-
- dialog.style.setProperty('margin-top', marginTop, 'important');
+ const topOffset = Math.max(0, (viewportHeight - dialogHeight) * 0.2);
+ marginTop.value = `${topOffset}px`;
};
- applyCenterStyle();
-
- styleObserver.value = new MutationObserver(() => {
- applyCenterStyle();
- });
-
- styleObserver.value.observe(dialog, {
- attributes: true,
- attributeFilter: ['style']
- });
-
- handleResize = () => {
- applyCenterStyle();
- };
-
- window.addEventListener('resize', handleResize);
-
- resizeObserver.value = new ResizeObserver(() => {
- applyCenterStyle();
- });
-
- resizeObserver.value.observe(dialog);
+ applyStyle();
};
onBeforeUnmount(() => {