feat(modal): add minHeight and height prop #156

Author: anncwb

src/components/Form/src/BasicForm.vue

@@ -31,17 +31,7 @@
   import type { AdvanceState } from './types/hooks';
   import type { CSSProperties, Ref, WatchStopHandle } from 'vue';
 
-  import {
-    defineComponent,
-    reactive,
-    ref,
-    computed,
-    unref,
-    onMounted,
-    watch,
-    toRefs,
-    toRaw,
-  } from 'vue';
+  import { defineComponent, reactive, ref, computed, unref, onMounted, watch, toRefs } from 'vue';
   import { Form, Row } from 'ant-design-vue';
   import FormItem from './components/FormItem';
   import FormAction from './components/FormAction.vue';

src/components/Form/src/hooks/useFormValues.ts

@@ -1,8 +1,9 @@
 import { isArray, isFunction, isObject, isString } from '/@/utils/is';
 import moment from 'moment';
-import { unref } from 'vue';
+import { unref, nextTick } from 'vue';
 import type { Ref, ComputedRef } from 'vue';
 import type { FieldMapToTime, FormSchema } from '../types/form';
+import { useModalContext } from '/@/components/Modal';
 
 interface UseFormValuesContext {
   transformDateFuncRef: Ref<Fn>;
@@ -18,6 +19,7 @@ export function useFormValues({
   getSchema,
   formModel,
 }: UseFormValuesContext) {
+  const modalFn = useModalContext();
   // Processing form values
   function handleFormValues(values: Recordable) {
     if (!isObject(values)) {
@@ -81,6 +83,10 @@ export function useFormValues({
       }
     });
     defaultValueRef.value = obj;
+    nextTick(() => {
+      //  Solve the problem of modal adaptive height calculation when the form is placed in the modal
+      modalFn?.redoModalHeight?.();
+    });
   }
 
   return { handleFormValues, initDefault };

src/components/Modal/src/BasicModal.vue

@@ -23,6 +23,8 @@
       :fullScreen="fullScreenRef"
       ref="modalWrapperRef"
       :loading="getProps.loading"
+      :minHeight="getProps.minHeight"
+      :height="getProps.height"
       :visible="visibleRef"
       :modalFooterHeight="footer !== undefined && !footer ? 0 : undefined"
       v-bind="omit(getProps.wrapperProps, 'visible')"

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

@@ -38,6 +38,7 @@
       modalHeaderHeight: propTypes.number.def(50),
       modalFooterHeight: propTypes.number.def(54),
       minHeight: propTypes.number.def(200),
+      height: propTypes.number,
       footerOffset: propTypes.number.def(0),
       visible: propTypes.bool,
       fullScreen: propTypes.bool,
@@ -142,7 +143,11 @@
             realHeightRef.value =
               window.innerHeight - props.modalFooterHeight - props.modalHeaderHeight;
           } else {
-            realHeightRef.value = realHeight > maxHeight ? maxHeight : realHeight + 16 + 30;
+            realHeightRef.value = props.height
+              ? props.height
+              : realHeight > maxHeight
+              ? maxHeight
+              : realHeight + 16 + 30;
           }
           emit('height-change', unref(realHeightRef));
         } catch (error) {

src/components/Modal/src/props.ts

@@ -8,6 +8,8 @@ const { t } = useI18n();
 
 export const modalProps = {
   visible: propTypes.bool,
+  height: propTypes.number,
+  minHeight: propTypes.number,
   // open drag
   draggable: propTypes.bool.def(true),
   centered: propTypes.bool,

src/components/Modal/src/types.ts

@@ -27,6 +27,8 @@ export interface ReturnInnerMethods extends ModalMethods {
 export type UseModalInnerReturnType = [RegisterFn, ReturnInnerMethods];
 
 export interface ModalProps {
+  minHeight?: number;
+  height?: number;
   // 启用wrapper后 底部可以适当增加高度
   wrapperFooterOffset?: number;
   draggable?: boolean;
@@ -195,6 +197,7 @@ export interface ModalWrapperProps {
   modalHeaderHeight: number;
   modalFooterHeight: number;
   minHeight: number;
+  height: number;
   visible: boolean;
   fullScreen: boolean;
   useWrapper: boolean;