feat(modal): add redoModalHeight for useModalInner

允许在Modal内部动态加载内容后重新调整高度

feat(modal): add redoModalHeight for useModalInner
允许在Modal内部动态加载内容后重新调整高度
无木
1 parent 9e2aa20d
Showing 4 changed files with 58 additions and 13 deletions
src/components/Modal/src/hooks/useModal.ts
src/components/Modal/src/types.ts
src/views/demo/comp/modal/Modal1.vue
src/views/demo/comp/modal/index.vue
@@ -150,6 +150,11 @@ export const useModalInner = (callbackFn?: Fn): UseModalInnerReturnType =&gt; {
       setModalProps: (props: Partial<ModalProps>) => {
         getInstance()?.setModalProps(props);
       },
+
+      redoModalHeight: () => {
+        const callRedo = getInstance()?.redoModalHeight;
+        callRedo && callRedo();
+      },
     },
   ];
 };
@@ -23,6 +23,7 @@ export interface ReturnInnerMethods extends ModalMethods {
   changeLoading: (loading: boolean) => void;
   changeOkLoading: (loading: boolean) => void;
   getVisible?: ComputedRef<boolean>;
+  redoModalHeight: () => void;
 }
 export type UseModalInnerReturnType = [RegisterFn, ReturnInnerMethods];
 <template>
-  <BasicModal v-bind="$attrs" title="Modal Title" :helpMessage="['提示1', '提示2']">
-    Modal Info.
+  <BasicModal
+    v-bind="$attrs"
+    destroyOnClose
+    @register="register"
+    title="Modal Title"
+    :helpMessage="['提示1', '提示2']"
+    @visible-change="handleShow"
+  >
+    <template v-if="loading">
+      <div class="empty-tips"> 加载中，稍等3秒…… </div>
+    </template>
+    <template v-if="!loading">
+      <ul>
+        <li v-for="index in lines" :key="index">加载完成{{ index }}！</li>
+      </ul>
+    </template>
   </BasicModal>
 </template>
 <script lang="ts">
-  import { defineComponent } from 'vue';
-  import { BasicModal } from '/@/components/Modal';
+  import { defineComponent, ref } from 'vue';
+  import { BasicModal, useModalInner } from '/@/components/Modal';
   export default defineComponent({
     components: { BasicModal },
+    setup() {
+      const loading = ref(true);
+      const lines = ref(10);
+      const [register, { setModalProps, redoModalHeight }] = useModalInner();
+      function handleShow(visible: boolean) {
+        if (visible) {
+          loading.value = true;
+          setModalProps({ loading: true });
+          setTimeout(() => {
+            lines.value = Math.round(Math.random() * 20 + 10);
+            loading.value = false;
+            setModalProps({ loading: false });
+            redoModalHeight();
+          }, 3000);
+        }
+      }
+      return { register, loading, handleShow, lines };
+    },
   });
 </script>
+<style scoped>
+  .empty-tips {
+    height: 100px;
+    line-height: 100px;
+    text-align: center;
+  }
+</style>
@@ -2,11 +2,11 @@
   <PageWrapper title="modal组件使用示例">
     <Alert
       message="使用 useModal 进行弹窗操作，默认可以拖动，可以通过 draggable
-    参数进行控制是否可以拖动/全屏"
+    参数进行控制是否可以拖动/全屏，并演示了在Modal内动态加载内容并自动调整高度"
       show-icon
     />
     <a-button type="primary" class="my-4" @click="openModalLoading">
-      打开弹窗 默认可以拖动/全屏
+      打开弹窗,加载动态数据并自动调整高度(默认可以拖动/全屏)
     </a-button>
     <Alert message="内外同时同时显示隐藏" show-icon />
@@ -20,7 +20,7 @@
     />
     <a-button type="primary" class="my-4" @click="send"> 打开弹窗并传递数据 </a-button>
-    <Modal1 @register="register1" />
+    <Modal1 @register="register1" :minHeight="100" />
     <Modal2 @register="register2" />
     <Modal3 @register="register3" />
     <Modal4 @register="register4" />
@@ -39,7 +39,7 @@
   export default defineComponent({
     components: { Alert, Modal1, Modal2, Modal3, Modal4, PageWrapper },
     setup() {
-      const [register1, { openModal: openModal1, setModalProps }] = useModal();
+      const [register1, { openModal: openModal1 }] = useModal();
       const [register2, { openModal: openModal2 }] = useModal();
       const [register3, { openModal: openModal3 }] = useModal();
       const [register4, { openModal: openModal4 }] = useModal();
@@ -50,11 +50,11 @@
         });
       }
       function openModalLoading() {
-        openModal1();
-        setModalProps({ loading: true });
-        setTimeout(() => {
-          setModalProps({ loading: false });
-        }, 2000);
+        openModal1(true);
+        // setModalProps({ loading: true });
+        // setTimeout(() => {
+        //   setModalProps({ loading: false });
+        // }, 2000);
       }
       return {
         register1,