From 5d554f184f7b61774d1a1b2e61451677b38505de Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=97=A0=E6=9C=A8?= <netfan@foxmail.com>
Date: Thu, 3 Jun 2021 10:52:17 +0800
Subject: [PATCH] fix(modal): redoModalHeight not work as expected
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

修复redoModalHeight根据内容重设高度时，只会增大而不能减少Modal高度的问题
---
 .../Modal/src/components/ModalWrapper.vue     | 16 +++++-------
 src/views/demo/comp/modal/Modal1.vue          | 26 ++++++++++++++-----
 2 files changed, 27 insertions(+), 15 deletions(-)

diff --git a/src/components/Modal/src/components/ModalWrapper.vue b/src/components/Modal/src/components/ModalWrapper.vue
index 2810b76e..f1f9b8d4 100644
--- a/src/components/Modal/src/components/ModalWrapper.vue
+++ b/src/components/Modal/src/components/ModalWrapper.vue
@@ -60,15 +60,13 @@
         redoModalHeight: setModalHeight,
       });
 
-      const spinStyle = computed(
-        (): CSSProperties => {
-          return {
-            minHeight: `${props.minHeight}px`,
-            // padding 28
-            height: `${unref(realHeightRef)}px`,
-          };
-        }
-      );
+      const spinStyle = computed((): CSSProperties => {
+        return {
+          minHeight: `${props.minHeight}px`,
+          // padding 28
+          maxHeight: `${unref(realHeightRef)}px`,
+        };
+      });
 
       watchEffect(() => {
         props.useWrapper && setModalHeight();
diff --git a/src/views/demo/comp/modal/Modal1.vue b/src/views/demo/comp/modal/Modal1.vue
index 04cc9fc6..c824de13 100644
--- a/src/views/demo/comp/modal/Modal1.vue
+++ b/src/views/demo/comp/modal/Modal1.vue
@@ -7,6 +7,9 @@
     :helpMessage="['提示1', '提示2']"
     @visible-change="handleShow"
   >
+    <template #insertFooter>
+      <a-button type="danger" @click="setLines" :disabled="loading">点我更新内容</a-button>
+    </template>
     <template v-if="loading">
       <div class="empty-tips"> 加载中，稍等3秒…… </div>
     </template>
@@ -18,7 +21,7 @@
   </BasicModal>
 </template>
 <script lang="ts">
-  import { defineComponent, ref } from 'vue';
+  import { defineComponent, ref, watch } from 'vue';
   import { BasicModal, useModalInner } from '/@/components/Modal';
   export default defineComponent({
     components: { BasicModal },
@@ -26,19 +29,30 @@
       const loading = ref(true);
       const lines = ref(10);
       const [register, { setModalProps, redoModalHeight }] = useModalInner();
+
+      watch(
+        () => lines.value,
+        () => {
+          redoModalHeight();
+        }
+      );
+
       function handleShow(visible: boolean) {
         if (visible) {
           loading.value = true;
-          setModalProps({ loading: true });
+          setModalProps({ loading: true, confirmLoading: true });
           setTimeout(() => {
-            lines.value = Math.round(Math.random() * 20 + 10);
+            lines.value = Math.round(Math.random() * 30 + 5);
             loading.value = false;
-            setModalProps({ loading: false });
-            redoModalHeight();
+            setModalProps({ loading: false, confirmLoading: false });
           }, 3000);
         }
       }
-      return { register, loading, handleShow, lines };
+
+      function setLines() {
+        lines.value = Math.round(Math.random() * 20 + 10);
+      }
+      return { register, loading, handleShow, lines, setLines };
     },
   });
 </script>