vxe-pc-ui 4.20.34 → 4.20.35

package/es/modal/src/modal.js

@@ -37,1646 +37,1638 @@ const msgQueue = [];
 const notifyQueue = [];
 const lockScrollAttrKey = "data-vxe-lock-scroll";
 const lockScrollCssWidthKey = "--vxe-ui-modal-lock-scroll-view-width";
-var modal_default = defineVxeComponent({
-  name: "VxeModal",
-  props: {
-    modelValue: Boolean,
-    id: String,
-    type: {
-      type: String,
-      default: "modal"
-    },
-    loading: {
-      type: Boolean,
-      default: null
-    },
-    status: String,
-    iconStatus: String,
-    className: String,
-    top: {
-      type: [Number, String],
-      default: () => getConfig().modal.top
-    },
-    position: [String, Object],
-    title: String,
-    duration: {
-      type: [Number, String],
-      default: () => getConfig().modal.duration
-    },
-    content: [Number, String],
-    useHtml: {
-      type: Boolean,
-      default: () => getConfig().modal.useHtml
-    },
-    showCancelButton: {
-      type: Boolean,
-      default: null
-    },
-    cancelButtonText: {
-      type: String,
-      default: () => getConfig().modal.cancelButtonText
-    },
-    showConfirmButton: {
-      type: Boolean,
-      default: () => getConfig().modal.showConfirmButton
-    },
-    confirmButtonText: {
-      type: String,
-      default: () => getConfig().modal.confirmButtonText
-    },
-    lockView: {
-      type: Boolean,
-      default: () => getConfig().modal.lockView
-    },
-    lockScroll: Boolean,
-    mask: {
-      type: Boolean,
-      default: () => getConfig().modal.mask
-    },
-    maskClosable: {
-      type: Boolean,
-      default: () => getConfig().modal.maskClosable
-    },
-    escClosable: {
-      type: Boolean,
-      default: () => getConfig().modal.escClosable
-    },
-    cancelClosable: {
-      type: Boolean,
-      default: () => getConfig().modal.cancelClosable
-    },
-    confirmClosable: {
-      type: Boolean,
-      default: () => getConfig().modal.confirmClosable
-    },
-    resize: Boolean,
-    border: {
-      type: Boolean,
-      default: () => getConfig().modal.border
-    },
-    showTitleBackground: {
-      type: Boolean,
-      default: () => getConfig().modal.showTitleBackground
-    },
-    showHeader: {
-      type: Boolean,
-      default: () => getConfig().modal.showHeader
-    },
-    showFooter: {
-      type: Boolean,
-      default: () => getConfig().modal.showFooter
-    },
-    preload: Boolean,
-    showZoom: Boolean,
-    zoomConfig: Object,
-    showMaximize: {
-      type: Boolean,
-      default: () => handleBooleanDefaultValue(getConfig().modal.showMaximize)
-    },
-    showMinimize: {
-      type: Boolean,
-      default: () => handleBooleanDefaultValue(getConfig().modal.showMinimize)
-    },
-    showClose: {
-      type: Boolean,
-      default: () => getConfig().modal.showClose
-    },
-    dblclickZoom: {
-      type: Boolean,
-      default: () => getConfig().modal.dblclickZoom
-    },
-    width: {
-      type: [Number, String],
-      default: () => getConfig().modal.width
-    },
-    height: {
-      type: [Number, String],
-      default: () => getConfig().modal.height
-    },
-    minWidth: {
-      type: [Number, String],
-      default: () => getConfig().modal.minWidth
-    },
-    minHeight: {
-      type: [Number, String],
-      default: () => getConfig().modal.minHeight
-    },
-    zIndex: Number,
-    marginSize: {
-      type: [Number, String],
-      default: () => getConfig().modal.marginSize
-    },
-    fullscreen: {
-      type: Boolean,
-      default: () => getConfig().modal.fullscreen
-    },
-    draggable: {
-      type: Boolean,
-      default: () => getConfig().modal.draggable
-    },
-    remember: {
-      type: Boolean,
-      default: () => getConfig().modal.remember
-    },
-    destroyOnClose: {
-      type: Boolean,
-      default: () => getConfig().modal.destroyOnClose
-    },
-    showTitleOverflow: {
-      type: Boolean,
-      default: () => getConfig().modal.showTitleOverflow
-    },
-    transfer: {
-      type: Boolean,
-      default: () => getConfig().modal.transfer
-    },
-    appendTo: {
-      type: [String, Function],
-      default: () => getConfig().modal.appendTo
-    },
-    isWithinAppendTo: {
-      type: Boolean,
-      default: () => getConfig().modal.isWithinAppendTo
-    },
-    storage: {
-      type: Boolean,
-      default: () => getConfig().modal.storage
-    },
-    storeDriver: {
-      type: String,
-      default: () => getConfig().modal.storeDriver
-    },
-    storageKey: {
-      type: String,
-      default: () => getConfig().modal.storageKey
-    },
-    padding: {
-      type: Boolean,
-      default: () => getConfig().modal.padding
-    },
-    size: {
-      type: String,
-      default: () => getConfig().modal.size || getConfig().size
-    },
-    beforeHideMethod: Function,
-    slots: Object,
-    useScrollbar: {
-      type: Boolean,
-      default: () => getDefaultConfig(getConfig().modal.useScrollbar, getConfig().useScrollbar)
-    },
-    scrollbarConfig: Object,
-    /**
-     * 已废弃
-     * @deprecated
-     */
-    message: [Number, String],
-    /**
-     * 已废弃
-     * @deprecated
-     */
-    animat: {
-      type: Boolean,
-      default: () => getConfig().modal.animat
-    }
-  },
-  emits: ["update:modelValue", "show", "hide", "before-hide", "close", "confirm", "cancel", "zoom", "resize", "move"],
-  setup(props, context) {
-    const { slots, emit } = context;
-    const xID = XEUtils.uniqueId();
-    const $xeParentModal = inject("$xeModal", null);
-    const $xeDrawer = inject("$xeDrawer", null);
-    const $xeTable = inject("$xeTable", null);
-    const $xeForm = inject("$xeForm", null);
-    const { computeSize } = useFns.useSize(props);
-    const { computeIsVScrollbar } = useFns.useVScrollbar(props);
-    const reactData = reactive(createReactData());
-    const internalData = createInternalData();
-    const refElem = ref();
-    const refModalBox = ref();
-    const refHeaderElem = ref();
-    const refConfirmBtn = ref();
-    const refCancelBtn = ref();
-    const refMaps = {
-      refElem
-    };
-    const computeBtnTransfer = computed(() => {
-      const { transfer } = props;
-      if (transfer === null) {
-        const globalTransfer = getConfig().modal.transfer;
-        if (XEUtils.isBoolean(globalTransfer)) {
-          return globalTransfer;
-        }
-        if ($xeTable || $xeParentModal || $xeDrawer || $xeForm) {
-          return true;
-        }
+var modal_default = (
+  /* define-vxe-component start */
+  defineVxeComponent({
+    name: "VxeModal",
+    props: {
+      modelValue: Boolean,
+      id: String,
+      type: {
+        type: String,
+        default: "modal"
+      },
+      loading: {
+        type: Boolean,
+        default: null
+      },
+      status: String,
+      iconStatus: String,
+      className: String,
+      top: {
+        type: [Number, String],
+        default: () => getConfig().modal.top
+      },
+      position: [String, Object],
+      title: String,
+      duration: {
+        type: [Number, String],
+        default: () => getConfig().modal.duration
+      },
+      content: [Number, String],
+      useHtml: {
+        type: Boolean,
+        default: () => getConfig().modal.useHtml
+      },
+      showCancelButton: {
+        type: Boolean,
+        default: null
+      },
+      cancelButtonText: {
+        type: String,
+        default: () => getConfig().modal.cancelButtonText
+      },
+      showConfirmButton: {
+        type: Boolean,
+        default: () => getConfig().modal.showConfirmButton
+      },
+      confirmButtonText: {
+        type: String,
+        default: () => getConfig().modal.confirmButtonText
+      },
+      lockView: {
+        type: Boolean,
+        default: () => getConfig().modal.lockView
+      },
+      lockScroll: Boolean,
+      mask: {
+        type: Boolean,
+        default: () => getConfig().modal.mask
+      },
+      maskClosable: {
+        type: Boolean,
+        default: () => getConfig().modal.maskClosable
+      },
+      escClosable: {
+        type: Boolean,
+        default: () => getConfig().modal.escClosable
+      },
+      cancelClosable: {
+        type: Boolean,
+        default: () => getConfig().modal.cancelClosable
+      },
+      confirmClosable: {
+        type: Boolean,
+        default: () => getConfig().modal.confirmClosable
+      },
+      resize: Boolean,
+      border: {
+        type: Boolean,
+        default: () => getConfig().modal.border
+      },
+      showTitleBackground: {
+        type: Boolean,
+        default: () => getConfig().modal.showTitleBackground
+      },
+      showHeader: {
+        type: Boolean,
+        default: () => getConfig().modal.showHeader
+      },
+      showFooter: {
+        type: Boolean,
+        default: () => getConfig().modal.showFooter
+      },
+      preload: Boolean,
+      showZoom: Boolean,
+      zoomConfig: Object,
+      showMaximize: {
+        type: Boolean,
+        default: () => handleBooleanDefaultValue(getConfig().modal.showMaximize)
+      },
+      showMinimize: {
+        type: Boolean,
+        default: () => handleBooleanDefaultValue(getConfig().modal.showMinimize)
+      },
+      showClose: {
+        type: Boolean,
+        default: () => getConfig().modal.showClose
+      },
+      dblclickZoom: {
+        type: Boolean,
+        default: () => getConfig().modal.dblclickZoom
+      },
+      width: {
+        type: [Number, String],
+        default: () => getConfig().modal.width
+      },
+      height: {
+        type: [Number, String],
+        default: () => getConfig().modal.height
+      },
+      minWidth: {
+        type: [Number, String],
+        default: () => getConfig().modal.minWidth
+      },
+      minHeight: {
+        type: [Number, String],
+        default: () => getConfig().modal.minHeight
+      },
+      zIndex: Number,
+      marginSize: {
+        type: [Number, String],
+        default: () => getConfig().modal.marginSize
+      },
+      fullscreen: {
+        type: Boolean,
+        default: () => getConfig().modal.fullscreen
+      },
+      draggable: {
+        type: Boolean,
+        default: () => getConfig().modal.draggable
+      },
+      remember: {
+        type: Boolean,
+        default: () => getConfig().modal.remember
+      },
+      destroyOnClose: {
+        type: Boolean,
+        default: () => getConfig().modal.destroyOnClose
+      },
+      showTitleOverflow: {
+        type: Boolean,
+        default: () => getConfig().modal.showTitleOverflow
+      },
+      transfer: {
+        type: Boolean,
+        default: () => getConfig().modal.transfer
+      },
+      appendTo: {
+        type: [String, Function],
+        default: () => getConfig().modal.appendTo
+      },
+      isWithinAppendTo: {
+        type: Boolean,
+        default: () => getConfig().modal.isWithinAppendTo
+      },
+      storage: {
+        type: Boolean,
+        default: () => getConfig().modal.storage
+      },
+      storeDriver: {
+        type: String,
+        default: () => getConfig().modal.storeDriver
+      },
+      storageKey: {
+        type: String,
+        default: () => getConfig().modal.storageKey
+      },
+      padding: {
+        type: Boolean,
+        default: () => getConfig().modal.padding
+      },
+      size: {
+        type: String,
+        default: () => getConfig().modal.size || getConfig().size
+      },
+      beforeHideMethod: Function,
+      slots: Object,
+      useScrollbar: {
+        type: Boolean,
+        default: () => getDefaultConfig(getConfig().modal.useScrollbar, getConfig().useScrollbar)
+      },
+      scrollbarConfig: Object,
+      /**
+       * 已废弃
+       * @deprecated
+       */
+      message: [Number, String],
+      /**
+       * 已废弃
+       * @deprecated
+       */
+      animat: {
+        type: Boolean,
+        default: () => getConfig().modal.animat
       }
-      return transfer;
-    });
-    const computeIsMsg = computed(() => {
-      const { type } = props;
-      return type === "message" || type === "notification";
-    });
-    const computeIsModal = computed(() => {
-      return props.type === "modal";
-    });
-    const computeIsMinimizeStatus = computed(() => {
-      return reactData.zoomStatus === "minimize";
-    });
-    const computeIsMaximizeStatus = computed(() => {
-      return reactData.zoomStatus === "maximize";
-    });
-    const computeZoomOpts = computed(() => {
-      return Object.assign({}, getConfig().modal.zoomConfig, props.zoomConfig);
-    });
-    const computeScrollbarOpts = computed(() => {
-      return Object.assign({}, getConfig().modal.scrollbarConfig, props.scrollbarConfig);
-    });
-    const computeScrollbarProps = computed(() => {
-      const scrollbarOpts = computeScrollbarOpts.value;
-      const { viewClassName, viewInnerClassName } = scrollbarOpts;
-      return {
-        width: scrollbarOpts.width,
-        height: scrollbarOpts.height,
-        autoHide: scrollbarOpts.autoHide,
-        visible: scrollbarOpts.visible,
-        xConfig: scrollbarOpts.xConfig,
-        yConfig: scrollbarOpts.yConfig,
-        className: scrollbarOpts.className,
-        viewAttrs: scrollbarOpts.viewAttrs,
-        viewClassName: "vxe-modal--scrollbar-content-view" + (viewClassName ? " " + viewClassName : ""),
-        viewInnerClassName: "vxe-modal--scrollbar-content-inner" + (viewClassName ? " " + viewInnerClassName : "")
+    },
+    emits: ["update:modelValue", "show", "hide", "before-hide", "close", "confirm", "cancel", "zoom", "resize", "move"],
+    setup(props, context) {
+      const { slots, emit } = context;
+      const xID = XEUtils.uniqueId();
+      const $xeParentModal = inject("$xeModal", null);
+      const $xeDrawer = inject("$xeDrawer", null);
+      const $xeTable = inject("$xeTable", null);
+      const $xeForm = inject("$xeForm", null);
+      const { computeSize } = useFns.useSize(props);
+      const { computeIsVScrollbar } = useFns.useVScrollbar(props);
+      const reactData = reactive(createReactData());
+      const internalData = createInternalData();
+      const refElem = ref();
+      const refModalBox = ref();
+      const refHeaderElem = ref();
+      const refConfirmBtn = ref();
+      const refCancelBtn = ref();
+      const refMaps = {
+        refElem
       };
-    });
-    const computeMaps = {
-      computeSize,
-      computeZoomOpts
-    };
-    const $xeModal = {
-      xID,
-      props,
-      context,
-      reactData,
-      internalData,
-      getRefMaps: () => refMaps,
-      getComputeMaps: () => computeMaps
-    };
-    const posStoreDB = dbUtils.createStore(props.storageKey, {
-      driver: props.storeDriver
-    });
-    const getBox = () => {
-      const boxElem = refModalBox.value;
-      return boxElem;
-    };
-    const recalculate = () => {
-      const { width, height, minWidth, minHeight } = props;
-      const isMsg = computeIsMsg.value;
-      const isMinimizeStatus = computeIsMinimizeStatus.value;
-      const boxElem = getBox();
-      if (boxElem) {
-        boxElem.style.width = width ? toCssUnit(width) : "";
-        boxElem.style.height = height ? toCssUnit(height) : "";
-        boxElem.style.minWidth = !isMsg && !isMinimizeStatus && minWidth ? isScale(minWidth) ? minWidth : toCssUnit(minWidth) : "";
-        boxElem.style.minHeight = !isMsg && !isMinimizeStatus && minHeight ? isScale(minHeight) ? minHeight : toCssUnit(minHeight) : "";
-      }
-      return nextTick();
-    };
-    const updateZindex = () => {
-      const { zIndex } = props;
-      const { modalZindex } = reactData;
-      if (zIndex) {
-        reactData.modalZindex = zIndex;
-      } else {
-        const isMsg = computeIsMsg.value;
-        if (isMsg) {
-          if (modalZindex < getSubLastZIndex()) {
-            reactData.modalZindex = nextSubZIndex();
+      const computeBtnTransfer = computed(() => {
+        const { transfer } = props;
+        if (transfer === null) {
+          const globalTransfer = getConfig().modal.transfer;
+          if (XEUtils.isBoolean(globalTransfer)) {
+            return globalTransfer;
           }
-        } else {
-          if (modalZindex < getLastZIndex()) {
-            reactData.modalZindex = nextZIndex();
+          if ($xeTable || $xeParentModal || $xeDrawer || $xeForm) {
+            return true;
           }
         }
-      }
-    };
-    const updatePosition = () => {
-      return nextTick().then(() => {
-        const { position, isWithinAppendTo } = props;
-        const el = refElem.value;
-        const boxElem = getBox();
-        if (!boxElem) {
-          return;
-        }
-        const parentWrapperEl = getPopupWrapperElement(isWithinAppendTo ? el : document.body);
-        if (!parentWrapperEl) {
-          return;
-        }
-        const clientVisibleWidth = parentWrapperEl.clientWidth;
-        const clientVisibleHeight = parentWrapperEl.clientHeight;
-        const marginSize = XEUtils.toNumber(props.marginSize);
-        const isPosCenter = position === "center";
-        const { top, left } = XEUtils.isString(position) ? { top: position, left: position } : Object.assign({}, position);
-        const topCenter = isPosCenter || top === "center";
-        const leftCenter = isPosCenter || left === "center";
-        let posTop = "";
-        let posLeft = "";
-        if (left && !leftCenter) {
-          posLeft = toCssUnit(left);
-        } else {
-          posLeft = `${Math.max(marginSize, clientVisibleWidth / 2 - boxElem.offsetWidth / 2)}px`;
-        }
-        if (top && !topCenter) {
-          posTop = toCssUnit(top);
-        } else {
-          posTop = `${Math.max(marginSize, clientVisibleHeight / 2 - boxElem.offsetHeight / 2)}px`;
-        }
-        boxElem.style.top = posTop;
-        boxElem.style.left = posLeft;
+        return transfer;
       });
-    };
-    const updateStyle = () => {
-      nextTick(() => {
+      const computeIsMsg = computed(() => {
         const { type } = props;
-        const queueList = type === "notification" ? notifyQueue : msgQueue;
-        let offsetTop = 0;
-        queueList.forEach((comp) => {
-          const boxElem = comp.getBox();
-          if (boxElem) {
-            offsetTop += XEUtils.toNumber(comp.props.top);
-            comp.reactData.modalTop = offsetTop;
-            offsetTop += boxElem.clientHeight;
-          }
-        });
+        return type === "message" || type === "notification";
       });
-    };
-    const removeActiveQueue = () => {
-      if (allActiveModals.indexOf($xeModal) > -1) {
-        XEUtils.remove(allActiveModals, (item) => item === $xeModal);
-      }
-    };
-    const removeMsgQueue = () => {
-      const { type } = props;
-      const queueList = type === "notification" ? notifyQueue : msgQueue;
-      if (queueList.indexOf($xeModal) > -1) {
-        XEUtils.remove(queueList, (comp) => comp === $xeModal);
-      }
-      updateStyle();
-    };
-    const closeModal = (type) => {
-      const { remember } = props;
-      const { visible } = reactData;
-      const isMsg = computeIsMsg.value;
-      const beforeHideFn = props.beforeHideMethod || getConfig().modal.beforeHideMethod;
-      const params = { type };
-      if (visible) {
-        Promise.resolve(beforeHideFn ? beforeHideFn(params) : null).then((rest) => {
-          if (!XEUtils.isError(rest)) {
-            const el = refElem.value;
-            if (el) {
-              el.setAttribute("data-effect", "y");
-            }
-            if (isMsg) {
-              removeMsgQueue();
+      const computeIsModal = computed(() => {
+        return props.type === "modal";
+      });
+      const computeIsMinimizeStatus = computed(() => {
+        return reactData.zoomStatus === "minimize";
+      });
+      const computeIsMaximizeStatus = computed(() => {
+        return reactData.zoomStatus === "maximize";
+      });
+      const computeZoomOpts = computed(() => {
+        return Object.assign({}, getConfig().modal.zoomConfig, props.zoomConfig);
+      });
+      const computeScrollbarOpts = computed(() => {
+        return Object.assign({}, getConfig().modal.scrollbarConfig, props.scrollbarConfig);
+      });
+      const computeScrollbarProps = computed(() => {
+        const scrollbarOpts = computeScrollbarOpts.value;
+        const { viewClassName, viewInnerClassName } = scrollbarOpts;
+        return {
+          width: scrollbarOpts.width,
+          height: scrollbarOpts.height,
+          autoHide: scrollbarOpts.autoHide,
+          visible: scrollbarOpts.visible,
+          xConfig: scrollbarOpts.xConfig,
+          yConfig: scrollbarOpts.yConfig,
+          className: scrollbarOpts.className,
+          viewAttrs: scrollbarOpts.viewAttrs,
+          viewClassName: "vxe-modal--scrollbar-content-view" + (viewClassName ? " " + viewClassName : ""),
+          viewInnerClassName: "vxe-modal--scrollbar-content-inner" + (viewClassName ? " " + viewInnerClassName : "")
+        };
+      });
+      const computeMaps = {
+        computeSize,
+        computeZoomOpts
+      };
+      const $xeModal = {
+        xID,
+        props,
+        context,
+        reactData,
+        internalData,
+        getRefMaps: () => refMaps,
+        getComputeMaps: () => computeMaps
+      };
+      const posStoreDB = dbUtils.createStore(props.storageKey, {
+        driver: props.storeDriver
+      });
+      const getBox = () => {
+        const boxElem = refModalBox.value;
+        return boxElem;
+      };
+      const recalculate = () => {
+        const { width, height, minWidth, minHeight } = props;
+        const isMsg = computeIsMsg.value;
+        const isMinimizeStatus = computeIsMinimizeStatus.value;
+        const boxElem = getBox();
+        if (boxElem) {
+          boxElem.style.width = width ? toCssUnit(width) : "";
+          boxElem.style.height = height ? toCssUnit(height) : "";
+          boxElem.style.minWidth = !isMsg && !isMinimizeStatus && minWidth ? isScale(minWidth) ? minWidth : toCssUnit(minWidth) : "";
+          boxElem.style.minHeight = !isMsg && !isMinimizeStatus && minHeight ? isScale(minHeight) ? minHeight : toCssUnit(minHeight) : "";
+        }
+        return nextTick();
+      };
+      const updateZindex = () => {
+        const { zIndex } = props;
+        const { modalZindex } = reactData;
+        if (zIndex) {
+          reactData.modalZindex = zIndex;
+        } else {
+          const isMsg = computeIsMsg.value;
+          if (isMsg) {
+            if (modalZindex < getSubLastZIndex()) {
+              reactData.modalZindex = nextSubZIndex();
             }
-            reactData.contentVisible = false;
-            if (!remember) {
-              handleRevert();
+          } else {
+            if (modalZindex < getLastZIndex()) {
+              reactData.modalZindex = nextZIndex();
             }
-            removeActiveQueue();
-            dispatchEvent("before-hide", params, null);
-            setTimeout(() => {
-              reactData.visible = false;
-              emitModel(false);
-              dispatchEvent("hide", params, null);
-            }, 200);
-            removeBodyLockScroll();
-            setTimeout(() => {
-              const el2 = refElem.value;
-              if (el2) {
-                el2.removeAttribute("data-effect");
-              }
-            }, 350);
           }
-        }).catch((e) => e);
-      }
-      return nextTick();
-    };
-    const closeEvent = (evnt) => {
-      const type = "close";
-      dispatchEvent(type, { type }, evnt);
-      closeModal(type);
-    };
-    const confirmEvent = (evnt) => {
-      const { confirmClosable } = props;
-      const type = "confirm";
-      dispatchEvent(type, { type }, evnt);
-      if (confirmClosable) {
-        closeModal(type);
-      }
-    };
-    const cancelEvent = (evnt) => {
-      const { cancelClosable } = props;
-      const type = "cancel";
-      dispatchEvent(type, { type }, evnt);
-      if (cancelClosable) {
-        closeModal(type);
-      }
-    };
-    const getStorageMap = (key, id) => {
-      return posStoreDB.getById(id).then((dbRest) => dbRest ? dbRest.data : "");
-    };
-    const saveStorageMap = (id, posStorage) => {
-      return posStoreDB.updateById(id, posStorage);
-    };
-    const restorePosStorage = (posStorage) => {
-      if (posStorage) {
-        const boxElem = getBox();
-        const [left, top, width, height, zoomLeft, zoomTop, zoomWidth, zoomHeight] = posStorage.split(",");
-        if (boxElem) {
-          if (left) {
-            boxElem.style.left = `${left}px`;
+        }
+      };
+      const updatePosition = () => {
+        return nextTick().then(() => {
+          const { position, isWithinAppendTo } = props;
+          const el = refElem.value;
+          const boxElem = getBox();
+          if (!boxElem) {
+            return;
           }
-          if (top) {
-            boxElem.style.top = `${top}px`;
+          const parentWrapperEl = getPopupWrapperElement(isWithinAppendTo ? el : document.body);
+          if (!parentWrapperEl) {
+            return;
           }
-          if (width) {
-            boxElem.style.width = `${width}px`;
+          const clientVisibleWidth = parentWrapperEl.clientWidth;
+          const clientVisibleHeight = parentWrapperEl.clientHeight;
+          const marginSize = XEUtils.toNumber(props.marginSize);
+          const isPosCenter = position === "center";
+          const { top, left } = XEUtils.isString(position) ? { top: position, left: position } : Object.assign({}, position);
+          const topCenter = isPosCenter || top === "center";
+          const leftCenter = isPosCenter || left === "center";
+          let posTop = "";
+          let posLeft = "";
+          if (left && !leftCenter) {
+            posLeft = toCssUnit(left);
+          } else {
+            posLeft = `${Math.max(marginSize, clientVisibleWidth / 2 - boxElem.offsetWidth / 2)}px`;
           }
-          if (height) {
-            boxElem.style.height = `${height}px`;
+          if (top && !topCenter) {
+            posTop = toCssUnit(top);
+          } else {
+            posTop = `${Math.max(marginSize, clientVisibleHeight / 2 - boxElem.offsetHeight / 2)}px`;
           }
+          boxElem.style.top = posTop;
+          boxElem.style.left = posLeft;
+        });
+      };
+      const updateStyle = () => {
+        nextTick(() => {
+          const { type } = props;
+          const queueList = type === "notification" ? notifyQueue : msgQueue;
+          let offsetTop = 0;
+          queueList.forEach((comp) => {
+            const boxElem = comp.getBox();
+            if (boxElem) {
+              offsetTop += XEUtils.toNumber(comp.props.top);
+              comp.reactData.modalTop = offsetTop;
+              offsetTop += boxElem.clientHeight;
+            }
+          });
+        });
+      };
+      const removeActiveQueue = () => {
+        if (allActiveModals.indexOf($xeModal) > -1) {
+          XEUtils.remove(allActiveModals, (item) => item === $xeModal);
         }
-        if (zoomLeft && zoomTop) {
-          reactData.revertLocat = {
-            left: XEUtils.toNumber(zoomLeft),
-            top: XEUtils.toNumber(zoomTop),
-            width: XEUtils.toNumber(zoomWidth),
-            height: XEUtils.toNumber(zoomHeight)
-          };
+      };
+      const removeMsgQueue = () => {
+        const { type } = props;
+        const queueList = type === "notification" ? notifyQueue : msgQueue;
+        if (queueList.indexOf($xeModal) > -1) {
+          XEUtils.remove(queueList, (comp) => comp === $xeModal);
         }
-      }
-    };
-    const addMsgQueue = () => {
-      const { type } = props;
-      const queueList = type === "notification" ? notifyQueue : msgQueue;
-      if (queueList.indexOf($xeModal) === -1) {
-        queueList.push($xeModal);
-      }
-      updateStyle();
-    };
-    const savePosStorage = () => {
-      const { id, storage } = props;
-      const { zoomStatus, revertLocat } = reactData;
-      if (zoomStatus) {
-        return;
-      }
-      if (id && storage) {
-        const boxElem = getBox();
-        if (!boxElem) {
-          return;
+        updateStyle();
+      };
+      const closeModal = (type) => {
+        const { remember } = props;
+        const { visible } = reactData;
+        const isMsg = computeIsMsg.value;
+        const beforeHideFn = props.beforeHideMethod || getConfig().modal.beforeHideMethod;
+        const params = { type };
+        if (visible) {
+          Promise.resolve(beforeHideFn ? beforeHideFn(params) : null).then((rest) => {
+            if (!XEUtils.isError(rest)) {
+              const el = refElem.value;
+              if (el) {
+                el.setAttribute("data-effect", "y");
+              }
+              if (isMsg) {
+                removeMsgQueue();
+              }
+              reactData.contentVisible = false;
+              if (!remember) {
+                handleRevert();
+              }
+              removeActiveQueue();
+              dispatchEvent("before-hide", params, null);
+              setTimeout(() => {
+                reactData.visible = false;
+                emitModel(false);
+                dispatchEvent("hide", params, null);
+              }, 200);
+              removeBodyLockScroll();
+              setTimeout(() => {
+                const el2 = refElem.value;
+                if (el2) {
+                  el2.removeAttribute("data-effect");
+                }
+              }, 350);
+            }
+          }).catch((e) => e);
         }
-        const posStorage = [
-          boxElem.style.left,
-          boxElem.style.top,
-          boxElem.clientWidth,
-          boxElem.clientHeight,
-          ...revertLocat ? [
-            revertLocat.left,
-            revertLocat.top,
-            revertLocat.width,
-            revertLocat.height
-          ] : []
-        ].map((val) => val ? XEUtils.toNumber(val) : "").join(",");
-        saveStorageMap(id, posStorage);
-      }
-    };
-    const handleMinimize = () => {
-      const { isWithinAppendTo } = props;
-      const zoomOpts = computeZoomOpts.value;
-      const { minimizeLayout, minimizeMaxSize, minimizeHorizontalOffset, minimizeVerticalOffset, minimizeOffsetMethod } = zoomOpts;
-      const isHorizontalLayout = minimizeLayout === "horizontal";
-      const prevZoomStatus = reactData.zoomStatus;
-      const hlMList = [];
-      const vlMList = [];
-      allActiveModals.forEach((item) => {
-        if (item.xID !== $xeModal.xID && item.props.type === "modal" && item.reactData.zoomStatus === "minimize") {
-          const itemZoomOpts = item.getComputeMaps().computeZoomOpts.value;
-          if (itemZoomOpts.minimizeLayout === "horizontal") {
-            hlMList.push(item);
-          } else {
-            vlMList.push(item);
-          }
+        return nextTick();
+      };
+      const closeEvent = (evnt) => {
+        const type = "close";
+        dispatchEvent(type, { type }, evnt);
+        closeModal(type);
+      };
+      const confirmEvent = (evnt) => {
+        const { confirmClosable } = props;
+        const type = "confirm";
+        dispatchEvent(type, { type }, evnt);
+        if (confirmClosable) {
+          closeModal(type);
         }
-      });
-      const mList = isHorizontalLayout ? hlMList : vlMList;
-      if (minimizeMaxSize && mList.length >= minimizeMaxSize) {
-        if (VxeUI.modal) {
-          VxeUI.modal.message({
-            status: "error",
-            content: getI18n("vxe.modal.miniMaxSize", [minimizeMaxSize])
-          });
+      };
+      const cancelEvent = (evnt) => {
+        const { cancelClosable } = props;
+        const type = "cancel";
+        dispatchEvent(type, { type }, evnt);
+        if (cancelClosable) {
+          closeModal(type);
         }
-        return Promise.resolve({
-          status: false
-        });
-      }
-      reactData.prevZoomStatus = prevZoomStatus;
-      reactData.zoomStatus = "minimize";
-      return nextTick().then(() => {
-        const el = refElem.value;
-        const boxElem = getBox();
-        if (!boxElem) {
-          return {
-            status: false
-          };
+      };
+      const getStorageMap = (key, id) => {
+        return posStoreDB.getById(id).then((dbRest) => dbRest ? dbRest.data : "");
+      };
+      const saveStorageMap = (id, posStorage) => {
+        return posStoreDB.updateById(id, posStorage);
+      };
+      const restorePosStorage = (posStorage) => {
+        if (posStorage) {
+          const boxElem = getBox();
+          const [left, top, width, height, zoomLeft, zoomTop, zoomWidth, zoomHeight] = posStorage.split(",");
+          if (boxElem) {
+            if (left) {
+              boxElem.style.left = `${left}px`;
+            }
+            if (top) {
+              boxElem.style.top = `${top}px`;
+            }
+            if (width) {
+              boxElem.style.width = `${width}px`;
+            }
+            if (height) {
+              boxElem.style.height = `${height}px`;
+            }
+          }
+          if (zoomLeft && zoomTop) {
+            reactData.revertLocat = {
+              left: XEUtils.toNumber(zoomLeft),
+              top: XEUtils.toNumber(zoomTop),
+              width: XEUtils.toNumber(zoomWidth),
+              height: XEUtils.toNumber(zoomHeight)
+            };
+          }
         }
-        const headerEl = refHeaderElem.value;
-        if (!headerEl) {
-          return {
-            status: false
-          };
+      };
+      const addMsgQueue = () => {
+        const { type } = props;
+        const queueList = type === "notification" ? notifyQueue : msgQueue;
+        if (queueList.indexOf($xeModal) === -1) {
+          queueList.push($xeModal);
         }
-        const parentWrapperEl = getPopupWrapperElement(isWithinAppendTo ? el : document.body);
-        if (!parentWrapperEl) {
-          return {
-            status: false
-          };
+        updateStyle();
+      };
+      const savePosStorage = () => {
+        const { id, storage } = props;
+        const { zoomStatus, revertLocat } = reactData;
+        if (zoomStatus) {
+          return;
         }
-        const visibleHeight = parentWrapperEl.clientHeight;
-        if (!prevZoomStatus) {
-          reactData.revertLocat = {
-            top: boxElem.offsetTop,
-            left: boxElem.offsetLeft,
-            width: boxElem.offsetWidth + (boxElem.style.width ? 0 : 1),
-            height: boxElem.offsetHeight + (boxElem.style.height ? 0 : 1)
-          };
+        if (id && storage) {
+          const boxElem = getBox();
+          if (!boxElem) {
+            return;
+          }
+          const posStorage = [boxElem.style.left, boxElem.style.top, boxElem.clientWidth, boxElem.clientHeight, ...revertLocat ? [revertLocat.left, revertLocat.top, revertLocat.width, revertLocat.height] : []].map((val) => val ? XEUtils.toNumber(val) : "").join(",");
+          saveStorageMap(id, posStorage);
         }
-        const targetModal = XEUtils[isHorizontalLayout ? "max" : "min"](mList, ($modal) => {
-          const boxElem2 = $modal.getBox();
-          return boxElem2 ? XEUtils.toNumber(boxElem2.style[isHorizontalLayout ? "left" : "top"]) : 0;
-        });
-        let targetTop = visibleHeight - headerEl.offsetHeight - 16;
-        let targetLeft = 16;
-        if (targetModal) {
-          const minBoxElem = targetModal.getBox();
-          if (minBoxElem) {
-            const boxLeft = XEUtils.toNumber(minBoxElem.style.left);
-            const boxTop = XEUtils.toNumber(minBoxElem.style.top);
-            let offsetObj = {};
-            if (isHorizontalLayout) {
-              offsetObj = Object.assign({}, minimizeHorizontalOffset);
+      };
+      const handleMinimize = () => {
+        const { isWithinAppendTo } = props;
+        const zoomOpts = computeZoomOpts.value;
+        const { minimizeLayout, minimizeMaxSize, minimizeHorizontalOffset, minimizeVerticalOffset, minimizeOffsetMethod } = zoomOpts;
+        const isHorizontalLayout = minimizeLayout === "horizontal";
+        const prevZoomStatus = reactData.zoomStatus;
+        const hlMList = [];
+        const vlMList = [];
+        allActiveModals.forEach((item) => {
+          if (item.xID !== $xeModal.xID && item.props.type === "modal" && item.reactData.zoomStatus === "minimize") {
+            const itemZoomOpts = item.getComputeMaps().computeZoomOpts.value;
+            if (itemZoomOpts.minimizeLayout === "horizontal") {
+              hlMList.push(item);
             } else {
-              offsetObj = Object.assign({}, minimizeVerticalOffset);
-            }
-            targetLeft = boxLeft + XEUtils.toNumber(offsetObj.left);
-            targetTop = boxTop + XEUtils.toNumber(offsetObj.top);
-            if (minimizeOffsetMethod) {
-              offsetObj = minimizeOffsetMethod({
-                $modal: $xeModal,
-                left: targetLeft,
-                top: targetTop
-              });
-              targetLeft = XEUtils.toNumber(offsetObj.left);
-              targetTop = XEUtils.toNumber(offsetObj.top);
+              vlMList.push(item);
             }
           }
-        }
-        Object.assign(boxElem.style, {
-          top: `${targetTop}px`,
-          left: `${targetLeft}px`,
-          width: "200px",
-          height: `${headerEl.offsetHeight}px`,
-          minHeight: "",
-          minWidth: ""
         });
-        savePosStorage();
-        return {
-          status: true
-        };
-      });
-    };
-    const handleMaximize = () => {
-      const { isWithinAppendTo } = props;
-      const prevZoomStatus = reactData.zoomStatus;
-      reactData.prevZoomStatus = prevZoomStatus;
-      reactData.zoomStatus = "maximize";
-      return nextTick().then(() => {
-        const boxElem = getBox();
-        if (boxElem) {
+        const mList = isHorizontalLayout ? hlMList : vlMList;
+        if (minimizeMaxSize && mList.length >= minimizeMaxSize) {
+          if (VxeUI.modal) {
+            VxeUI.modal.message({
+              status: "error",
+              content: getI18n("vxe.modal.miniMaxSize", [minimizeMaxSize])
+            });
+          }
+          return Promise.resolve({
+            status: false
+          });
+        }
+        reactData.prevZoomStatus = prevZoomStatus;
+        reactData.zoomStatus = "minimize";
+        return nextTick().then(() => {
+          const el = refElem.value;
+          const boxElem = getBox();
+          if (!boxElem) {
+            return {
+              status: false
+            };
+          }
+          const headerEl = refHeaderElem.value;
+          if (!headerEl) {
+            return {
+              status: false
+            };
+          }
+          const parentWrapperEl = getPopupWrapperElement(isWithinAppendTo ? el : document.body);
+          if (!parentWrapperEl) {
+            return {
+              status: false
+            };
+          }
+          const visibleHeight = parentWrapperEl.clientHeight;
           if (!prevZoomStatus) {
-            const el = refElem.value;
-            const parentWrapperEl = getPopupWrapperElement(isWithinAppendTo ? el : document.body);
-            if (!parentWrapperEl) {
-              return {
-                status: false
-              };
-            }
-            const clientVisibleWidth = parentWrapperEl.clientWidth;
-            const clientVisibleHeight = parentWrapperEl.clientHeight;
-            const marginSize = XEUtils.toNumber(props.marginSize);
             reactData.revertLocat = {
-              top: Math.max(marginSize, clientVisibleHeight / 2 - boxElem.offsetHeight / 2),
-              left: Math.max(marginSize, clientVisibleWidth / 2 - boxElem.offsetWidth / 2),
+              top: boxElem.offsetTop,
+              left: boxElem.offsetLeft,
               width: boxElem.offsetWidth + (boxElem.style.width ? 0 : 1),
               height: boxElem.offsetHeight + (boxElem.style.height ? 0 : 1)
             };
           }
+          const targetModal = XEUtils[isHorizontalLayout ? "max" : "min"](mList, ($modal) => {
+            const boxElem2 = $modal.getBox();
+            return boxElem2 ? XEUtils.toNumber(boxElem2.style[isHorizontalLayout ? "left" : "top"]) : 0;
+          });
+          let targetTop = visibleHeight - headerEl.offsetHeight - 16;
+          let targetLeft = 16;
+          if (targetModal) {
+            const minBoxElem = targetModal.getBox();
+            if (minBoxElem) {
+              const boxLeft = XEUtils.toNumber(minBoxElem.style.left);
+              const boxTop = XEUtils.toNumber(minBoxElem.style.top);
+              let offsetObj = {};
+              if (isHorizontalLayout) {
+                offsetObj = Object.assign({}, minimizeHorizontalOffset);
+              } else {
+                offsetObj = Object.assign({}, minimizeVerticalOffset);
+              }
+              targetLeft = boxLeft + XEUtils.toNumber(offsetObj.left);
+              targetTop = boxTop + XEUtils.toNumber(offsetObj.top);
+              if (minimizeOffsetMethod) {
+                offsetObj = minimizeOffsetMethod({
+                  $modal: $xeModal,
+                  left: targetLeft,
+                  top: targetTop
+                });
+                targetLeft = XEUtils.toNumber(offsetObj.left);
+                targetTop = XEUtils.toNumber(offsetObj.top);
+              }
+            }
+          }
           Object.assign(boxElem.style, {
-            top: "0",
-            left: "0",
-            width: "100%",
-            height: "100%",
+            top: `${targetTop}px`,
+            left: `${targetLeft}px`,
+            width: "200px",
+            height: `${headerEl.offsetHeight}px`,
             minHeight: "",
             minWidth: ""
           });
+          savePosStorage();
+          return {
+            status: true
+          };
+        });
+      };
+      const handleMaximize = () => {
+        const { isWithinAppendTo } = props;
+        const prevZoomStatus = reactData.zoomStatus;
+        reactData.prevZoomStatus = prevZoomStatus;
+        reactData.zoomStatus = "maximize";
+        return nextTick().then(() => {
+          const boxElem = getBox();
+          if (boxElem) {
+            if (!prevZoomStatus) {
+              const el = refElem.value;
+              const parentWrapperEl = getPopupWrapperElement(isWithinAppendTo ? el : document.body);
+              if (!parentWrapperEl) {
+                return {
+                  status: false
+                };
+              }
+              const clientVisibleWidth = parentWrapperEl.clientWidth;
+              const clientVisibleHeight = parentWrapperEl.clientHeight;
+              const marginSize = XEUtils.toNumber(props.marginSize);
+              reactData.revertLocat = {
+                top: Math.max(marginSize, clientVisibleHeight / 2 - boxElem.offsetHeight / 2),
+                left: Math.max(marginSize, clientVisibleWidth / 2 - boxElem.offsetWidth / 2),
+                width: boxElem.offsetWidth + (boxElem.style.width ? 0 : 1),
+                height: boxElem.offsetHeight + (boxElem.style.height ? 0 : 1)
+              };
+            }
+            Object.assign(boxElem.style, {
+              top: "0",
+              left: "0",
+              width: "100%",
+              height: "100%",
+              minHeight: "",
+              minWidth: ""
+            });
+          }
+          savePosStorage();
+          return {
+            status: true
+          };
+        });
+      };
+      const handleMsgAutoClose = () => {
+        const { duration } = props;
+        if (duration !== -1) {
+          internalData.msgTimeout = setTimeout(() => closeModal("close"), XEUtils.toNumber(duration));
         }
-        savePosStorage();
-        return {
-          status: true
-        };
-      });
-    };
-    const handleMsgAutoClose = () => {
-      const { duration } = props;
-      if (duration !== -1) {
-        internalData.msgTimeout = setTimeout(() => closeModal("close"), XEUtils.toNumber(duration));
-      }
-    };
-    const removeBodyLockScroll = () => {
-      const htmlElem = document.documentElement;
-      const lockData = htmlElem.getAttribute(lockScrollAttrKey);
-      if (lockData) {
-        const lockList = lockData.split(",").filter((key) => key !== xID);
-        if (lockList.length) {
-          htmlElem.setAttribute(lockScrollAttrKey, lockList.join(","));
-        } else {
-          htmlElem.removeAttribute(lockScrollAttrKey);
-          htmlElem.style.removeProperty(lockScrollCssWidthKey);
-        }
-      }
-    };
-    const addBodyLockScroll = () => {
-      const { lockScroll } = props;
-      const isMsg = computeIsMsg.value;
-      if (lockScroll && !isMsg) {
+      };
+      const removeBodyLockScroll = () => {
         const htmlElem = document.documentElement;
-        const clientWidth = document.body.clientWidth;
         const lockData = htmlElem.getAttribute(lockScrollAttrKey);
-        const lockList = lockData ? lockData.split(",") : [];
-        if (!lockList.includes(xID)) {
-          lockList.push(xID);
-          htmlElem.setAttribute(lockScrollAttrKey, lockList.join(","));
+        if (lockData) {
+          const lockList = lockData.split(",").filter((key) => key !== xID);
+          if (lockList.length) {
+            htmlElem.setAttribute(lockScrollAttrKey, lockList.join(","));
+          } else {
+            htmlElem.removeAttribute(lockScrollAttrKey);
+            htmlElem.style.removeProperty(lockScrollCssWidthKey);
+          }
         }
-        htmlElem.style.setProperty(lockScrollCssWidthKey, `${clientWidth}px`);
-      }
-    };
-    const openModal = () => {
-      const { storageKey, id, remember, showFooter, fullscreen } = props;
-      const { initialized, visible } = reactData;
-      const isMsg = computeIsMsg.value;
-      const isModal = computeIsModal.value;
-      if (!initialized) {
-        reactData.initialized = true;
-      }
-      if (!visible) {
-        addBodyLockScroll();
-        internalData.isMoveStatus = false;
-        reactData.visible = true;
-        reactData.contentVisible = false;
-        updateZindex();
-        allActiveModals.push($xeModal);
-        setTimeout(() => {
-          reactData.contentVisible = true;
-          nextTick(() => {
-            if (!(isModal && fullscreen)) {
-              recalculate();
-            }
-            if (showFooter) {
-              const confirmBtn = refConfirmBtn.value;
-              const cancelBtn = refCancelBtn.value;
-              const operBtn = confirmBtn || cancelBtn;
-              if (operBtn) {
-                operBtn.focus();
+      };
+      const addBodyLockScroll = () => {
+        const { lockScroll } = props;
+        const isMsg = computeIsMsg.value;
+        if (lockScroll && !isMsg) {
+          const htmlElem = document.documentElement;
+          const clientWidth = document.body.clientWidth;
+          const lockData = htmlElem.getAttribute(lockScrollAttrKey);
+          const lockList = lockData ? lockData.split(",") : [];
+          if (!lockList.includes(xID)) {
+            lockList.push(xID);
+            htmlElem.setAttribute(lockScrollAttrKey, lockList.join(","));
+          }
+          htmlElem.style.setProperty(lockScrollCssWidthKey, `${clientWidth}px`);
+        }
+      };
+      const openModal = () => {
+        const { storageKey, id, remember, showFooter, fullscreen } = props;
+        const { initialized, visible } = reactData;
+        const isMsg = computeIsMsg.value;
+        const isModal = computeIsModal.value;
+        if (!initialized) {
+          reactData.initialized = true;
+        }
+        if (!visible) {
+          addBodyLockScroll();
+          internalData.isMoveStatus = false;
+          reactData.visible = true;
+          reactData.contentVisible = false;
+          updateZindex();
+          allActiveModals.push($xeModal);
+          setTimeout(() => {
+            reactData.contentVisible = true;
+            nextTick(() => {
+              if (!(isModal && fullscreen)) {
+                recalculate();
               }
-            }
-            const type = "";
-            const params = { type };
-            emitModel(true);
-            dispatchEvent("show", params, null);
-          });
-        }, 10);
-        if (isMsg) {
-          addMsgQueue();
-          handleMsgAutoClose();
-        } else {
-          nextTick(() => {
-            const { firstOpen } = reactData;
-            const el = refElem.value;
-            if (el) {
-              el.setAttribute("data-effect", "y");
-            }
-            if (firstOpen) {
-              reactData.firstOpen = false;
-              if (storageKey && id) {
-                getStorageMap(storageKey, id).then((posStorage) => {
-                  if (posStorage) {
-                    restorePosStorage(posStorage);
-                  } else {
-                    if (isModal && fullscreen) {
-                      nextTick(() => handleMaximize());
+              if (showFooter) {
+                const confirmBtn = refConfirmBtn.value;
+                const cancelBtn = refCancelBtn.value;
+                const operBtn = confirmBtn || cancelBtn;
+                if (operBtn) {
+                  operBtn.focus();
+                }
+              }
+              const type = "";
+              const params = { type };
+              emitModel(true);
+              dispatchEvent("show", params, null);
+            });
+          }, 10);
+          if (isMsg) {
+            addMsgQueue();
+            handleMsgAutoClose();
+          } else {
+            nextTick(() => {
+              const { firstOpen } = reactData;
+              const el = refElem.value;
+              if (el) {
+                el.setAttribute("data-effect", "y");
+              }
+              if (firstOpen) {
+                reactData.firstOpen = false;
+                if (storageKey && id) {
+                  getStorageMap(storageKey, id).then((posStorage) => {
+                    if (posStorage) {
+                      restorePosStorage(posStorage);
                     } else {
-                      recalculate();
-                      updatePosition().then(() => {
-                        setTimeout(() => updatePosition(), 20);
-                      });
+                      if (isModal && fullscreen) {
+                        nextTick(() => handleMaximize());
+                      } else {
+                        recalculate();
+                        updatePosition().then(() => {
+                          setTimeout(() => updatePosition(), 20);
+                        });
+                      }
                     }
+                  });
+                } else {
+                  if (isModal && fullscreen) {
+                    nextTick(() => handleMaximize());
+                  } else {
+                    recalculate();
+                    updatePosition().then(() => {
+                      setTimeout(() => updatePosition(), 20);
+                    });
                   }
-                });
+                }
               } else {
-                if (isModal && fullscreen) {
-                  nextTick(() => handleMaximize());
-                } else {
+                if (!remember) {
                   recalculate();
                   updatePosition().then(() => {
                     setTimeout(() => updatePosition(), 20);
                   });
                 }
               }
-            } else {
-              if (!remember) {
-                recalculate();
-                updatePosition().then(() => {
-                  setTimeout(() => updatePosition(), 20);
-                });
+            });
+            setTimeout(() => {
+              const el = refElem.value;
+              if (el) {
+                el.removeAttribute("data-effect");
               }
-            }
-          });
-          setTimeout(() => {
-            const el = refElem.value;
-            if (el) {
-              el.removeAttribute("data-effect");
-            }
-          }, 350);
+            }, 350);
+          }
+        }
+        return nextTick();
+      };
+      const selfClickEvent = (evnt) => {
+        const el = refElem.value;
+        if (props.maskClosable && evnt.target === el) {
+          const type = "mask";
+          closeModal(type);
+        }
+      };
+      const selfMouseoverEvent = () => {
+        const { msgTimeout } = internalData;
+        if (!msgTimeout) {
+          return;
         }
-      }
-      return nextTick();
-    };
-    const selfClickEvent = (evnt) => {
-      const el = refElem.value;
-      if (props.maskClosable && evnt.target === el) {
-        const type = "mask";
-        closeModal(type);
-      }
-    };
-    const selfMouseoverEvent = () => {
-      const { msgTimeout } = internalData;
-      if (!msgTimeout) {
-        return;
-      }
-      const isMsg = computeIsMsg.value;
-      if (isMsg) {
-        clearTimeout(msgTimeout);
-        internalData.msgTimeout = void 0;
-      }
-    };
-    const selfMouseoutEvent = () => {
-      const { msgTimeout } = internalData;
-      if (!msgTimeout) {
         const isMsg = computeIsMsg.value;
         if (isMsg) {
-          handleMsgAutoClose();
+          clearTimeout(msgTimeout);
+          internalData.msgTimeout = void 0;
         }
-      }
-    };
-    const handleGlobalKeydownEvent = (evnt) => {
-      const isEsc = globalEvents.hasKey(evnt, GLOBAL_EVENT_KEYS.ESCAPE);
-      if (isEsc) {
-        const lastModal = XEUtils.max(
-          allActiveModals.filter((item) => item.reactData.zoomStatus !== "minimize"),
-          (item) => item.reactData.modalZindex
-        );
-        if (lastModal) {
-          setTimeout(() => {
-            if (lastModal === $xeModal && lastModal.props.escClosable) {
-              const type = "exit";
-              dispatchEvent("close", { type }, evnt);
-              closeModal(type);
-            }
-          }, 10);
+      };
+      const selfMouseoutEvent = () => {
+        const { msgTimeout } = internalData;
+        if (!msgTimeout) {
+          const isMsg = computeIsMsg.value;
+          if (isMsg) {
+            handleMsgAutoClose();
+          }
         }
-      }
-    };
-    const handleGlobalResizeEvent = () => {
-      if (!internalData.isMoveStatus) {
-        updatePosition();
-      }
-    };
-    const isMinimized = () => {
-      return reactData.zoomStatus === "minimize";
-    };
-    const isMaximized = () => {
-      return reactData.zoomStatus === "maximize";
-    };
-    const handleRevert = () => {
-      reactData.prevZoomStatus = reactData.zoomStatus;
-      reactData.zoomStatus = "";
-      return nextTick().then(() => {
-        const { revertLocat } = reactData;
-        if (revertLocat) {
-          const boxElem = getBox();
-          reactData.revertLocat = null;
-          if (boxElem) {
-            Object.assign(boxElem.style, {
-              top: `${revertLocat.top}px`,
-              left: `${revertLocat.left}px`,
-              width: `${revertLocat.width}px`,
-              height: `${revertLocat.height}px`
+      };
+      const handleGlobalKeydownEvent = (evnt) => {
+        const isEsc = globalEvents.hasKey(evnt, GLOBAL_EVENT_KEYS.ESCAPE);
+        if (isEsc) {
+          const lastModal = XEUtils.max(
+            allActiveModals.filter((item) => item.reactData.zoomStatus !== "minimize"),
+            (item) => item.reactData.modalZindex
+          );
+          if (lastModal) {
+            setTimeout(() => {
+              if (lastModal === $xeModal && lastModal.props.escClosable) {
+                const type = "exit";
+                dispatchEvent("close", { type }, evnt);
+                closeModal(type);
+              }
+            }, 10);
+          }
+        }
+      };
+      const handleGlobalResizeEvent = () => {
+        if (!internalData.isMoveStatus) {
+          updatePosition();
+        }
+      };
+      const isMinimized = () => {
+        return reactData.zoomStatus === "minimize";
+      };
+      const isMaximized = () => {
+        return reactData.zoomStatus === "maximize";
+      };
+      const handleRevert = () => {
+        reactData.prevZoomStatus = reactData.zoomStatus;
+        reactData.zoomStatus = "";
+        return nextTick().then(() => {
+          const { revertLocat } = reactData;
+          if (revertLocat) {
+            const boxElem = getBox();
+            reactData.revertLocat = null;
+            if (boxElem) {
+              Object.assign(boxElem.style, {
+                top: `${revertLocat.top}px`,
+                left: `${revertLocat.left}px`,
+                width: `${revertLocat.width}px`,
+                height: `${revertLocat.height}px`
+              });
+            }
+            savePosStorage();
+            return nextTick().then(() => {
+              return {
+                status: true
+              };
             });
           }
-          savePosStorage();
-          return nextTick().then(() => {
+          return {
+            status: false
+          };
+        });
+      };
+      const handleZoom = (type) => {
+        const { zoomStatus } = reactData;
+        return new Promise((resolve) => {
+          if (type) {
+            if (type === "maximize") {
+              resolve(handleMaximize());
+              return;
+            }
+            if (type === "minimize") {
+              resolve(handleMinimize());
+              return;
+            }
+            resolve(handleRevert());
+            return;
+          }
+          resolve(zoomStatus ? handleRevert() : handleMaximize());
+        }).then(() => {
+          return reactData.zoomStatus || "revert";
+        });
+      };
+      const toggleZoomMinEvent = (evnt) => {
+        const { zoomStatus, prevZoomStatus } = reactData;
+        return handleZoom(zoomStatus === "minimize" ? prevZoomStatus || "revert" : "minimize").then((type) => {
+          const params = { type };
+          dispatchEvent("zoom", params, evnt);
+        });
+      };
+      const toggleZoomMaxEvent = (evnt) => {
+        return handleZoom().then((type) => {
+          const params = { type };
+          dispatchEvent("zoom", params, evnt);
+        });
+      };
+      const getPosition = () => {
+        const isMsg = computeIsMsg.value;
+        if (!isMsg) {
+          const boxElem = getBox();
+          if (boxElem) {
             return {
-              status: true
+              top: boxElem.offsetTop,
+              left: boxElem.offsetLeft
             };
-          });
+          }
         }
-        return {
-          status: false
-        };
-      });
-    };
-    const handleZoom = (type) => {
-      const { zoomStatus } = reactData;
-      return new Promise((resolve) => {
-        if (type) {
-          if (type === "maximize") {
-            resolve(handleMaximize());
-            return;
+        return null;
+      };
+      const setPosition = (top, left) => {
+        const isMsg = computeIsMsg.value;
+        if (!isMsg) {
+          const boxElem = getBox();
+          if (boxElem) {
+            if (XEUtils.isNumber(top)) {
+              boxElem.style.top = `${top}px`;
+            }
+            if (XEUtils.isNumber(left)) {
+              boxElem.style.left = `${left}px`;
+            }
           }
-          if (type === "minimize") {
-            resolve(handleMinimize());
+        }
+        return nextTick();
+      };
+      const boxMousedownEvent = () => {
+        const { modalZindex } = reactData;
+        if (allActiveModals.some((comp) => comp.reactData.visible && comp.reactData.modalZindex > modalZindex)) {
+          updateZindex();
+        }
+      };
+      const mousedownEvent = (evnt) => {
+        const { storage, isWithinAppendTo } = props;
+        const { zoomStatus } = reactData;
+        const marginSize = XEUtils.toNumber(props.marginSize);
+        const boxElem = getBox();
+        if (!boxElem) {
+          return;
+        }
+        if (zoomStatus !== "maximize" && evnt.button === 0 && !getEventTargetNode(evnt, boxElem, "trigger--btn").flag) {
+          evnt.preventDefault();
+          const el = refElem.value;
+          const parentWrapperEl = getPopupWrapperElement(isWithinAppendTo ? el : document.body);
+          if (!parentWrapperEl) {
             return;
           }
-          resolve(handleRevert());
+          const visibleWidth = parentWrapperEl.clientWidth;
+          const visibleHeight = parentWrapperEl.clientHeight;
+          const disX = evnt.clientX - boxElem.offsetLeft;
+          const disY = evnt.clientY - boxElem.offsetTop;
+          document.onmousemove = (evnt2) => {
+            evnt2.preventDefault();
+            const offsetWidth = boxElem.offsetWidth;
+            const offsetHeight = boxElem.offsetHeight;
+            const minX = marginSize;
+            const maxX = visibleWidth - offsetWidth - marginSize - 1;
+            const minY = marginSize;
+            const maxY = visibleHeight - offsetHeight - marginSize - 1;
+            let left = evnt2.clientX - disX;
+            let top = evnt2.clientY - disY;
+            if (left > maxX) {
+              left = maxX;
+            }
+            if (left < minX) {
+              left = minX;
+            }
+            if (top > maxY) {
+              top = maxY;
+            }
+            if (top < minY) {
+              top = minY;
+            }
+            boxElem.style.left = `${left}px`;
+            boxElem.style.top = `${top}px`;
+            boxElem.className = boxElem.className.replace(/\s?is--drag/, "") + " is--drag";
+            dispatchEvent("move", { type: "move" }, evnt2);
+            internalData.isMoveStatus = true;
+            reactData.resizeFlag++;
+          };
+          document.onmouseup = () => {
+            document.onmousemove = null;
+            document.onmouseup = null;
+            if (storage) {
+              nextTick(() => {
+                savePosStorage();
+              });
+            }
+            reactData.resizeFlag++;
+            setTimeout(() => {
+              boxElem.className = boxElem.className.replace(/\s?is--drag/, "");
+            }, 50);
+          };
+        }
+      };
+      const dragEvent = (evnt) => {
+        evnt.preventDefault();
+        const { minWidth, minHeight, storage, isWithinAppendTo } = props;
+        const el = refElem.value;
+        const parentWrapperEl = getPopupWrapperElement(isWithinAppendTo ? el : document.body);
+        if (!parentWrapperEl) {
           return;
         }
-        resolve(zoomStatus ? handleRevert() : handleMaximize());
-      }).then(() => {
-        return reactData.zoomStatus || "revert";
-      });
-    };
-    const toggleZoomMinEvent = (evnt) => {
-      const { zoomStatus, prevZoomStatus } = reactData;
-      return handleZoom(zoomStatus === "minimize" ? prevZoomStatus || "revert" : "minimize").then((type) => {
-        const params = { type };
-        dispatchEvent("zoom", params, evnt);
-      });
-    };
-    const toggleZoomMaxEvent = (evnt) => {
-      return handleZoom().then((type) => {
-        const params = { type };
-        dispatchEvent("zoom", params, evnt);
-      });
-    };
-    const getPosition = () => {
-      const isMsg = computeIsMsg.value;
-      if (!isMsg) {
+        const visibleWidth = parentWrapperEl.clientWidth;
+        const visibleHeight = parentWrapperEl.clientHeight;
+        const marginSize = XEUtils.toNumber(props.marginSize);
+        const targetElem = evnt.target;
+        const type = targetElem.getAttribute("data-type");
+        const dragMinWidth = isScale(minWidth) ? XEUtils.toNumber(minWidth) * visibleWidth / 100 : XEUtils.toNumber(minWidth);
+        const dragMinHeight = isScale(minHeight) ? XEUtils.toNumber(minHeight) * visibleHeight / 100 : XEUtils.toNumber(minHeight);
+        const maxWidth = visibleWidth;
+        const maxHeight = visibleHeight;
         const boxElem = getBox();
-        if (boxElem) {
-          return {
-            top: boxElem.offsetTop,
-            left: boxElem.offsetLeft
-          };
+        const clientWidth = boxElem.clientWidth;
+        const clientHeight = boxElem.clientHeight;
+        const disX = evnt.clientX;
+        const disY = evnt.clientY;
+        const offsetTop = boxElem.offsetTop;
+        const offsetLeft = boxElem.offsetLeft;
+        const params = { type: "resize" };
+        document.onmousemove = (evnt2) => {
+          evnt2.preventDefault();
+          let dragLeft;
+          let dragTop;
+          let width;
+          let height;
+          switch (type) {
+            case "wl":
+              dragLeft = disX - evnt2.clientX;
+              width = dragLeft + clientWidth;
+              if (offsetLeft - dragLeft > marginSize) {
+                if (width > dragMinWidth) {
+                  boxElem.style.width = `${width < maxWidth ? width : maxWidth}px`;
+                  boxElem.style.left = `${offsetLeft - dragLeft}px`;
+                }
+              }
+              break;
+            case "swst":
+              dragLeft = disX - evnt2.clientX;
+              dragTop = disY - evnt2.clientY;
+              width = dragLeft + clientWidth;
+              height = dragTop + clientHeight;
+              if (offsetLeft - dragLeft > marginSize) {
+                if (width > dragMinWidth) {
+                  boxElem.style.width = `${width < maxWidth ? width : maxWidth}px`;
+                  boxElem.style.left = `${offsetLeft - dragLeft}px`;
+                }
+              }
+              if (offsetTop - dragTop > marginSize) {
+                if (height > dragMinHeight) {
+                  boxElem.style.height = `${height < maxHeight ? height : maxHeight}px`;
+                  boxElem.style.top = `${offsetTop - dragTop}px`;
+                }
+              }
+              break;
+            case "swlb":
+              dragLeft = disX - evnt2.clientX;
+              dragTop = evnt2.clientY - disY;
+              width = dragLeft + clientWidth;
+              height = dragTop + clientHeight;
+              if (offsetLeft - dragLeft > marginSize) {
+                if (width > dragMinWidth) {
+                  boxElem.style.width = `${width < maxWidth ? width : maxWidth}px`;
+                  boxElem.style.left = `${offsetLeft - dragLeft}px`;
+                }
+              }
+              if (offsetTop + height + marginSize < visibleHeight) {
+                if (height > dragMinHeight) {
+                  boxElem.style.height = `${height < maxHeight ? height : maxHeight}px`;
+                }
+              }
+              break;
+            case "st":
+              dragTop = disY - evnt2.clientY;
+              height = clientHeight + dragTop;
+              if (offsetTop - dragTop > marginSize) {
+                if (height > dragMinHeight) {
+                  boxElem.style.height = `${height < maxHeight ? height : maxHeight}px`;
+                  boxElem.style.top = `${offsetTop - dragTop}px`;
+                }
+              }
+              break;
+            case "wr":
+              dragLeft = evnt2.clientX - disX;
+              width = dragLeft + clientWidth;
+              if (offsetLeft + width + marginSize < visibleWidth) {
+                if (width > dragMinWidth) {
+                  boxElem.style.width = `${width < maxWidth ? width : maxWidth}px`;
+                }
+              }
+              break;
+            case "sest":
+              dragLeft = evnt2.clientX - disX;
+              dragTop = disY - evnt2.clientY;
+              width = dragLeft + clientWidth;
+              height = dragTop + clientHeight;
+              if (offsetLeft + width + marginSize < visibleWidth) {
+                if (width > dragMinWidth) {
+                  boxElem.style.width = `${width < maxWidth ? width : maxWidth}px`;
+                }
+              }
+              if (offsetTop - dragTop > marginSize) {
+                if (height > dragMinHeight) {
+                  boxElem.style.height = `${height < maxHeight ? height : maxHeight}px`;
+                  boxElem.style.top = `${offsetTop - dragTop}px`;
+                }
+              }
+              break;
+            case "selb":
+              dragLeft = evnt2.clientX - disX;
+              dragTop = evnt2.clientY - disY;
+              width = dragLeft + clientWidth;
+              height = dragTop + clientHeight;
+              if (offsetLeft + width + marginSize < visibleWidth) {
+                if (width > dragMinWidth) {
+                  boxElem.style.width = `${width < maxWidth ? width : maxWidth}px`;
+                }
+              }
+              if (offsetTop + height + marginSize < visibleHeight) {
+                if (height > dragMinHeight) {
+                  boxElem.style.height = `${height < maxHeight ? height : maxHeight}px`;
+                }
+              }
+              break;
+            case "sb":
+              dragTop = evnt2.clientY - disY;
+              height = dragTop + clientHeight;
+              if (offsetTop + height + marginSize < visibleHeight) {
+                if (height > dragMinHeight) {
+                  boxElem.style.height = `${height < maxHeight ? height : maxHeight}px`;
+                }
+              }
+              break;
+          }
+          boxElem.className = boxElem.className.replace(/\s?is--drag/, "") + " is--drag";
+          if (storage) {
+            savePosStorage();
+          }
+          dispatchEvent("resize", params, evnt2);
+        };
+        document.onmouseup = () => {
+          reactData.revertLocat = null;
+          document.onmousemove = null;
+          document.onmouseup = null;
+          setTimeout(() => {
+            boxElem.className = boxElem.className.replace(/\s?is--drag/, "");
+          }, 50);
+        };
+      };
+      const dispatchEvent = (type, params, evnt) => {
+        emit(type, createEvent(evnt, { $modal: $xeModal }, params));
+      };
+      const emitModel = (value) => {
+        emit("update:modelValue", value);
+      };
+      const modalMethods = {
+        dispatchEvent,
+        open: openModal,
+        close() {
+          return closeModal("close");
+        },
+        getBox,
+        getPosition,
+        setPosition,
+        isMinimized,
+        isMaximized,
+        zoom() {
+          return handleZoom();
+        },
+        minimize() {
+          const { visible } = reactData;
+          const isModal = computeIsModal.value;
+          if (!isModal || !visible) {
+            return Promise.resolve({
+              status: false
+            });
+          }
+          return handleMinimize();
+        },
+        maximize() {
+          const { visible } = reactData;
+          const isModal = computeIsModal.value;
+          if (!isModal || !visible) {
+            return Promise.resolve({
+              status: false
+            });
+          }
+          return handleMaximize();
+        },
+        revert() {
+          const { visible } = reactData;
+          const isModal = computeIsModal.value;
+          if (!isModal || !visible) {
+            return Promise.resolve({
+              status: false
+            });
+          }
+          return handleRevert();
         }
-      }
-      return null;
-    };
-    const setPosition = (top, left) => {
-      const isMsg = computeIsMsg.value;
-      if (!isMsg) {
-        const boxElem = getBox();
-        if (boxElem) {
-          if (XEUtils.isNumber(top)) {
-            boxElem.style.top = `${top}px`;
+      };
+      Object.assign($xeModal, modalMethods);
+      const renderTitles = () => {
+        const { slots: propSlots = {}, showClose, showZoom, showMaximize, showMinimize, title } = props;
+        const { zoomStatus } = reactData;
+        const titleSlot = slots.title || propSlots.title;
+        const cornerSlot = slots.corner || propSlots.corner;
+        const isMinimizeStatus = computeIsMinimizeStatus.value;
+        const isMaximizeStatus = computeIsMaximizeStatus.value;
+        return [
+          h(
+            "div",
+            {
+              class: "vxe-modal--header-title"
+            },
+            titleSlot ? getSlotVNs(
+              titleSlot({
+                $modal: $xeModal,
+                minimized: isMinimizeStatus,
+                maximized: isMaximizeStatus
+              })
+            ) : title ? getFuncText(title) : getI18n("vxe.alert.title")
+          ),
+          h(
+            "div",
+            {
+              class: "vxe-modal--header-right"
+            },
+            [
+              cornerSlot && !isMinimizeStatus ? h(
+                "div",
+                {
+                  class: "vxe-modal--corner-wrapper"
+                },
+                getSlotVNs(cornerSlot({ $modal: $xeModal }))
+              ) : renderEmptyElement($xeModal),
+              (XEUtils.isBoolean(showMinimize) ? showMinimize : showZoom) ? h(
+                "div",
+                {
+                  class: ["vxe-modal--zoom-btn", "trigger--btn"],
+                  title: getI18n(`vxe.modal.zoom${zoomStatus === "minimize" ? "Out" : "Min"}`),
+                  onClick: toggleZoomMinEvent
+                },
+                [
+                  h("i", {
+                    class: zoomStatus === "minimize" ? getIcon().MODAL_ZOOM_REVERT : getIcon().MODAL_ZOOM_MIN
+                  })
+                ]
+              ) : renderEmptyElement($xeModal),
+              (XEUtils.isBoolean(showMaximize) ? showMaximize : showZoom) && zoomStatus !== "minimize" ? h(
+                "div",
+                {
+                  class: ["vxe-modal--zoom-btn", "trigger--btn"],
+                  title: getI18n(`vxe.modal.zoom${zoomStatus === "maximize" ? "Out" : "In"}`),
+                  onClick: toggleZoomMaxEvent
+                },
+                [
+                  h("i", {
+                    class: zoomStatus === "maximize" ? getIcon().MODAL_ZOOM_OUT : getIcon().MODAL_ZOOM_IN
+                  })
+                ]
+              ) : renderEmptyElement($xeModal),
+              showClose ? h(
+                "div",
+                {
+                  class: ["vxe-modal--close-btn", "trigger--btn"],
+                  title: getI18n("vxe.modal.close"),
+                  onClick: closeEvent
+                },
+                [
+                  h("i", {
+                    class: getIcon().MODAL_CLOSE
+                  })
+                ]
+              ) : renderEmptyElement($xeModal)
+            ]
+          )
+        ];
+      };
+      const renderHeader = () => {
+        const { slots: propSlots = {}, showZoom, showMaximize, draggable } = props;
+        const headerSlot = slots.header || propSlots.header;
+        if (props.showHeader) {
+          const headerOns = {};
+          if (draggable) {
+            headerOns.onMousedown = mousedownEvent;
           }
-          if (XEUtils.isNumber(left)) {
-            boxElem.style.left = `${left}px`;
+          if ((XEUtils.isBoolean(showMaximize) ? showMaximize : showZoom) && props.dblclickZoom && props.type === "modal") {
+            headerOns.onDblclick = toggleZoomMaxEvent;
           }
+          return h(
+            "div",
+            {
+              ref: refHeaderElem,
+              class: [
+                "vxe-modal--header",
+                {
+                  "is--ellipsis": props.showTitleOverflow
+                }
+              ],
+              ...headerOns
+            },
+            headerSlot ? getSlotVNs(headerSlot({ $modal: $xeModal })) : renderTitles()
+          );
         }
-      }
-      return nextTick();
-    };
-    const boxMousedownEvent = () => {
-      const { modalZindex } = reactData;
-      if (allActiveModals.some((comp) => comp.reactData.visible && comp.reactData.modalZindex > modalZindex)) {
-        updateZindex();
-      }
-    };
-    const mousedownEvent = (evnt) => {
-      const { storage, isWithinAppendTo } = props;
-      const { zoomStatus } = reactData;
-      const marginSize = XEUtils.toNumber(props.marginSize);
-      const boxElem = getBox();
-      if (!boxElem) {
-        return;
-      }
-      if (zoomStatus !== "maximize" && evnt.button === 0 && !getEventTargetNode(evnt, boxElem, "trigger--btn").flag) {
-        evnt.preventDefault();
-        const el = refElem.value;
-        const parentWrapperEl = getPopupWrapperElement(isWithinAppendTo ? el : document.body);
-        if (!parentWrapperEl) {
-          return;
+        return renderEmptyElement($xeModal);
+      };
+      const renderBody = () => {
+        const { slots: propSlots = {}, status, message, iconStatus, useHtml } = props;
+        const content = props.content || message;
+        const isVScrollbar = computeIsVScrollbar.value;
+        const isMsg = computeIsMsg.value;
+        const scrollbarProps = computeScrollbarProps.value;
+        const defaultSlot = slots.default || propSlots.default;
+        const leftSlot = slots.left || propSlots.left;
+        const rightSlot = slots.right || propSlots.right;
+        const contVNs = [];
+        if (!isMsg && (status || iconStatus)) {
+          contVNs.push(
+            h(
+              "div",
+              {
+                class: "vxe-modal--status-wrapper"
+              },
+              [
+                h("i", {
+                  class: ["vxe-modal--status-icon", iconStatus || getIcon()[`MODAL_${status}`.toLocaleUpperCase()]]
+                })
+              ]
+            )
+          );
         }
-        const visibleWidth = parentWrapperEl.clientWidth;
-        const visibleHeight = parentWrapperEl.clientHeight;
-        const disX = evnt.clientX - boxElem.offsetLeft;
-        const disY = evnt.clientY - boxElem.offsetTop;
-        document.onmousemove = (evnt2) => {
-          evnt2.preventDefault();
-          const offsetWidth = boxElem.offsetWidth;
-          const offsetHeight = boxElem.offsetHeight;
-          const minX = marginSize;
-          const maxX = visibleWidth - offsetWidth - marginSize - 1;
-          const minY = marginSize;
-          const maxY = visibleHeight - offsetHeight - marginSize - 1;
-          let left = evnt2.clientX - disX;
-          let top = evnt2.clientY - disY;
-          if (left > maxX) {
-            left = maxX;
-          }
-          if (left < minX) {
-            left = minX;
-          }
-          if (top > maxY) {
-            top = maxY;
-          }
-          if (top < minY) {
-            top = minY;
-          }
-          boxElem.style.left = `${left}px`;
-          boxElem.style.top = `${top}px`;
-          boxElem.className = boxElem.className.replace(/\s?is--drag/, "") + " is--drag";
-          dispatchEvent("move", { type: "move" }, evnt2);
-          internalData.isMoveStatus = true;
-          reactData.resizeFlag++;
-        };
-        document.onmouseup = () => {
-          document.onmousemove = null;
-          document.onmouseup = null;
-          if (storage) {
-            nextTick(() => {
-              savePosStorage();
-            });
-          }
-          reactData.resizeFlag++;
-          setTimeout(() => {
-            boxElem.className = boxElem.className.replace(/\s?is--drag/, "");
-          }, 50);
-        };
-      }
-    };
-    const dragEvent = (evnt) => {
-      evnt.preventDefault();
-      const { minWidth, minHeight, storage, isWithinAppendTo } = props;
-      const el = refElem.value;
-      const parentWrapperEl = getPopupWrapperElement(isWithinAppendTo ? el : document.body);
-      if (!parentWrapperEl) {
-        return;
-      }
-      const visibleWidth = parentWrapperEl.clientWidth;
-      const visibleHeight = parentWrapperEl.clientHeight;
-      const marginSize = XEUtils.toNumber(props.marginSize);
-      const targetElem = evnt.target;
-      const type = targetElem.getAttribute("data-type");
-      const dragMinWidth = isScale(minWidth) ? XEUtils.toNumber(minWidth) * visibleWidth / 100 : XEUtils.toNumber(minWidth);
-      const dragMinHeight = isScale(minHeight) ? XEUtils.toNumber(minHeight) * visibleHeight / 100 : XEUtils.toNumber(minHeight);
-      const maxWidth = visibleWidth;
-      const maxHeight = visibleHeight;
-      const boxElem = getBox();
-      const clientWidth = boxElem.clientWidth;
-      const clientHeight = boxElem.clientHeight;
-      const disX = evnt.clientX;
-      const disY = evnt.clientY;
-      const offsetTop = boxElem.offsetTop;
-      const offsetLeft = boxElem.offsetLeft;
-      const params = { type: "resize" };
-      document.onmousemove = (evnt2) => {
-        evnt2.preventDefault();
-        let dragLeft;
-        let dragTop;
-        let width;
-        let height;
-        switch (type) {
-          case "wl":
-            dragLeft = disX - evnt2.clientX;
-            width = dragLeft + clientWidth;
-            if (offsetLeft - dragLeft > marginSize) {
-              if (width > dragMinWidth) {
-                boxElem.style.width = `${width < maxWidth ? width : maxWidth}px`;
-                boxElem.style.left = `${offsetLeft - dragLeft}px`;
-              }
-            }
-            break;
-          case "swst":
-            dragLeft = disX - evnt2.clientX;
-            dragTop = disY - evnt2.clientY;
-            width = dragLeft + clientWidth;
-            height = dragTop + clientHeight;
-            if (offsetLeft - dragLeft > marginSize) {
-              if (width > dragMinWidth) {
-                boxElem.style.width = `${width < maxWidth ? width : maxWidth}px`;
-                boxElem.style.left = `${offsetLeft - dragLeft}px`;
-              }
-            }
-            if (offsetTop - dragTop > marginSize) {
-              if (height > dragMinHeight) {
-                boxElem.style.height = `${height < maxHeight ? height : maxHeight}px`;
-                boxElem.style.top = `${offsetTop - dragTop}px`;
-              }
-            }
-            break;
-          case "swlb":
-            dragLeft = disX - evnt2.clientX;
-            dragTop = evnt2.clientY - disY;
-            width = dragLeft + clientWidth;
-            height = dragTop + clientHeight;
-            if (offsetLeft - dragLeft > marginSize) {
-              if (width > dragMinWidth) {
-                boxElem.style.width = `${width < maxWidth ? width : maxWidth}px`;
-                boxElem.style.left = `${offsetLeft - dragLeft}px`;
-              }
-            }
-            if (offsetTop + height + marginSize < visibleHeight) {
-              if (height > dragMinHeight) {
-                boxElem.style.height = `${height < maxHeight ? height : maxHeight}px`;
-              }
-            }
-            break;
-          case "st":
-            dragTop = disY - evnt2.clientY;
-            height = clientHeight + dragTop;
-            if (offsetTop - dragTop > marginSize) {
-              if (height > dragMinHeight) {
-                boxElem.style.height = `${height < maxHeight ? height : maxHeight}px`;
-                boxElem.style.top = `${offsetTop - dragTop}px`;
-              }
-            }
-            break;
-          case "wr":
-            dragLeft = evnt2.clientX - disX;
-            width = dragLeft + clientWidth;
-            if (offsetLeft + width + marginSize < visibleWidth) {
-              if (width > dragMinWidth) {
-                boxElem.style.width = `${width < maxWidth ? width : maxWidth}px`;
-              }
-            }
-            break;
-          case "sest":
-            dragLeft = evnt2.clientX - disX;
-            dragTop = disY - evnt2.clientY;
-            width = dragLeft + clientWidth;
-            height = dragTop + clientHeight;
-            if (offsetLeft + width + marginSize < visibleWidth) {
-              if (width > dragMinWidth) {
-                boxElem.style.width = `${width < maxWidth ? width : maxWidth}px`;
-              }
-            }
-            if (offsetTop - dragTop > marginSize) {
-              if (height > dragMinHeight) {
-                boxElem.style.height = `${height < maxHeight ? height : maxHeight}px`;
-                boxElem.style.top = `${offsetTop - dragTop}px`;
-              }
-            }
-            break;
-          case "selb":
-            dragLeft = evnt2.clientX - disX;
-            dragTop = evnt2.clientY - disY;
-            width = dragLeft + clientWidth;
-            height = dragTop + clientHeight;
-            if (offsetLeft + width + marginSize < visibleWidth) {
-              if (width > dragMinWidth) {
-                boxElem.style.width = `${width < maxWidth ? width : maxWidth}px`;
-              }
-            }
-            if (offsetTop + height + marginSize < visibleHeight) {
-              if (height > dragMinHeight) {
-                boxElem.style.height = `${height < maxHeight ? height : maxHeight}px`;
+        if (useHtml && !defaultSlot) {
+          contVNs.push(
+            isVScrollbar ? h(
+              VxeScrollbarComponent,
+              {
+                key: "shc",
+                class: "vxe-modal--scrollbar-content",
+                ...scrollbarProps
+              },
+              {
+                default() {
+                  return [
+                    h("div", {
+                      class: "vxe-modal--scrollbar-content-html",
+                      innerHTML: getFuncText(content)
+                    })
+                  ];
+                }
               }
-            }
-            break;
-          case "sb":
-            dragTop = evnt2.clientY - disY;
-            height = dragTop + clientHeight;
-            if (offsetTop + height + marginSize < visibleHeight) {
-              if (height > dragMinHeight) {
-                boxElem.style.height = `${height < maxHeight ? height : maxHeight}px`;
+            ) : h("div", {
+              key: "hc",
+              class: "vxe-modal--content",
+              innerHTML: getFuncText(content)
+            })
+          );
+        } else {
+          contVNs.push(
+            isVScrollbar ? h(
+              VxeScrollbarComponent,
+              {
+                key: "sdc",
+                class: "vxe-modal--scrollbar-content",
+                ...scrollbarProps
+              },
+              {
+                default: () => defaultSlot ? getSlotVNs(defaultSlot({ $modal: $xeModal })) : getFuncText(content)
               }
-            }
-            break;
-        }
-        boxElem.className = boxElem.className.replace(/\s?is--drag/, "") + " is--drag";
-        if (storage) {
-          savePosStorage();
-        }
-        dispatchEvent("resize", params, evnt2);
-      };
-      document.onmouseup = () => {
-        reactData.revertLocat = null;
-        document.onmousemove = null;
-        document.onmouseup = null;
-        setTimeout(() => {
-          boxElem.className = boxElem.className.replace(/\s?is--drag/, "");
-        }, 50);
-      };
-    };
-    const dispatchEvent = (type, params, evnt) => {
-      emit(type, createEvent(evnt, { $modal: $xeModal }, params));
-    };
-    const emitModel = (value) => {
-      emit("update:modelValue", value);
-    };
-    const modalMethods = {
-      dispatchEvent,
-      open: openModal,
-      close() {
-        return closeModal("close");
-      },
-      getBox,
-      getPosition,
-      setPosition,
-      isMinimized,
-      isMaximized,
-      zoom() {
-        return handleZoom();
-      },
-      minimize() {
-        const { visible } = reactData;
-        const isModal = computeIsModal.value;
-        if (!isModal || !visible) {
-          return Promise.resolve({
-            status: false
-          });
-        }
-        return handleMinimize();
-      },
-      maximize() {
-        const { visible } = reactData;
-        const isModal = computeIsModal.value;
-        if (!isModal || !visible) {
-          return Promise.resolve({
-            status: false
-          });
-        }
-        return handleMaximize();
-      },
-      revert() {
-        const { visible } = reactData;
-        const isModal = computeIsModal.value;
-        if (!isModal || !visible) {
-          return Promise.resolve({
-            status: false
-          });
+            ) : h(
+              "div",
+              {
+                key: "dc",
+                class: "vxe-modal--content"
+              },
+              defaultSlot ? getSlotVNs(defaultSlot({ $modal: $xeModal })) : getFuncText(content)
+            )
+          );
         }
-        return handleRevert();
-      }
-    };
-    Object.assign($xeModal, modalMethods);
-    const renderTitles = () => {
-      const { slots: propSlots = {}, showClose, showZoom, showMaximize, showMinimize, title } = props;
-      const { zoomStatus } = reactData;
-      const titleSlot = slots.title || propSlots.title;
-      const cornerSlot = slots.corner || propSlots.corner;
-      const isMinimizeStatus = computeIsMinimizeStatus.value;
-      const isMaximizeStatus = computeIsMaximizeStatus.value;
-      return [
-        h(
-          "div",
-          {
-            class: "vxe-modal--header-title"
-          },
-          titleSlot ? getSlotVNs(
-            titleSlot({
-              $modal: $xeModal,
-              minimized: isMinimizeStatus,
-              maximized: isMaximizeStatus
-            })
-          ) : title ? getFuncText(title) : getI18n("vxe.alert.title")
-        ),
-        h(
+        return h(
           "div",
           {
-            class: "vxe-modal--header-right"
+            class: "vxe-modal--body"
           },
           [
-            cornerSlot && !isMinimizeStatus ? h(
+            leftSlot ? h(
               "div",
               {
-                class: "vxe-modal--corner-wrapper"
+                class: "vxe-modal--body-left"
               },
-              getSlotVNs(cornerSlot({ $modal: $xeModal }))
+              getSlotVNs(leftSlot({ $modal: $xeModal }))
             ) : renderEmptyElement($xeModal),
-            (XEUtils.isBoolean(showMinimize) ? showMinimize : showZoom) ? h(
+            h(
               "div",
               {
-                class: ["vxe-modal--zoom-btn", "trigger--btn"],
-                title: getI18n(`vxe.modal.zoom${zoomStatus === "minimize" ? "Out" : "Min"}`),
-                onClick: toggleZoomMinEvent
+                class: "vxe-modal--body-default"
               },
-              [
-                h("i", {
-                  class: zoomStatus === "minimize" ? getIcon().MODAL_ZOOM_REVERT : getIcon().MODAL_ZOOM_MIN
-                })
-              ]
-            ) : renderEmptyElement($xeModal),
-            (XEUtils.isBoolean(showMaximize) ? showMaximize : showZoom) && zoomStatus !== "minimize" ? h(
+              contVNs
+            ),
+            rightSlot ? h(
               "div",
               {
-                class: ["vxe-modal--zoom-btn", "trigger--btn"],
-                title: getI18n(`vxe.modal.zoom${zoomStatus === "maximize" ? "Out" : "In"}`),
-                onClick: toggleZoomMaxEvent
+                class: "vxe-modal--body-right"
               },
-              [
-                h("i", {
-                  class: zoomStatus === "maximize" ? getIcon().MODAL_ZOOM_OUT : getIcon().MODAL_ZOOM_IN
-                })
-              ]
+              getSlotVNs(rightSlot({ $modal: $xeModal }))
             ) : renderEmptyElement($xeModal),
-            showClose ? h(
-              "div",
-              {
-                class: ["vxe-modal--close-btn", "trigger--btn"],
-                title: getI18n("vxe.modal.close"),
-                onClick: closeEvent
-              },
-              [
-                h("i", {
-                  class: getIcon().MODAL_CLOSE
-                })
-              ]
-            ) : renderEmptyElement($xeModal)
+            isMsg ? renderEmptyElement($xeModal) : h(VxeLoadingComponent, {
+              class: "vxe-modal--loading",
+              modelValue: props.loading
+            })
           ]
-        )
-      ];
-    };
-    const renderHeader = () => {
-      const { slots: propSlots = {}, showZoom, showMaximize, draggable } = props;
-      const headerSlot = slots.header || propSlots.header;
-      if (props.showHeader) {
-        const headerOns = {};
-        if (draggable) {
-          headerOns.onMousedown = mousedownEvent;
+        );
+      };
+      const renderDefaultFooter = () => {
+        const { slots: propSlots = {}, showCancelButton, showConfirmButton, type, loading } = props;
+        const lfSlot = slots.leftfoot || propSlots.leftfoot;
+        const rfSlot = slots.rightfoot || propSlots.rightfoot;
+        const btnVNs = [];
+        if (XEUtils.isBoolean(showCancelButton) ? showCancelButton : type === "confirm") {
+          btnVNs.push(
+            h(VxeButtonComponent, {
+              key: 1,
+              ref: refCancelBtn,
+              content: props.cancelButtonText || getI18n("vxe.button.cancel"),
+              onClick: cancelEvent
+            })
+          );
         }
-        if ((XEUtils.isBoolean(showMaximize) ? showMaximize : showZoom) && props.dblclickZoom && props.type === "modal") {
-          headerOns.onDblclick = toggleZoomMaxEvent;
+        if (XEUtils.isBoolean(showConfirmButton) ? showConfirmButton : type === "confirm" || type === "alert") {
+          btnVNs.push(
+            h(VxeButtonComponent, {
+              key: 2,
+              ref: refConfirmBtn,
+              loading,
+              status: "primary",
+              content: props.confirmButtonText || getI18n("vxe.button.confirm"),
+              onClick: confirmEvent
+            })
+          );
         }
         return h(
           "div",
           {
-            ref: refHeaderElem,
-            class: [
-              "vxe-modal--header",
-              {
-                "is--ellipsis": props.showTitleOverflow
-              }
-            ],
-            ...headerOns
+            class: "vxe-modal--footer-wrapper"
           },
-          headerSlot ? getSlotVNs(headerSlot({ $modal: $xeModal })) : renderTitles()
-        );
-      }
-      return renderEmptyElement($xeModal);
-    };
-    const renderBody = () => {
-      const { slots: propSlots = {}, status, message, iconStatus, useHtml } = props;
-      const content = props.content || message;
-      const isVScrollbar = computeIsVScrollbar.value;
-      const isMsg = computeIsMsg.value;
-      const scrollbarProps = computeScrollbarProps.value;
-      const defaultSlot = slots.default || propSlots.default;
-      const leftSlot = slots.left || propSlots.left;
-      const rightSlot = slots.right || propSlots.right;
-      const contVNs = [];
-      if (!isMsg && (status || iconStatus)) {
-        contVNs.push(
-          h(
-            "div",
-            {
-              class: "vxe-modal--status-wrapper"
-            },
-            [
-              h("i", {
-                class: ["vxe-modal--status-icon", iconStatus || getIcon()[`MODAL_${status}`.toLocaleUpperCase()]]
-              })
-            ]
-          )
-        );
-      }
-      if (useHtml && !defaultSlot) {
-        contVNs.push(
-          isVScrollbar ? h(
-            VxeScrollbarComponent,
-            {
-              key: "shc",
-              class: "vxe-modal--scrollbar-content",
-              ...scrollbarProps
-            },
-            {
-              default() {
-                return [
-                  h("div", {
-                    class: "vxe-modal--scrollbar-content-html",
-                    innerHTML: getFuncText(content)
-                  })
-                ];
-              }
-            }
-          ) : h("div", {
-            key: "hc",
-            class: "vxe-modal--content",
-            innerHTML: getFuncText(content)
-          })
-        );
-      } else {
-        contVNs.push(
-          isVScrollbar ? h(
-            VxeScrollbarComponent,
-            {
-              key: "sdc",
-              class: "vxe-modal--scrollbar-content",
-              ...scrollbarProps
-            },
-            {
-              default: () => defaultSlot ? getSlotVNs(defaultSlot({ $modal: $xeModal })) : getFuncText(content)
-            }
-          ) : h(
-            "div",
-            {
-              key: "dc",
-              class: "vxe-modal--content"
-            },
-            defaultSlot ? getSlotVNs(defaultSlot({ $modal: $xeModal })) : getFuncText(content)
-          )
-        );
-      }
-      return h(
-        "div",
-        {
-          class: "vxe-modal--body"
-        },
-        [
-          leftSlot ? h(
-            "div",
-            {
-              class: "vxe-modal--body-left"
-            },
-            getSlotVNs(leftSlot({ $modal: $xeModal }))
-          ) : renderEmptyElement($xeModal),
-          h(
-            "div",
-            {
-              class: "vxe-modal--body-default"
-            },
-            contVNs
-          ),
-          rightSlot ? h(
-            "div",
-            {
-              class: "vxe-modal--body-right"
-            },
-            getSlotVNs(rightSlot({ $modal: $xeModal }))
-          ) : renderEmptyElement($xeModal),
-          isMsg ? renderEmptyElement($xeModal) : h(VxeLoadingComponent, {
-            class: "vxe-modal--loading",
-            modelValue: props.loading
-          })
-        ]
-      );
-    };
-    const renderDefaultFooter = () => {
-      const { slots: propSlots = {}, showCancelButton, showConfirmButton, type, loading } = props;
-      const lfSlot = slots.leftfoot || propSlots.leftfoot;
-      const rfSlot = slots.rightfoot || propSlots.rightfoot;
-      const btnVNs = [];
-      if (XEUtils.isBoolean(showCancelButton) ? showCancelButton : type === "confirm") {
-        btnVNs.push(
-          h(VxeButtonComponent, {
-            key: 1,
-            ref: refCancelBtn,
-            content: props.cancelButtonText || getI18n("vxe.button.cancel"),
-            onClick: cancelEvent
-          })
-        );
-      }
-      if (XEUtils.isBoolean(showConfirmButton) ? showConfirmButton : type === "confirm" || type === "alert") {
-        btnVNs.push(
-          h(VxeButtonComponent, {
-            key: 2,
-            ref: refConfirmBtn,
-            loading,
-            status: "primary",
-            content: props.confirmButtonText || getI18n("vxe.button.confirm"),
-            onClick: confirmEvent
-          })
+          [
+            h(
+              "div",
+              {
+                class: "vxe-modal--footer-left"
+              },
+              lfSlot ? getSlotVNs(lfSlot({ $modal: $xeModal })) : []
+            ),
+            h(
+              "div",
+              {
+                class: "vxe-modal--footer-right"
+              },
+              rfSlot ? getSlotVNs(rfSlot({ $modal: $xeModal })) : btnVNs
+            )
+          ]
         );
-      }
-      return h(
-        "div",
-        {
-          class: "vxe-modal--footer-wrapper"
-        },
-        [
-          h(
-            "div",
-            {
-              class: "vxe-modal--footer-left"
-            },
-            lfSlot ? getSlotVNs(lfSlot({ $modal: $xeModal })) : []
-          ),
-          h(
+      };
+      const renderFooter = () => {
+        const { slots: propSlots = {} } = props;
+        const footerSlot = slots.footer || propSlots.footer;
+        if (props.showFooter) {
+          return h(
             "div",
             {
-              class: "vxe-modal--footer-right"
+              class: "vxe-modal--footer"
             },
-            rfSlot ? getSlotVNs(rfSlot({ $modal: $xeModal })) : btnVNs
-          )
-        ]
-      );
-    };
-    const renderFooter = () => {
-      const { slots: propSlots = {} } = props;
-      const footerSlot = slots.footer || propSlots.footer;
-      if (props.showFooter) {
+            footerSlot ? getSlotVNs(footerSlot({ $modal: $xeModal })) : [renderDefaultFooter()]
+          );
+        }
+        return renderEmptyElement($xeModal);
+      };
+      const renderVN = () => {
+        const { border, showTitleBackground, slots: propSlots = {}, className, type, animat, draggable, iconStatus, position, loading, destroyOnClose, status, lockScroll, padding, lockView, mask, resize, appendTo, isWithinAppendTo } = props;
+        const { initialized, modalTop, contentVisible, visible, zoomStatus } = reactData;
+        const asideSlot = slots.aside || propSlots.aside;
+        const vSize = computeSize.value;
+        const isMsg = computeIsMsg.value;
+        const isMinimizeStatus = computeIsMinimizeStatus.value;
+        const btnTransfer = computeBtnTransfer.value;
+        const ons = {};
+        if (isMsg) {
+          ons.onMouseover = selfMouseoverEvent;
+          ons.onMouseout = selfMouseoutEvent;
+        }
         return h(
-          "div",
+          Teleport,
           {
-            class: "vxe-modal--footer"
+            to: getPopupContainer(appendTo),
+            disabled: btnTransfer ? !initialized : true
           },
-          footerSlot ? getSlotVNs(footerSlot({ $modal: $xeModal })) : [renderDefaultFooter()]
-        );
-      }
-      return renderEmptyElement($xeModal);
-    };
-    const renderVN = () => {
-      const { border, showTitleBackground, slots: propSlots = {}, className, type, animat, draggable, iconStatus, position, loading, destroyOnClose, status, lockScroll, padding, lockView, mask, resize, appendTo, isWithinAppendTo } = props;
-      const { initialized, modalTop, contentVisible, visible, zoomStatus } = reactData;
-      const asideSlot = slots.aside || propSlots.aside;
-      const vSize = computeSize.value;
-      const isMsg = computeIsMsg.value;
-      const isMinimizeStatus = computeIsMinimizeStatus.value;
-      const btnTransfer = computeBtnTransfer.value;
-      const ons = {};
-      if (isMsg) {
-        ons.onMouseover = selfMouseoverEvent;
-        ons.onMouseout = selfMouseoutEvent;
-      }
-      return h(
-        Teleport,
-        {
-          to: getPopupContainer(appendTo),
-          disabled: btnTransfer ? !initialized : true
-        },
-        [
-          h(
-            "div",
-            {
-              ref: refElem,
-              class: [
-                "vxe-modal--wrapper",
-                `type--${type}`,
-                `zoom--${zoomStatus || "revert"}`,
-                position ? `pos--${position}` : "",
-                isWithinAppendTo ? "ctx--within" : "ctx--free",
-                className || "",
-                {
-                  [`size--${vSize}`]: vSize,
-                  [`status--${status}`]: status,
-                  "is--padding": padding,
-                  "is--border": border,
-                  "is--title-bg": showTitleBackground,
-                  "is--animat": animat,
-                  "lock--scroll": lockScroll,
-                  "lock--view": lockView,
-                  "is--draggable": draggable,
-                  "is--resize": resize,
-                  "is--mask": mask,
-                  "is--visible": contentVisible,
-                  "is--active": visible,
-                  "is--loading": loading
-                }
-              ],
-              style: {
-                zIndex: reactData.modalZindex,
-                top: modalTop ? `${modalTop}px` : null
-              },
-              onClick: selfClickEvent,
-              ...ons
-            },
-            [
-              h(
-                "div",
-                {
-                  ref: refModalBox,
-                  class: "vxe-modal--box",
-                  onMousedown: boxMousedownEvent
+          [
+            h(
+              "div",
+              {
+                ref: refElem,
+                class: [
+                  "vxe-modal--wrapper",
+                  `type--${type}`,
+                  `zoom--${zoomStatus || "revert"}`,
+                  position ? `pos--${position}` : "",
+                  isWithinAppendTo ? "ctx--within" : "ctx--free",
+                  className || "",
+                  {
+                    [`size--${vSize}`]: vSize,
+                    [`status--${status}`]: status,
+                    "is--padding": padding,
+                    "is--border": border,
+                    "is--title-bg": showTitleBackground,
+                    "is--animat": animat,
+                    "lock--scroll": lockScroll,
+                    "lock--view": lockView,
+                    "is--draggable": draggable,
+                    "is--resize": resize,
+                    "is--mask": mask,
+                    "is--visible": contentVisible,
+                    "is--active": visible,
+                    "is--loading": loading
+                  }
+                ],
+                style: {
+                  zIndex: reactData.modalZindex,
+                  top: modalTop ? `${modalTop}px` : null
                 },
-                [
-                  (isMsg || asideSlot) && !isMinimizeStatus ? h(
-                    "div",
-                    {
-                      class: "vxe-modal--aside"
-                    },
-                    asideSlot ? getSlotVNs(asideSlot({ $modal: $xeModal })) : [
-                      status || iconStatus ? h(
-                        "div",
-                        {
-                          class: "vxe-modal--status-wrapper"
-                        },
-                        [
-                          h("i", {
-                            class: ["vxe-modal--status-icon", iconStatus || getIcon()[`MODAL_${status}`.toLocaleUpperCase()]]
+                onClick: selfClickEvent,
+                ...ons
+              },
+              [
+                h(
+                  "div",
+                  {
+                    ref: refModalBox,
+                    class: "vxe-modal--box",
+                    onMousedown: boxMousedownEvent
+                  },
+                  [
+                    (isMsg || asideSlot) && !isMinimizeStatus ? h(
+                      "div",
+                      {
+                        class: "vxe-modal--aside"
+                      },
+                      asideSlot ? getSlotVNs(asideSlot({ $modal: $xeModal })) : [
+                        status || iconStatus ? h(
+                          "div",
+                          {
+                            class: "vxe-modal--status-wrapper"
+                          },
+                          [
+                            h("i", {
+                              class: ["vxe-modal--status-icon", iconStatus || getIcon()[`MODAL_${status}`.toLocaleUpperCase()]]
+                            })
+                          ]
+                        ) : renderEmptyElement($xeModal)
+                      ]
+                    ) : renderEmptyElement($xeModal),
+                    h(
+                      "div",
+                      {
+                        class: "vxe-modal--container"
+                      },
+                      !reactData.initialized || destroyOnClose && !reactData.visible ? [] : [
+                        renderHeader(),
+                        renderBody(),
+                        renderFooter(),
+                        !isMsg && resize ? h(
+                          "span",
+                          {
+                            class: "vxe-modal--resize"
+                          },
+                          ["wl", "wr", "swst", "sest", "st", "swlb", "selb", "sb"].map((type2) => {
+                            return h("span", {
+                              class: `${type2}-resize`,
+                              "data-type": type2,
+                              onMousedown: dragEvent
+                            });
                           })
-                        ]
-                      ) : renderEmptyElement($xeModal)
-                    ]
-                  ) : renderEmptyElement($xeModal),
-                  h(
-                    "div",
-                    {
-                      class: "vxe-modal--container"
-                    },
-                    !reactData.initialized || destroyOnClose && !reactData.visible ? [] : [
-                      renderHeader(),
-                      renderBody(),
-                      renderFooter(),
-                      !isMsg && resize ? h(
-                        "span",
-                        {
-                          class: "vxe-modal--resize"
-                        },
-                        ["wl", "wr", "swst", "sest", "st", "swlb", "selb", "sb"].map((type2) => {
-                          return h("span", {
-                            class: `${type2}-resize`,
-                            "data-type": type2,
-                            onMousedown: dragEvent
-                          });
-                        })
-                      ) : renderEmptyElement($xeModal)
-                    ]
-                  )
-                ]
-              )
-            ]
-          )
-        ]
-      );
-    };
-    $xeModal.renderVN = renderVN;
-    watch(() => props.width, recalculate);
-    watch(() => props.height, recalculate);
-    watch(
-      () => props.modelValue,
-      (value) => {
-        if (value) {
-          openModal();
-        } else {
-          closeModal("model");
+                        ) : renderEmptyElement($xeModal)
+                      ]
+                    )
+                  ]
+                )
+              ]
+            )
+          ]
+        );
+      };
+      $xeModal.renderVN = renderVN;
+      watch(() => props.width, recalculate);
+      watch(() => props.height, recalculate);
+      watch(
+        () => props.modelValue,
+        (value) => {
+          if (value) {
+            openModal();
+          } else {
+            closeModal("model");
+          }
         }
-      }
-    );
-    onMounted(() => {
-      if (props.type === "modal" && props.showFooter && !(props.showConfirmButton || props.showCancelButton || slots.footer)) {
-        warnLog("vxe.modal.footPropErr");
-      }
-      reactData.initialized = !!props.preload;
-      nextTick(() => {
-        if (props.storage && !props.id) {
-          errLog("vxe.error.reqProp", ["id"]);
+      );
+      onMounted(() => {
+        if (props.type === "modal" && props.showFooter && !(props.showConfirmButton || props.showCancelButton || slots.footer)) {
+          warnLog("vxe.modal.footPropErr");
         }
-        if (props.modelValue) {
-          openModal();
+        reactData.initialized = !!props.preload;
+        nextTick(() => {
+          if (props.storage && !props.id) {
+            errLog("vxe.error.reqProp", ["id"]);
+          }
+          if (props.modelValue) {
+            openModal();
+          }
+          recalculate();
+        });
+        if (props.escClosable) {
+          globalEvents.on($xeModal, "keydown", handleGlobalKeydownEvent);
         }
-        recalculate();
+        globalEvents.on($xeModal, "resize", handleGlobalResizeEvent);
       });
-      if (props.escClosable) {
-        globalEvents.on($xeModal, "keydown", handleGlobalKeydownEvent);
-      }
-      globalEvents.on($xeModal, "resize", handleGlobalResizeEvent);
-    });
-    onUnmounted(() => {
-      globalEvents.off($xeModal, "keydown");
-      globalEvents.off($xeModal, "resize");
-      removeMsgQueue();
-      removeActiveQueue();
-      removeBodyLockScroll();
-      XEUtils.assign(reactData, createReactData());
-      XEUtils.assign(internalData, createInternalData());
-    });
-    provide("$xeModal", $xeModal);
-    return $xeModal;
-  },
-  render() {
-    return this.renderVN();
-  }
-});
+      onUnmounted(() => {
+        globalEvents.off($xeModal, "keydown");
+        globalEvents.off($xeModal, "resize");
+        removeMsgQueue();
+        removeActiveQueue();
+        removeBodyLockScroll();
+        XEUtils.assign(reactData, createReactData());
+        XEUtils.assign(internalData, createInternalData());
+      });
+      provide("$xeModal", $xeModal);
+      return $xeModal;
+    },
+    render() {
+      return this.renderVN();
+    }
+  })
+);
 export {
   modal_default as default
 };