perf(modal-drawer): replace the scrollbar assembly

src/components/Modal/index.ts

@@ -1,10 +1,10 @@
 import './src/index.less';
 import { withInstall } from '../util';
-import BasicModal from './src/BasicModal';
+import BasicModal from './src/BasicModal.vue';
 
 withInstall(BasicModal);
 
 export { BasicModal };
-export { useModalContext } from './src/useModalContext';
-export { useModal, useModalInner } from './src/useModal';
+export { useModalContext } from './src/hooks/useModalContext';
+export { useModal, useModalInner } from './src/hooks/useModal';
 export * from './src/types';

src/components/Modal/src/BasicModal.tsx

@@ -1,232 +0,0 @@
-import type { ModalProps, ModalMethods } from './types';
-
-import { defineComponent, computed, ref, watch, unref, watchEffect, toRef } from 'vue';
-
-import Modal from './Modal';
-import { Button } from '/@/components/Button';
-import ModalWrapper from './ModalWrapper';
-import { BasicTitle } from '/@/components/Basic';
-import { FullscreenExitOutlined, FullscreenOutlined, CloseOutlined } from '@ant-design/icons-vue';
-
-import { getSlot, extendSlots } from '/@/utils/helper/tsxHelper';
-import { isFunction } from '/@/utils/is';
-import { deepMerge } from '/@/utils';
-import { tryTsxEmit } from '/@/utils/helper/vueHelper';
-
-import { basicProps } from './props';
-import { useFullScreen } from './useFullScreen';
-export default defineComponent({
-  name: 'BasicModal',
-  props: basicProps,
-  emits: ['visible-change', 'height-change', 'cancel', 'ok', 'register'],
-  setup(props, { slots, emit, attrs }) {
-    const visibleRef = ref(false);
-    const propsRef = ref<Partial<ModalProps> | null>(null);
-    const modalWrapperRef = ref<ComponentRef>(null);
-    // modal   Bottom and top height
-    const extHeightRef = ref(0);
-    // Unexpanded height of the popup
-
-    // Custom title component: get title
-    const getMergeProps = computed(
-      (): ModalProps => {
-        return {
-          ...props,
-          ...(unref(propsRef) as any),
-        };
-      }
-    );
-
-    const { handleFullScreen, getWrapClassName, fullScreenRef } = useFullScreen({
-      modalWrapperRef,
-      extHeightRef,
-      wrapClassName: toRef(getMergeProps.value, 'wrapClassName'),
-    });
-
-    // modal component does not need title
-    const getProps = computed(
-      (): ModalProps => {
-        const opt = {
-          ...unref(getMergeProps),
-          visible: unref(visibleRef),
-          title: undefined,
-        };
-
-        return {
-          ...opt,
-          wrapClassName: unref(getWrapClassName),
-        };
-      }
-    );
-
-    const getModalBindValue = computed((): any => {
-      return { ...attrs, ...unref(getProps) };
-    });
-
-    watchEffect(() => {
-      visibleRef.value = !!props.visible;
-    });
-
-    watch(
-      () => unref(visibleRef),
-      (v) => {
-        emit('visible-change', v);
-      },
-      {
-        immediate: false,
-      }
-    );
-
-    /**
-     * @description: 渲染标题
-     */
-    function renderTitle() {
-      const { helpMessage } = unref(getProps);
-      const { title } = unref(getMergeProps);
-      return (
-        <BasicTitle helpMessage={helpMessage}>
-          {() => (slots.title ? getSlot(slots, 'title') : title)}
-        </BasicTitle>
-      );
-    }
-
-    // 取消事件
-    async function handleCancel(e: Event) {
-      e?.stopPropagation();
-
-      if (props.closeFunc && isFunction(props.closeFunc)) {
-        const isClose: boolean = await props.closeFunc();
-        visibleRef.value = !isClose;
-        return;
-      }
-
-      visibleRef.value = false;
-      emit('cancel');
-    }
-
-    /**
-     * @description: 设置modal参数
-     */
-    function setModalProps(props: Partial<ModalProps>): void {
-      // Keep the last setModalProps
-      propsRef.value = deepMerge(unref(propsRef) || {}, props);
-      if (!Reflect.has(props, 'visible')) return;
-      visibleRef.value = !!props.visible;
-    }
-
-    function renderContent() {
-      type OmitWrapperType = Omit<
-        ModalProps,
-        'fullScreen' | 'modalFooterHeight' | 'visible' | 'loading'
-      >;
-      const { useWrapper, loading, wrapperProps } = unref(getProps);
-      if (!useWrapper) return getSlot(slots);
-
-      const showFooter = props.footer !== undefined && !props.footer ? 0 : undefined;
-      return (
-        <ModalWrapper
-          footerOffset={props.wrapperFooterOffset}
-          fullScreen={unref(fullScreenRef)}
-          ref={modalWrapperRef}
-          loading={loading}
-          visible={unref(visibleRef)}
-          modalFooterHeight={showFooter}
-          {...((wrapperProps as unknown) as OmitWrapperType)}
-          onGetExtHeight={(height: number) => {
-            extHeightRef.value = height;
-          }}
-          onHeightChange={(height: string) => {
-            emit('height-change', height);
-          }}
-        >
-          {() => getSlot(slots)}
-        </ModalWrapper>
-      );
-    }
-
-    // 底部按钮自定义实现,
-    function renderFooter() {
-      const {
-        showCancelBtn,
-        cancelButtonProps,
-        cancelText,
-        showOkBtn,
-        okType,
-        okText,
-        okButtonProps,
-        confirmLoading,
-      } = unref(getProps);
-
-      return (
-        <>
-          {getSlot(slots, 'insertFooter')}
-          {showCancelBtn && (
-            <Button {...cancelButtonProps} onClick={handleCancel}>
-              {() => cancelText}
-            </Button>
-          )}
-          {getSlot(slots, 'centerdFooter')}
-          {showOkBtn && (
-            <Button
-              type={okType as any}
-              loading={confirmLoading}
-              onClick={() => {
-                emit('ok');
-              }}
-              {...okButtonProps}
-            >
-              {() => okText}
-            </Button>
-          )}
-          {getSlot(slots, 'appendFooter')}
-        </>
-      );
-    }
-
-    /**
-     * @description: 关闭按钮
-     */
-    function renderClose() {
-      const { canFullscreen } = unref(getProps);
-
-      const fullScreen = unref(fullScreenRef) ? (
-        <FullscreenExitOutlined role="full" onClick={handleFullScreen} />
-      ) : (
-        <FullscreenOutlined role="close" onClick={handleFullScreen} />
-      );
-
-      const cls = [
-        'custom-close-icon',
-        {
-          'can-full': canFullscreen,
-        },
-      ];
-
-      return (
-        <div class={cls}>
-          {canFullscreen && fullScreen}
-          <CloseOutlined onClick={handleCancel} />
-        </div>
-      );
-    }
-
-    const modalMethods: ModalMethods = {
-      setModalProps,
-    };
-
-    tryTsxEmit((instance) => {
-      emit('register', modalMethods, instance.uid);
-    });
-    return () => (
-      <Modal onCancel={handleCancel} {...unref(getModalBindValue)}>
-        {{
-          footer: () => renderFooter(),
-          closeIcon: () => renderClose(),
-          title: () => renderTitle(),
-          ...extendSlots(slots, ['default']),
-          default: () => renderContent(),
-        }}
-      </Modal>
-    );
-  },
-});

