fix(modal): redoModalHeight not work as expected

修复redoModalHeight根据内容重设高度时，只会增大而不能减少Modal高度的问题

fix(modal): redoModalHeight not work as expected
修复redoModalHeight根据内容重设高度时，只会增大而不能减少Modal高度的问题
无木
1 parent f732b569
Showing 2 changed files with 27 additions and 15 deletions
src/components/Modal/src/components/ModalWrapper.vue
src/views/demo/comp/modal/Modal1.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();
@@ -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>