fix(modal): ensure that the full screen height is calculated correctly

CHANGELOG.zh_CN.md

@@ -2,9 +2,15 @@
 
 ### ✨ Features
 
-- `Cropper` 头像裁剪新增圆形裁剪功能
-- 新增头像上传组件
-- `useDrawer`新增`closeDrawer`函数
+- **CropperImage** `Cropper` 头像裁剪新增圆形裁剪功能
+- **CropperAvatar** 新增头像上传组件
+- **Drawer** `useDrawer`新增`closeDrawer`函数
+
+### 🐛 Bug Fixes
+
+- **Modal** 修复全屏高度计算错误
+- **PageWrapper** 修复高度计算问题
+- 修复后台模式下，Iframe 路由错误
 
 ## 2.4.2(2021-06-10)
 

src/components/Drawer/src/BasicDrawer.vue

@@ -163,7 +163,7 @@
 
       function setDrawerProps(props: Partial<DrawerProps>): void {
         // Keep the last setDrawerProps
-        propsRef.value = deepMerge((unref(propsRef) as any) || {}, props);
+        propsRef.value = deepMerge(unref(propsRef), props);
 
         if (Reflect.has(props, 'visible')) {
           visibleRef.value = !!props.visible;

src/components/Drawer/src/useDrawer.ts

@@ -5,7 +5,6 @@ import type {
   DrawerProps,
   UseDrawerInnerReturnType,
 } from './typing';
-
 import {
   ref,
   getCurrentInstance,
@@ -16,11 +15,9 @@ import {
   toRaw,
   computed,
 } from 'vue';
-
 import { isProdMode } from '/@/utils/env';
 import { isFunction } from '/@/utils/is';
 import { tryOnUnmounted } from '@vueuse/core';
-
 import { isEqual } from 'lodash-es';
 import { error } from '/@/utils/log';
 

src/components/Modal/index.ts

@@ -1,7 +1,8 @@
+import { withInstall } from '/@/utils';
 import './src/index.less';
-import BasicModal from './src/BasicModal.vue';
+import basicModal from './src/BasicModal.vue';
 
-export { BasicModal };
+export const BasicModal = withInstall(basicModal);
 export { useModalContext } from './src/hooks/useModalContext';
 export { useModal, useModalInner } from './src/hooks/useModal';
-export * from './src/types';
+export * from './src/typing';

src/components/Modal/src/BasicModal.vue

@@ -49,7 +49,7 @@
   </Modal>
 </template>
 <script lang="ts">
-  import type { ModalProps, ModalMethods } from './types';
+  import type { ModalProps, ModalMethods } from './typing';
 
   import {
     defineComponent,
@@ -62,20 +62,17 @@
     getCurrentInstance,
     nextTick,
   } from 'vue';
-
   import Modal from './components/Modal';
   import ModalWrapper from './components/ModalWrapper.vue';
   import ModalClose from './components/ModalClose.vue';
   import ModalFooter from './components/ModalFooter.vue';
   import ModalHeader from './components/ModalHeader.vue';
-
   import { isFunction } from '/@/utils/is';
   import { deepMerge } from '/@/utils';
-
   import { basicProps } from './props';
   import { useFullScreen } from './hooks/useModalFullScreen';
-
   import { omit } from 'lodash-es';
+
   export default defineComponent({
     name: 'BasicModal',
     components: { Modal, ModalWrapper, ModalClose, ModalFooter, ModalHeader },
@@ -189,7 +186,7 @@
        */
       function setModalProps(props: Partial<ModalProps>): void {
         // Keep the last setModalProps
-        propsRef.value = deepMerge(unref(propsRef) || {}, props);
+        propsRef.value = deepMerge(unref(propsRef), props);
         if (!Reflect.has(props, 'visible')) return;
         visibleRef.value = !!props.visible;
       }

src/components/Modal/src/components/Modal.tsx

@@ -20,7 +20,6 @@ export default defineComponent({
 
     return () => {
       const propsData = { ...unref(attrs), ...props } as Recordable;
-
       return <Modal {...propsData}>{extendSlots(slots)}</Modal>;
     };
   },

src/components/Modal/src/components/ModalClose.vue

@@ -2,7 +2,6 @@
   <div :class="getClass">
     <template v-if="canFullscreen">
       <FullscreenExitOutlined role="full" @click="handleFullScreen" v-if="fullScreen" />
-
       <FullscreenOutlined role="close" @click="handleFullScreen" v-else />
     </template>
     <CloseOutlined @click="handleCancel" />
@@ -12,14 +11,13 @@
   import { defineComponent, computed } from 'vue';
   import { FullscreenExitOutlined, FullscreenOutlined, CloseOutlined } from '@ant-design/icons-vue';
   import { useDesign } from '/@/hooks/web/useDesign';
-  import { propTypes } from '/@/utils/propTypes';
 
   export default defineComponent({
     name: 'ModalClose',
     components: { FullscreenExitOutlined, FullscreenOutlined, CloseOutlined },
     props: {
-      canFullscreen: propTypes.bool.def(true),
-      fullScreen: propTypes.bool,
+      canFullscreen: { type: Boolean, default: true },
+      fullScreen: { type: Boolean },
     },
     emits: ['cancel', 'fullscreen'],
     setup(props, { emit }) {
@@ -38,6 +36,7 @@
       function handleCancel(e: Event) {
         emit('cancel', e);
       }
+
       function handleFullScreen(e: Event) {
         e?.stopPropagation();
         e?.preventDefault();

src/components/Modal/src/components/ModalFooter.vue

@@ -33,6 +33,7 @@
       function handleCancel(e: Event) {
         emit('cancel', e);
       }
+
       return { handleOk, handleCancel };
     },
   });

src/components/Modal/src/components/ModalHeader.vue

@@ -8,15 +8,14 @@
   import { defineComponent } from 'vue';
   import { BasicTitle } from '/@/components/Basic';
 
-  import { propTypes } from '/@/utils/propTypes';
   export default defineComponent({
     name: 'BasicModalHeader',
     components: { BasicTitle },
     props: {
       helpMessage: {
         type: [String, Array] as PropType<string | string[]>,
       },
-      title: propTypes.string,
+      title: { type: String },
     },
   });
 </script>

src/components/Modal/src/components/ModalWrapper.vue

@@ -6,9 +6,7 @@
   </ScrollContainer>
 </template>
 <script lang="ts">
-  import type { ModalWrapperProps } from '../types';
   import type { CSSProperties } from 'vue';
-
   import {
     defineComponent,
     computed,
@@ -20,31 +18,31 @@
     nextTick,
     onUnmounted,
   } from 'vue';
-
   import { useWindowSizeFn } from '/@/hooks/event/useWindowSizeFn';
   import { ScrollContainer } from '/@/components/Container';
-
-  import { propTypes } from '/@/utils/propTypes';
   import { createModalContext } from '../hooks/useModalContext';
+  import { useMutationObserver } from '@vueuse/core';
+
+  const props = {
+    loading: { type: Boolean },
+    useWrapper: { type: Boolean, default: true },
+    modalHeaderHeight: { type: Number, default: 57 },
+    modalFooterHeight: { type: Number, default: 74 },
+    minHeight: { type: Number, default: 200 },
+    height: { type: Number },
+    footerOffset: { type: Number, default: 0 },
+    visible: { type: Boolean },
+    fullScreen: { type: Boolean },
+    loadingTip: { type: String },
+  };
 
   export default defineComponent({
     name: 'ModalWrapper',
     components: { ScrollContainer },
     inheritAttrs: false,
-    props: {
-      loading: propTypes.bool,
-      useWrapper: propTypes.bool.def(true),
-      modalHeaderHeight: propTypes.number.def(57),
-      modalFooterHeight: propTypes.number.def(74),
-      minHeight: propTypes.number.def(200),
-      height: propTypes.number,
-      footerOffset: propTypes.number.def(0),
-      visible: propTypes.bool,
-      fullScreen: propTypes.bool,
-      loadingTip: propTypes.string,
-    },
+    props,
     emits: ['height-change', 'ext-height'],
-    setup(props: ModalWrapperProps, { emit }) {
+    setup(props, { emit }) {
       const wrapperRef = ref<ComponentRef>(null);
       const spinRef = ref<ElRef>(null);
       const realHeightRef = ref(0);
@@ -56,15 +54,25 @@
 
       useWindowSizeFn(setModalHeight.bind(null, false));
 
+      useMutationObserver(
+        spinRef,
+        () => {
+          setModalHeight();
+        },
+        {
+          attributes: true,
+          subtree: true,
+        }
+      );
+
       createModalContext({
         redoModalHeight: setModalHeight,
       });
 
       const spinStyle = computed((): CSSProperties => {
         return {
           minHeight: `${props.minHeight}px`,
-          // padding 28
-          maxHeight: `${unref(realHeightRef)}px`,
+          [props.fullScreen ? 'height' : 'maxHeight']: `${unref(realHeightRef)}px`,
         };
       });
 
@@ -87,7 +95,6 @@
       onMounted(() => {
         const { modalHeaderHeight, modalFooterHeight } = props;
         emit('ext-height', modalHeaderHeight + modalFooterHeight);
-        // listenElResize();
       });
 
       onUnmounted(() => {

src/components/Modal/src/hooks/useModal.ts

@@ -4,8 +4,7 @@ import type {
   ModalProps,
   ReturnMethods,
   UseModalInnerReturnType,
-} from '../types';
-
+} from '../typing';
 import {
   ref,
   onUnmounted,
@@ -20,40 +19,42 @@ import { isProdMode } from '/@/utils/env';
 import { isFunction } from '/@/utils/is';
 import { isEqual } from 'lodash-es';
 import { tryOnUnmounted } from '@vueuse/core';
-
 import { error } from '/@/utils/log';
 import { computed } from 'vue';
-const dataTransferRef = reactive<any>({});
+
+const dataTransfer = reactive<any>({});
 
 const visibleData = reactive<{ [key: number]: boolean }>({});
 
 /**
  * @description: Applicable to independent modal and call outside
  */
 export function useModal(): UseModalReturnType {
-  const modalRef = ref<Nullable<ModalMethods>>(null);
-  const loadedRef = ref<Nullable<boolean>>(false);
-  const uidRef = ref<string>('');
+  const modal = ref<Nullable<ModalMethods>>(null);
+  const loaded = ref<Nullable<boolean>>(false);
+  const uid = ref<string>('');
 
   function register(modalMethod: ModalMethods, uuid: string) {
-    uidRef.value = uuid;
-
+    if (!getCurrentInstance()) {
+      throw new Error('useModal() can only be used inside setup() or functional components!');
+    }
+    uid.value = uuid;
     isProdMode() &&
       onUnmounted(() => {
-        modalRef.value = null;
-        loadedRef.value = false;
-        dataTransferRef[unref(uidRef)] = null;
+        modal.value = null;
+        loaded.value = false;
+        dataTransfer[unref(uid)] = null;
       });
-    if (unref(loadedRef) && isProdMode() && modalMethod === unref(modalRef)) return;
+    if (unref(loaded) && isProdMode() && modalMethod === unref(modal)) return;
 
-    modalRef.value = modalMethod;
+    modal.value = modalMethod;
     modalMethod.emitVisible = (visible: boolean, uid: number) => {
       visibleData[uid] = visible;
     };
   }
 
   const getInstance = () => {
-    const instance = unref(modalRef);
+    const instance = unref(modal);
     if (!instance) {
       error('useModal instance is undefined!');
     }
@@ -66,7 +67,7 @@ export function useModal(): UseModalReturnType {
     },
 
     getVisible: computed((): boolean => {
-      return visibleData[~~unref(uidRef)];
+      return visibleData[~~unref(uid)];
     }),
 
     redoModalHeight: () => {
@@ -79,15 +80,15 @@ export function useModal(): UseModalReturnType {
       });
 
       if (!data) return;
-
+      const id = unref(uid);
       if (openOnSet) {
-        dataTransferRef[unref(uidRef)] = null;
-        dataTransferRef[unref(uidRef)] = toRaw(data);
+        dataTransfer[id] = null;
+        dataTransfer[id] = toRaw(data);
         return;
       }
-      const equal = isEqual(toRaw(dataTransferRef[unref(uidRef)]), toRaw(data));
+      const equal = isEqual(toRaw(dataTransfer[id]), toRaw(data));
       if (!equal) {
-        dataTransferRef[unref(uidRef)] = toRaw(data);
+        dataTransfer[id] = toRaw(data);
       }
     },
 
@@ -103,9 +104,6 @@ export const useModalInner = (callbackFn?: Fn): UseModalInnerReturnType => {
   const currentInstance = getCurrentInstance();
   const uidRef = ref<string>('');
 
-  // currentInstall.type.emits = [...currentInstall.type.emits, 'register'];
-  // Object.assign(currentInstall.type.emits, ['register']);
-
   const getInstance = () => {
     const instance = unref(modalInstanceRef);
     if (!instance) {
@@ -125,7 +123,7 @@ export const useModalInner = (callbackFn?: Fn): UseModalInnerReturnType => {
   };
 
   watchEffect(() => {
-    const data = dataTransferRef[unref(uidRef)];
+    const data = dataTransfer[unref(uidRef)];
     if (!data) return;
     if (!callbackFn || !isFunction(callbackFn)) return;
     nextTick(() => {

src/components/Modal/src/hooks/useModalFullScreen.ts

@@ -12,7 +12,6 @@ export function useFullScreen(context: UseFullScreenContext) {
 
   const getWrapClassName = computed(() => {
     const clsName = unref(context.wrapClassName) || '';
-
     return unref(fullScreenRef) ? `fullscreen-modal ${clsName} ` : unref(clsName);
   });