src/components/Modal/src/BasicModal.vue

@@ -0,0 +1,184 @@
+<template>
+  <Modal @cancel="handleCancel" v-bind="getBindValue">
+    <template #closeIcon v-if="!$slots.closeIcon">
+      <ModalClose
+        :canFullscreen="getProps.canFullscreen"
+        :fullScreen="fullScreenRef"
+        @cancel="handleCancel"
+        @fullscreen="handleFullScreen"
+      />
+    </template>
+
+    <template #title v-if="!$slots.title">
+      <ModalHeader :helpMessage="getProps.helpMessage" :title="getMergeProps.title" />
+    </template>
+
+    <template #footer v-if="!$slots.footer">
+      <ModalFooter v-bind="getProps" @ok="handleOk" @cancel="handleCancel" />
+    </template>
+    <ModalWrapper
+      :useWrapper="getProps.useWrapper"
+      :footerOffset="wrapperFooterOffset"
+      :fullScreen="fullScreenRef"
+      ref="modalWrapperRef"
+      :loading="getProps.loading"
+      :visible="visibleRef"
+      :modalFooterHeight="footer !== undefined && !footer ? 0 : undefined"
+      v-bind="omit(getProps.wrapperProps, 'visible')"
+      @ext-height="handleExtHeight"
+      @height-change="handleHeightChange"
+    >
+      <slot />
+    </ModalWrapper>
+  </Modal>
+</template>
+<script lang="ts">
+  import type { ModalProps, ModalMethods } from './types';
+
+  import {
+    defineComponent,
+    computed,
+    ref,
+    watch,
+    unref,
+    watchEffect,
+    toRef,
+    getCurrentInstance,
+  } from 'vue';
+
+  import Modal from './components/Modal';
+  import ModalWrapper from './components/ModalWrapper.vue';
+  import ModalClose from './components/ModalClose.vue';
+  import ModalFooter from './components/ModalFooter.vue';
+  import ModalHeader from './components/ModalHeader.vue';
+
+  import { isFunction } from '/@/utils/is';
+  import { deepMerge } from '/@/utils';
+
+  import { basicProps } from './props';
+  import { useFullScreen } from './hooks/useModalFullScreen';
+  import { omit } from 'lodash-es';
+  export default defineComponent({
+    name: 'BasicModal',
+    components: { Modal, ModalWrapper, ModalClose, ModalFooter, ModalHeader },
+    props: basicProps,
+    emits: ['visible-change', 'height-change', 'cancel', 'ok', 'register'],
+    setup(props, { emit, attrs }) {
+      const visibleRef = ref(false);
+      const propsRef = ref<Partial<ModalProps> | null>(null);
+      const modalWrapperRef = ref<ComponentRef>(null);
+      // modal   Bottom and top height
+      const extHeightRef = ref(0);
+      const modalMethods: ModalMethods = {
+        setModalProps,
+        emitVisible: undefined,
+      };
+      const instance = getCurrentInstance();
+      if (instance) {
+        emit('register', modalMethods, instance.uid);
+      }
+
+      // Custom title component: get title
+      const getMergeProps = computed(
+        (): ModalProps => {
+          return {
+            ...props,
+            ...(unref(propsRef) as any),
+          };
+        }
+      );
+
+      const { handleFullScreen, getWrapClassName, fullScreenRef } = useFullScreen({
+        modalWrapperRef,
+        extHeightRef,
+        wrapClassName: toRef(getMergeProps.value, 'wrapClassName'),
+      });
+
+      // modal component does not need title
+      const getProps = computed(
+        (): ModalProps => {
+          const opt = {
+            ...unref(getMergeProps),
+            visible: unref(visibleRef),
+            title: undefined,
+          };
+
+          return {
+            ...opt,
+            wrapClassName: unref(getWrapClassName),
+          };
+        }
+      );
+
+      const getBindValue = computed((): any => {
+        return { ...attrs, ...unref(getProps) };
+      });
+
+      watchEffect(() => {
+        visibleRef.value = !!props.visible;
+      });
+
+      watch(
+        () => unref(visibleRef),
+        (v) => {
+          emit('visible-change', v);
+          instance && modalMethods.emitVisible?.(v, instance.uid);
+        },
+        {
+          immediate: false,
+        }
+      );
+
+      // 取消事件
+      async function handleCancel(e: Event) {
+        e?.stopPropagation();
+
+        if (props.closeFunc && isFunction(props.closeFunc)) {
+          const isClose: boolean = await props.closeFunc();
+          visibleRef.value = !isClose;
+          return;
+        }
+
+        visibleRef.value = false;
+        emit('cancel');
+      }
+
+      /**
+       * @description: 设置modal参数
+       */
+      function setModalProps(props: Partial<ModalProps>): void {
+        // Keep the last setModalProps
+        propsRef.value = deepMerge(unref(propsRef) || {}, props);
+        if (!Reflect.has(props, 'visible')) return;
+        visibleRef.value = !!props.visible;
+      }
+
+      function handleOk() {
+        emit('ok');
+      }
+
+      function handleHeightChange(height: string) {
+        emit('height-change', height);
+      }
+
+      function handleExtHeight(height: number) {
+        extHeightRef.value = height;
+      }
+
+      return {
+        handleCancel,
+        getBindValue,
+        getProps,
+        handleFullScreen,
+        fullScreenRef,
+        getMergeProps,
+        handleOk,
+        visibleRef,
+        omit,
+        modalWrapperRef,
+        handleExtHeight,
+        handleHeightChange,
+      };
+    },
+  });
+</script>

