fix(modal): redoModalHeight not work as expected

无木

2021-06-03 5d554f184f7b61774d1a1b2e61451677b38505de

fix(modal): redoModalHeight not work as expected

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

 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();

 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>