fix: 修复meDialog 关闭后再打开高度错误bug

meadmin-cn · Jun 19, 2023 · c86a86e · c86a86e
1 parent bb8bf4d
commit c86a86e
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 16 deletions.
diff --git a/src/components/meDialog/hooks/minMax.ts b/src/components/meDialog/hooks/minMax.ts
@@ -18,9 +18,20 @@ export default (el: HTMLDivElement & { fullscreen: boolean }) => {
   const dialogHeaderEl = el.querySelector('.el-dialog__header') as HTMLDivElement;
   //弹窗
   const dragDom = el;
-  dragDom.style.maxHeight = 'unset';
-  dragDom.style.width = nowWidth + 'px';
-  dragDom.style.height = nowHight + 'px';
+  let setedWidth = '';
+  let setedHeight = '';
+  const setWidthHeight = (width: string, height: string) => {
+    dragDom.style.maxHeight = 'unset';
+    if (width) {
+      setedWidth = width;
+      dragDom.style.width = width;
+    }
+    if (height) {
+      setedHeight = height;
+      dragDom.style.height = height;
+    }
+  };
+  setWidthHeight(nowWidth + 'px', nowHight + 'px');
   //清除选择头部文字效果
   dialogHeaderEl.onselectstart = () => false;
   //头部加上可拖动cursor
@@ -89,8 +100,7 @@ export default (el: HTMLDivElement & { fullscreen: boolean }) => {
   const setMaxMin = () => {
     if (el.fullscreen) {
       maxMin.innerHTML = fullscreenSvg;
-      dragDom.style.height = nowHight + 'px';
-      dragDom.style.width = nowWidth + 'px';
+      setWidthHeight(nowWidth + 'px', nowHight + 'px');
       dragDom.style.marginTop = nowMarginTop;
       dragDom.style.position = 'relative';
       el.fullscreen = false;
@@ -103,8 +113,7 @@ export default (el: HTMLDivElement & { fullscreen: boolean }) => {
       nowMarginTop = dragDom.style.marginTop;
       dragDom.style.left = '0';
       dragDom.style.top = '0';
-      dragDom.style.height = '100vh';
-      dragDom.style.width = '100vw';
+      setWidthHeight('100vw', '100vh');
       dragDom.style.marginTop = '0';
       dragDom.style.position = 'fixed';
       el.fullscreen = true;
@@ -144,8 +153,7 @@ export default (el: HTMLDivElement & { fullscreen: boolean }) => {
       const x = e.clientX - disX + (e.clientX - clientX); //这里 由于elementUI的dialog控制居中的，所以水平拉伸效果是双倍
       const y = e.clientY - disY;
       //比较是否小于最小宽高
-      dragDom.style.width = x > minWidth ? `${x}px` : minWidth + 'px';
-      dragDom.style.height = y > minHeight ? `${y}px` : minHeight + 'px';
+      setWidthHeight(x > minWidth ? `${x}px` : minWidth + 'px', y > minHeight ? `${y}px` : minHeight + 'px');
     };
     //拉伸结束
     document.onmouseup = function () {
@@ -154,4 +162,5 @@ export default (el: HTMLDivElement & { fullscreen: boolean }) => {
       el.dispatchEvent(resizeEvent);
     };
   };
+  return { resetWH: () => setWidthHeight(setedWidth, setedHeight) };
 };
diff --git a/src/components/meDialog/index.vue b/src/components/meDialog/index.vue
@@ -1,8 +1,6 @@
 <template>
-  <el-dialog ref="elDialogRef" class="me-dialog" :style="{ maxHeight }">
-    <template v-for="(item, key) in $slots" :key="key" #[key]>
-      <component :is="item as any"></component>
-    </template>
+  <el-dialog ref="elDialogRef" class="me-dialog" :style="{ maxHeight }" @open="openHandle">
+    <template v-for="(item, key) in $slots" :key="key" #[key]> <component :is="item as any"></component> </template>a
   </el-dialog>
 </template>
 <script lang="ts">
@@ -19,6 +17,10 @@ const props = {
     default: '60vh',
   },
 };
+
+const emits = ['open'] as unknown as {
+  open: () => void;
+};
 export default defineComponent<
   ComponentProps<typeof ElDialog> & ExtractPublicPropTypes<typeof props>,
   {
@@ -29,25 +31,32 @@ export default defineComponent<
   Record<string, any>,
   ComponentOptionsMixin,
   ComponentOptionsMixin,
-  Record<string, any>
+  typeof emits
 >({
   name: 'MeDialog',
   props: props as any,
-  setup(props, { expose }) {
+  emits: emits,
+  setup(props, { expose, emit }) {
     const elDialogRef = ref<InstanceType<typeof ElDialog>>();
+    let resetWH: undefined | (() => void);
     watch(
       [() => elDialogRef.value?.dialogContentRef, () => props.full],
       async () => {
         if (elDialogRef.value?.dialogContentRef && props.full) {
           await nextTick();
-          minMax(elDialogRef.value!.dialogContentRef.$el);
+          resetWH = minMax(elDialogRef.value!.dialogContentRef.$el)?.resetWH;
         }
       },
       { immediate: true },
     );
+    const openHandle = () => {
+      resetWH?.();
+      emit('open');
+    };
     expose({ elDialogRef });
     return {
       elDialogRef,
+      openHandle,
     };
   },
 });
@@ -71,6 +80,8 @@ export default defineComponent<
   .el-dialog__body {
     overflow-y: auto;
     flex: 1;
+    margin-top: 10px;
+    flex-shrink: 0;
   }
   .el-dialog__footer {
     position: sticky;