src/components/Modal/src/ModalWrapper.tsx

@@ -1,161 +0,0 @@
-import type { ModalWrapperProps } from './types';
-import type { CSSProperties } from 'vue';
-
-import {
-  defineComponent,
-  computed,
-  ref,
-  watchEffect,
-  unref,
-  watch,
-  onMounted,
-  nextTick,
-  onUnmounted,
-} from 'vue';
-import { Spin } from 'ant-design-vue';
-
-import { useWindowSizeFn } from '/@/hooks/event/useWindowSizeFn';
-
-import { getSlot } from '/@/utils/helper/tsxHelper';
-import { useElResize } from '/@/hooks/event/useElResize';
-import { propTypes } from '/@/utils/propTypes';
-import { createModalContext } from './useModalContext';
-
-export default defineComponent({
-  name: 'ModalWrapper',
-  props: {
-    loading: propTypes.bool,
-    modalHeaderHeight: propTypes.number.def(50),
-    modalFooterHeight: propTypes.number.def(54),
-    minHeight: propTypes.number.def(200),
-    footerOffset: propTypes.number.def(0),
-    visible: propTypes.bool,
-    fullScreen: propTypes.bool,
-  },
-  emits: ['heightChange', 'getExtHeight'],
-  setup(props: ModalWrapperProps, { slots, emit }) {
-    const wrapperRef = ref<ElRef>(null);
-    const spinRef = ref<ComponentRef>(null);
-    const realHeightRef = ref(0);
-
-    let stopElResizeFn: Fn = () => {};
-
-    useWindowSizeFn(setModalHeight);
-
-    createModalContext({
-      redoModalHeight: setModalHeight,
-    });
-
-    const wrapStyle = computed(
-      (): CSSProperties => {
-        return {
-          minHeight: `${props.minHeight}px`,
-          height: `${unref(realHeightRef)}px`,
-          overflow: 'auto',
-        };
-      }
-    );
-
-    watchEffect(() => {
-      setModalHeight();
-    });
-
-    watch(
-      () => props.fullScreen,
-      (v) => {
-        !v && setModalHeight();
-      }
-    );
-
-    onMounted(() => {
-      const { modalHeaderHeight, modalFooterHeight } = props;
-      emit('getExtHeight', modalHeaderHeight + modalFooterHeight);
-      listenElResize();
-    });
-
-    onUnmounted(() => {
-      stopElResizeFn && stopElResizeFn();
-    });
-
-    async function setModalHeight() {
-      // 解决在弹窗关闭的时候监听还存在,导致再次打开弹窗没有高度
-      // 加上这个,就必须在使用的时候传递父级的visible
-      if (!props.visible) return;
-      const wrapperRefDom = unref(wrapperRef);
-      if (!wrapperRefDom) return;
-      const bodyDom = wrapperRefDom.parentElement;
-      if (!bodyDom) return;
-      bodyDom.style.padding = '0';
-      await nextTick();
-
-      try {
-        const modalDom = bodyDom.parentElement && bodyDom.parentElement.parentElement;
-        if (!modalDom) return;
-
-        const modalRect = getComputedStyle(modalDom).top;
-        const modalTop = Number.parseInt(modalRect);
-        let maxHeight =
-          window.innerHeight -
-          modalTop * 2 +
-          (props.footerOffset! || 0) -
-          props.modalFooterHeight -
-          props.modalHeaderHeight;
-
-        // 距离顶部过进会出现滚动条
-        if (modalTop < 40) {
-          maxHeight -= 26;
-        }
-        await nextTick();
-        const spinEl = unref(spinRef);
-
-        if (!spinEl) return;
-
-        const spinContainerEl = spinEl.$el.querySelector('.ant-spin-container') as HTMLElement;
-        if (!spinContainerEl) return;
-
-        const realHeight = spinContainerEl.scrollHeight;
-
-        if (props.fullScreen) {
-          realHeightRef.value =
-            window.innerHeight - props.modalFooterHeight - props.modalHeaderHeight;
-        } else {
-          realHeightRef.value = realHeight > maxHeight ? maxHeight : realHeight + 16 + 30;
-        }
-        emit('heightChange', unref(realHeightRef));
-
-        nextTick(() => {
-          const el = spinEl.$el;
-          if (el) {
-            el.style.height = `${unref(realHeightRef)}px`;
-          }
-        });
-      } catch (error) {
-        console.log(error);
-      }
-    }
-
-    function listenElResize() {
-      const wrapper = unref(wrapperRef);
-      if (!wrapper) return;
-
-      const container = wrapper.querySelector('.ant-spin-container');
-      if (!container) return;
-
-      const [start, stop] = useElResize(container, () => {
-        setModalHeight();
-      });
-      stopElResizeFn = stop;
-      start();
-    }
-
-    return () => {
-      return (
-        <div ref={wrapperRef} style={unref(wrapStyle)}>
-          <Spin ref={spinRef} spinning={props.loading}>
-            {() => getSlot(slots)}
-          </Spin>
-        </div>
-      );
-    };
-  },
-});

src/components/Modal/src/components/Modal.tsx

@@ -1,16 +1,17 @@
 import { Modal } from 'ant-design-vue';
-import { defineComponent, toRefs } from 'vue';
-import { basicProps } from './props';
-import { useModalDragMove } from './useModalDrag';
+import { defineComponent, toRefs, unref } from 'vue';
+import { basicProps } from '../props';
+import { useModalDragMove } from '../hooks/useModalDrag';
+import { useAttrs } from '/@/hooks/core/useAttrs';
 import { extendSlots } from '/@/utils/helper/tsxHelper';
 
 export default defineComponent({
   name: 'Modal',
   inheritAttrs: false,
   props: basicProps,
-  setup(props, { attrs, slots }) {
+  setup(props, { slots }) {
     const { visible, draggable, destroyOnClose } = toRefs(props);
-
+    const attrs = useAttrs();
     useModalDragMove({
       visible,
       destroyOnClose,
@@ -18,7 +19,8 @@ export default defineComponent({
     });
 
     return () => {
-      const propsData = { ...attrs, ...props } as any;
+      const propsData = { ...unref(attrs), ...props } as Recordable;
+
       return <Modal {...propsData}>{extendSlots(slots)}</Modal>;
     };
   },

src/components/Modal/src/components/ModalClose.vue

@@ -0,0 +1,98 @@
+<template>
+  <div :class="getClass">
+    <template v-if="canFullscreen">
+      <FullscreenExitOutlined role="full" @click="handleFullScreen" v-if="fullScreen" />
+
+      <FullscreenOutlined role="close" @click="handleFullScreen" v-else />
+    </template>
+    <CloseOutlined @click="handleCancel" />
+  </div>
+</template>
+<script lang="ts">
+  import { defineComponent, computed } from 'vue';
+  import { FullscreenExitOutlined, FullscreenOutlined, CloseOutlined } from '@ant-design/icons-vue';
+  import { useDesign } from '/@/hooks/web/useDesign';
+  import { propTypes } from '/@/utils/propTypes';
+
+  export default defineComponent({
+    name: 'ModalClose',
+    components: { FullscreenExitOutlined, FullscreenOutlined, CloseOutlined },
+    props: {
+      canFullscreen: propTypes.bool.def(true),
+      fullScreen: propTypes.bool,
+    },
+    emits: ['cancel', 'fullscreen'],
+    setup(props, { emit }) {
+      const { prefixCls } = useDesign('basic-modal-close');
+
+      const getClass = computed(() => {
+        return [
+          prefixCls,
+          `${prefixCls}--custom`,
+          {
+            [`${prefixCls}--can-full`]: props.canFullscreen,
+          },
+        ];
+      });
+
+      function handleCancel() {
+        emit('cancel');
+      }
+      function handleFullScreen(e: Event) {
+        e?.stopPropagation();
+        e?.preventDefault();
+        emit('fullscreen');
+      }
+
+      return {
+        getClass,
+        prefixCls,
+        handleCancel,
+        handleFullScreen,
+      };
+    },
+  });
+</script>
+<style lang="less">
+  @import (reference) '../../../../design/index.less';
+  @prefix-cls: ~'@{namespace}-basic-modal-close';
+  .@{prefix-cls} {
+    display: flex;
+    height: 95%;
+    align-items: center;
+
+    > span {
+      margin-left: 48px;
+      font-size: 16px;
+    }
+
+    &--can-full {
+      > span {
+        margin-left: 12px;
+      }
+    }
+
+    &:not(&--can-full) {
+      > span:nth-child(1) {
+        &:hover {
+          font-weight: 700;
+        }
+      }
+    }
+
+    & span:nth-child(1) {
+      display: inline-block;
+      padding: 10px;
+
+      &:hover {
+        color: @primary-color;
+      }
+    }
+
+    & span:nth-child(2) {
+      &:hover {
+        color: @error-color;
+      }
+    }
+  }
+</style>

src/components/Modal/src/components/ModalFooter.vue

@@ -0,0 +1,39 @@
+<template>
+  <div>
+    <slot name="insertFooter" />
+    <a-button v-bind="cancelButtonProps" @click="handleCancel" v-if="showCancelBtn">
+      {{ cancelText }}
+    </a-button>
+    <slot name="centerFooter" />
+    <a-button
+      :type="okType"
+      @click="handleOk"
+      :loading="confirmLoading"
+      v-bind="okButtonProps"
+      v-if="showOkBtn"
+    >
+      {{ okText }}
+    </a-button>
+    <slot name="appendFooter" />
+  </div>
+</template>
+<script lang="ts">
+  import { defineComponent } from 'vue';
+
+  import { basicProps } from '../props';
+  export default defineComponent({
+    name: 'BasicModalFooter',
+    props: basicProps,
+    emits: ['ok', 'cancel'],
+    setup(_, { emit }) {
+      function handleOk() {
+        emit('ok');
+      }
+
+      function handleCancel() {
+        emit('cancel');
+      }
+      return { handleOk, handleCancel };
+    },
+  });
+</script>

src/components/Modal/src/components/ModalHeader.vue

@@ -0,0 +1,22 @@
+<template>
+  <BasicTitle :helpMessage="helpMessage">
+    {{ title }}
+  </BasicTitle>
+</template>
+<script lang="ts">
+  import type { PropType } from 'vue';
+  import { defineComponent } from 'vue';
+  import { BasicTitle } from '/@/components/Basic';
+
+  import { propTypes } from '/@/utils/propTypes';
+  export default defineComponent({
+    name: 'BasicModalHeader',
+    components: { BasicTitle },
+    props: {
+      helpMessage: {
+        type: [String, Array] as PropType<string | string[]>,
+      },
+      title: propTypes.string,
+    },
+  });
+</script>

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

@@ -0,0 +1,152 @@
+<template>
+  <ScrollContainer ref="wrapperRef" :style="wrapStyle">
+    <div ref="spinRef" :style="spinStyle" v-loading="loading" :loading-tip="loadingTip">
+      <slot />
+    </div>
+  </ScrollContainer>
+</template>
+<script lang="ts">
+  import type { ModalWrapperProps } from '../types';
+  import type { CSSProperties } from 'vue';
+
+  import {
+    defineComponent,
+    computed,
+    ref,
+    watchEffect,
+    unref,
+    watch,
+    onMounted,
+    nextTick,
+    onUnmounted,
+  } from 'vue';
+  import { Spin } from 'ant-design-vue';
+
+  import { useWindowSizeFn } from '/@/hooks/event/useWindowSizeFn';
+  import { ScrollContainer } from '/@/components/Container';
+
+  // import { useElResize } from '/@/hooks/event/useElResize';
+  import { propTypes } from '/@/utils/propTypes';
+  import { createModalContext } from '../hooks/useModalContext';
+
+  export default defineComponent({
+    name: 'ModalWrapper',
+    components: { Spin, ScrollContainer },
+    props: {
+      loading: propTypes.bool,
+      useWrapper: propTypes.bool.def(true),
+      modalHeaderHeight: propTypes.number.def(50),
+      modalFooterHeight: propTypes.number.def(54),
+      minHeight: propTypes.number.def(200),
+      footerOffset: propTypes.number.def(0),
+      visible: propTypes.bool,
+      fullScreen: propTypes.bool,
+      loadingTip: propTypes.string,
+    },
+    emits: ['height-change', 'ext-height'],
+    setup(props: ModalWrapperProps, { emit }) {
+      const wrapperRef = ref<ComponentRef>(null);
+      const spinRef = ref<ElRef>(null);
+      const realHeightRef = ref(0);
+
+      let stopElResizeFn: Fn = () => {};
+
+      useWindowSizeFn(setModalHeight);
+
+      createModalContext({
+        redoModalHeight: setModalHeight,
+      });
+
+      const wrapStyle = computed(
+        (): CSSProperties => {
+          return {
+            minHeight: `${props.minHeight}px`,
+            height: `${unref(realHeightRef)}px`,
+            // overflow: 'auto',
+          };
+        }
+      );
+
+      const spinStyle = computed(
+        (): CSSProperties => {
+          return {
+            // padding 28
+            height: `${unref(realHeightRef) - 28}px`,
+          };
+        }
+      );
+
+      watchEffect(() => {
+        props.useWrapper && setModalHeight();
+      });
+
+      watch(
+        () => props.fullScreen,
+        () => {
+          setTimeout(() => {
+            setModalHeight();
+          }, 0);
+        }
+      );
+
+      onMounted(() => {
+        const { modalHeaderHeight, modalFooterHeight } = props;
+        emit('ext-height', modalHeaderHeight + modalFooterHeight);
+        // listenElResize();
+      });
+
+      onUnmounted(() => {
+        stopElResizeFn && stopElResizeFn();
+      });
+
+      async function setModalHeight() {
+        // 解决在弹窗关闭的时候监听还存在,导致再次打开弹窗没有高度
+        // 加上这个,就必须在使用的时候传递父级的visible
+        if (!props.visible) return;
+        const wrapperRefDom = unref(wrapperRef);
+        if (!wrapperRefDom) return;
+        const bodyDom = wrapperRefDom.$el.parentElement;
+        if (!bodyDom) return;
+        bodyDom.style.padding = '0';
+        await nextTick();
+
+        try {
+          const modalDom = bodyDom.parentElement && bodyDom.parentElement.parentElement;
+          if (!modalDom) return;
+
+          const modalRect = getComputedStyle(modalDom).top;
+          const modalTop = Number.parseInt(modalRect);
+          let maxHeight =
+            window.innerHeight -
+            modalTop * 2 +
+            (props.footerOffset! || 0) -
+            props.modalFooterHeight -
+            props.modalHeaderHeight;
+
+          // 距离顶部过进会出现滚动条
+          if (modalTop < 40) {
+            maxHeight -= 26;
+          }
+          await nextTick();
+          const spinEl = unref(spinRef);
+
+          if (!spinEl) return;
+
+          const realHeight = spinEl.scrollHeight;
+
+          if (props.fullScreen) {
+            realHeightRef.value =
+              window.innerHeight - props.modalFooterHeight - props.modalHeaderHeight;
+          } else {
+            realHeightRef.value = realHeight > maxHeight ? maxHeight : realHeight + 16 + 30;
+          }
+          emit('height-change', unref(realHeightRef));
+        } catch (error) {
+          console.log(error);
+        }
+      }
+
+      return { wrapStyle, wrapperRef, spinRef, spinStyle };
+    },
+  });
+</script>

src/components/Modal/src/hooks/useModal.ts

@@ -4,7 +4,7 @@ import type {
   ModalProps,
   ReturnMethods,
   UseModalInnerReturnType,
-} from './types';
+} from '../types';
 
 import {
   ref,
@@ -19,16 +19,18 @@ import {
 import { isProdMode } from '/@/utils/env';
 import { isFunction } from '/@/utils/is';
 import { isEqual } from 'lodash-es';
-import { tryOnUnmounted } from '/@/utils/helper/vueHelper';
+import { tryOnUnmounted, isInSetup } from '/@/utils/helper/vueHelper';
+import { error } from '/@/utils/log';
+import { computed } from 'vue';
 const dataTransferRef = reactive<any>({});
 
+const visibleData = reactive<{ [key: number]: boolean }>({});
+
 /**
  * @description: Applicable to independent modal and call outside
  */
 export function useModal(): UseModalReturnType {
-  if (!getCurrentInstance()) {
-    throw new Error('Please put useModal function in the setup function!');
-  }
+  isInSetup();
   const modalRef = ref<Nullable<ModalMethods>>(null);
   const loadedRef = ref<Nullable<boolean>>(false);
   const uidRef = ref<string>('');
@@ -45,23 +47,29 @@ export function useModal(): UseModalReturnType {
     if (unref(loadedRef) && isProdMode() && modalMethod === unref(modalRef)) return;
 
     modalRef.value = modalMethod;
+    modalMethod.emitVisible = (visible: boolean, uid: number) => {
+      visibleData[uid] = visible;
+    };
   }
 
   const getInstance = () => {
     const instance = unref(modalRef);
     if (!instance) {
-      throw new Error('instance is undefined!');
+      error('useModal instance is undefined!');
     }
     return instance;
   };
 
   const methods: ReturnMethods = {
     setModalProps: (props: Partial<ModalProps>): void => {
-      getInstance().setModalProps(props);
+      getInstance()?.setModalProps(props);
     },
+    getVisible: computed((): boolean => {
+      return visibleData[~~unref(uidRef)];
+    }),
 
     openModal: <T = any>(visible = true, data?: T, openOnSet = true): void => {
-      getInstance().setModalProps({
+      getInstance()?.setModalProps({
         visible: visible,
       });
 
@@ -83,20 +91,16 @@ export function useModal(): UseModalReturnType {
 
 export const useModalInner = (callbackFn?: Fn): UseModalInnerReturnType => {
   const modalInstanceRef = ref<Nullable<ModalMethods>>(null);
-  const currentInstall = getCurrentInstance();
+  const currentInstance = getCurrentInstance();
   const uidRef = ref<string>('');
 
-  if (!currentInstall) {
-    throw new Error('instance is undefined!');
-  }
-
   // currentInstall.type.emits = [...currentInstall.type.emits, 'register'];
   // Object.assign(currentInstall.type.emits, ['register']);
 
   const getInstance = () => {
     const instance = unref(modalInstanceRef);
     if (!instance) {
-      throw new Error('instance is undefined!');
+      error('useModalInner instance is undefined!');
     }
     return instance;
   };
@@ -108,7 +112,7 @@ export const useModalInner = (callbackFn?: Fn): UseModalInnerReturnType => {
       });
     uidRef.value = uuid;
     modalInstanceRef.value = modalInstance;
-    currentInstall.emit('register', modalInstance, uuid);
+    currentInstance?.emit('register', modalInstance, uuid);
   };
 
   watchEffect(() => {
@@ -124,19 +128,22 @@ export const useModalInner = (callbackFn?: Fn): UseModalInnerReturnType => {
     register,
     {
       changeLoading: (loading = true) => {
-        getInstance().setModalProps({ loading });
+        getInstance()?.setModalProps({ loading });
       },
+      getVisible: computed((): boolean => {
+        return visibleData[~~unref(uidRef)];
+      }),
 
       changeOkLoading: (loading = true) => {
-        getInstance().setModalProps({ confirmLoading: loading });
+        getInstance()?.setModalProps({ confirmLoading: loading });
       },
 
       closeModal: () => {
-        getInstance().setModalProps({ visible: false });
+        getInstance()?.setModalProps({ visible: false });
       },
 
       setModalProps: (props: Partial<ModalProps>) => {
-        getInstance().setModalProps(props);
+        getInstance()?.setModalProps(props);
       },
     },
   ];

src/components/Modal/src/index.less

@@ -21,9 +21,12 @@
   width: 520px;
   padding-bottom: 0;
 
-  .ant-spin-nested-loading {
-    padding: 16px;
+  .scroll-container {
+    padding: 14px;
   }
+  // .ant-spin-nested-loading {
+  //   padding: 16px;
+  // }
 
   &-title {
     font-size: 16px;
@@ -35,46 +38,6 @@
     }
   }
 
-  .custom-close-icon {
-    display: flex;
-    height: 95%;
-    align-items: center;
-
-    > span {
-      margin-left: 48px;
-      font-size: 16px;
-    }
-
-    &.can-full {
-      > span {
-        margin-left: 12px;
-      }
-    }
-
-    &:not(.can-full) {
-      > span:nth-child(1) {
-        &:hover {
-          font-weight: 700;
-        }
-      }
-    }
-
-    & span:nth-child(1) {
-      display: inline-block;
-      padding: 10px;
-
-      &:hover {
-        color: @primary-color;
-      }
-    }
-
-    & span:nth-child(2) {
-      &:hover {
-        color: @error-color;
-      }
-    }
-  }
-
   .ant-modal-body {
     padding: 0;
   }
@@ -96,8 +59,6 @@
   }
 
   &-footer {
-    // padding: 10px 26px 26px 16px;
-
     button + button {
       margin-left: 10px;
     }

src/components/Modal/src/props.ts

@@ -1,8 +1,9 @@
-import type { PropType } from 'vue';
+import type { PropType, CSSProperties } from 'vue';
 import { ButtonProps } from 'ant-design-vue/es/button/buttonTypes';
 
 import { useI18n } from '/@/hooks/web/useI18n';
-import { propTypes } from '/@/utils/propTypes';
+import { propTypes, VueNode } from '/@/utils/propTypes';
+import type { ModalWrapperProps } from './types';
 const { t } = useI18n();
 
 export const modalProps = {
@@ -26,6 +27,7 @@ export const basicProps = Object.assign({}, modalProps, {
   // Whether to setting wrapper
   useWrapper: propTypes.bool.def(true),
   loading: propTypes.bool,
+  loadingTip: propTypes.string,
   /**
    * @description: Show close button
    */
@@ -35,65 +37,44 @@ export const basicProps = Object.assign({}, modalProps, {
    */
   showOkBtn: propTypes.bool.def(true),
 
-  wrapperProps: Object as PropType<any>,
+  wrapperProps: Object as PropType<Partial<ModalWrapperProps>>,
 
-  afterClose: Function as PropType<() => Promise<any>>,
+  afterClose: Function as PropType<() => Promise<VueNode>>,
 
-  bodyStyle: Object as PropType<any>,
+  bodyStyle: Object as PropType<CSSProperties>,
 
-  closable: {
-    type: Boolean as PropType<boolean>,
-    default: true,
-  },
+  closable: propTypes.bool.def(true),
 
-  closeIcon: Object as PropType<any>,
+  closeIcon: Object as PropType<VueNode>,
 
-  confirmLoading: Boolean as PropType<boolean>,
+  confirmLoading: propTypes.bool,
 
-  destroyOnClose: Boolean as PropType<boolean>,
+  destroyOnClose: propTypes.bool,
 
-  footer: Object as PropType<any>,
+  footer: Object as PropType<VueNode>,
 
   getContainer: Function as PropType<() => any>,
 
-  mask: {
-    type: Boolean as PropType<boolean>,
-    default: true,
-  },
+  mask: propTypes.bool.def(true),
 
-  maskClosable: {
-    type: Boolean as PropType<boolean>,
-    default: true,
-  },
-  keyboard: {
-    type: Boolean as PropType<boolean>,
-    default: true,
-  },
+  maskClosable: propTypes.bool.def(true),
+  keyboard: propTypes.bool.def(true),
 
-  maskStyle: Object as PropType<any>,
+  maskStyle: Object as PropType<CSSProperties>,
 
-  okType: {
-    type: String as PropType<string>,
-    default: 'primary',
-  },
+  okType: propTypes.string.def('primary'),
 
   okButtonProps: Object as PropType<ButtonProps>,
 
   cancelButtonProps: Object as PropType<ButtonProps>,
 
-  title: {
-    type: String as PropType<string>,
-  },
+  title: propTypes.string,
 
-  visible: Boolean as PropType<boolean>,
+  visible: propTypes.bool,
 
   width: [String, Number] as PropType<string | number>,
 
-  wrapClassName: {
-    type: String as PropType<string>,
-  },
+  wrapClassName: propTypes.string,
 
-  zIndex: {
-    type: Number as PropType<number>,
-  },
+  zIndex: propTypes.number,
 });

src/components/Modal/src/types.ts

@@ -1,16 +1,18 @@
 import type { ButtonProps } from 'ant-design-vue/lib/button/buttonTypes';
-import type { CSSProperties, VNodeChild } from 'vue';
+import type { CSSProperties, VNodeChild, ComputedRef } from 'vue';
 /**
  * @description: 弹窗对外暴露的方法
  */
 export interface ModalMethods {
   setModalProps: (props: Partial<ModalProps>) => void;
+  emitVisible?: (visible: boolean, uid: number) => void;
 }
 
 export type RegisterFn = (modalMethods: ModalMethods, uuid?: string) => void;
 
 export interface ReturnMethods extends ModalMethods {
   openModal: <T = any>(props?: boolean, data?: T, openOnSet?: boolean) => void;
+  getVisible?: ComputedRef<boolean>;
 }
 
 export type UseModalReturnType = [RegisterFn, ReturnMethods];
@@ -19,6 +21,7 @@ export interface ReturnInnerMethods extends ModalMethods {
   closeModal: () => void;
   changeLoading: (loading: boolean) => void;
   changeOkLoading: (loading: boolean) => void;
+  getVisible?: ComputedRef<boolean>;
 }
 
 export type UseModalInnerReturnType = [RegisterFn, ReturnInnerMethods];
@@ -38,6 +41,7 @@ export interface ModalProps {
   useWrapper: boolean;
 
   loading: boolean;
+  loadingTip?: string;
 
   wrapperProps: Omit<ModalWrapperProps, 'loading'>;
 
@@ -193,4 +197,5 @@ export interface ModalWrapperProps {
   minHeight: number;
   visible: boolean;
   fullScreen: boolean;
+  useWrapper: boolean;
 }