ele-admin-plus 1.2.1-beta.2 → 1.2.1-beta.4

package/es/ele-menus/util.js

@@ -1,237 +1,5 @@
-import { h, onBeforeMount, onActivated, onDeactivated } from "vue";
-import { RouterLink } from "vue-router";
-import { ElIcon, ElBadge, ElMenuItem, ElMenuItemGroup, ElSubMenu } from "element-plus";
-import { isExternalLink, getCurrentStyle, debounce } from "../utils/core";
-import { ArrowDown, ArrowRight } from "../icons";
-const linkClass = "ele-menu-link";
-const titleClass = "ele-menu-title";
-const triggerClass = "ele-menu-trigger";
-const overflowClass = "ele-menu-overflow";
-const ellipsisClass = "ele-sub-menu-ellipsis";
-function mergeClass(class1, class2) {
-  const classes = [];
-  if (class1 != null && class1 !== "") {
-    classes.push(class1);
-  }
-  if (class2 != null && class2 !== "") {
-    classes.push(class2);
-  }
-  return classes;
-}
-function getLinkNode(path) {
-  if (isExternalLink(path)) {
-    return h("a", {
-      href: path,
-      target: "_blank",
-      class: linkClass,
-      onClick: (e) => {
-        e.stopPropagation();
-      }
-    });
-  }
-  if (path) {
-    return h(RouterLink, { to: path, class: linkClass });
-  }
-}
-function getTriggerNode(item, path, onItemClick, onItemMouseenter, onItemMouseleave) {
-  return h(
-    "div",
-    {
-      class: triggerClass,
-      onClick: (e) => {
-        onItemClick && onItemClick(item, e);
-      },
-      onMouseenter: (e) => {
-        onItemMouseenter && onItemMouseenter(item, e);
-      },
-      onMouseleave: (e) => {
-        onItemMouseleave && onItemMouseleave(item, e);
-      }
-    },
-    getLinkNode(path)
-  );
-}
-function getNodes(icons, titles, badge, trigger) {
-  const nodes = [];
-  if (icons) {
-    icons.forEach((t) => {
-      nodes.push(t);
-    });
-  }
-  if (titles) {
-    titles.forEach((t) => {
-      nodes.push(t);
-    });
-  }
-  if (badge) {
-    nodes.push(badge);
-  }
-  if (trigger) {
-    nodes.push(trigger);
-  }
-  return nodes;
-}
-function renderItems(items, sIcon, sTitle, tipDisabled, theme, popTheme, colorful, popupColorful, firstPopClass, first, onItemClick, onItemMouseenter, onItemMouseleave, webkit, onParentMouseenter, onParentMouseleave, parentIsGroup) {
-  const nodes = [];
-  if (!items) {
-    return nodes;
-  }
-  items.forEach((item) => {
-    var _a;
-    const key = item.key || item.index || item.path;
-    const iNodes = sIcon ? sIcon({ item, icon: item.icon }) ?? [] : [];
-    if (!iNodes.length && item.icon) {
-      iNodes.push(
-        h(ElIcon, item.iconProps || {}, () => {
-          return h(item.icon, { style: item.iconStyle });
-        })
-      );
-    }
-    const tNodes = sTitle ? sTitle({ item, title: item.title }) ?? [] : [];
-    if (!tNodes.length && item.title) {
-      tNodes.push(h("span", { class: titleClass }, item.title));
-    }
-    const bNode = item.badge != null ? h(ElBadge, item.badge) : null;
-    if (!((_a = item.children) == null ? void 0 : _a.length)) {
-      const triggerNode = getTriggerNode(
-        item,
-        item.path,
-        onItemClick,
-        onItemMouseenter,
-        onItemMouseleave
-      );
-      nodes.push(
-        h(
-          ElMenuItem,
-          {
-            key: key + "-" + tipDisabled,
-            index: item.index || item.path,
-            route: item.route,
-            disabled: item.disabled,
-            class: mergeClass(
-              item.overflow ? overflowClass : void 0,
-              item.class
-            ),
-            style: item.style,
-            onClick: () => {
-            }
-          },
-          {
-            default: () => {
-              if (first && !tipDisabled) {
-                return getNodes(iNodes, void 0, bNode, triggerNode);
-              }
-              return getNodes(iNodes, tNodes, bNode, triggerNode);
-            },
-            title: first && !tipDisabled ? () => tNodes : void 0
-          }
-        )
-      );
-      return;
-    }
-    const parentTriggerNode = getTriggerNode(
-      item,
-      void 0,
-      void 0,
-      onParentMouseenter,
-      onParentMouseleave
-    );
-    if (item.group === true && !parentIsGroup) {
-      nodes.push(
-        h(
-          ElMenuItemGroup,
-          { key, style: item.style, class: item.class },
-          {
-            default: () => {
-              return renderItems(
-                item.children,
-                sIcon,
-                sTitle,
-                tipDisabled,
-                theme,
-                popTheme,
-                colorful,
-                popupColorful,
-                firstPopClass,
-                first,
-                onItemClick,
-                onItemMouseenter,
-                onItemMouseleave,
-                webkit,
-                onParentMouseenter,
-                onParentMouseleave,
-                true
-              );
-            },
-            title: () => getNodes(iNodes, tNodes, bNode, parentTriggerNode)
-          }
-        )
-      );
-      return;
-    }
-    nodes.push(
-      h(
-        ElSubMenu,
-        {
-          key,
-          index: item.index || item.path,
-          popperClass: getPopperClass(
-            item.popperClass,
-            theme,
-            popTheme,
-            colorful,
-            popupColorful,
-            firstPopClass,
-            first,
-            webkit
-          ),
-          showTimeout: item.showTimeout,
-          hideTimeout: item.hideTimeout,
-          disabled: item.disabled,
-          teleported: item.teleported ?? !!first,
-          popperOffset: item.popperOffset,
-          expandCloseIcon: item.expandCloseIcon ?? ArrowDown,
-          expandOpenIcon: item.expandOpenIcon ?? ArrowDown,
-          collapseCloseIcon: item.collapseCloseIcon ?? ArrowRight,
-          collapseOpenIcon: item.collapseOpenIcon ?? ArrowRight,
-          class: mergeClass(
-            item.overflow ? overflowClass : void 0,
-            item.class
-          ),
-          style: item.style
-        },
-        {
-          default: () => {
-            var _a2;
-            if (((_a2 = item.children) == null ? void 0 : _a2.length) === 1 && item.children[0] == null) {
-              return;
-            }
-            return renderItems(
-              item.children,
-              sIcon,
-              sTitle,
-              tipDisabled,
-              theme,
-              popTheme,
-              colorful,
-              popupColorful,
-              firstPopClass,
-              false,
-              onItemClick,
-              onItemMouseenter,
-              onItemMouseleave,
-              webkit,
-              onParentMouseenter,
-              onParentMouseleave
-            );
-          },
-          title: () => getNodes(iNodes, tNodes, bNode, parentTriggerNode)
-        }
-      )
-    );
-  });
-  return nodes;
-}
+import { onBeforeMount, onActivated, onDeactivated } from "vue";
+import { getCurrentStyle, debounce } from "../utils/core";
 function getPopperClass(customerClass, theme, popTheme, colorful, popupColorful, firstPopClass, first, webkit) {
   const popperClass = ["ele-menu"];
   if (webkit) {
@@ -294,6 +62,7 @@ function getItemWidth(el) {
   return el.offsetWidth + ml + mr;
 }
 function getMenuChilds(el) {
+  const ellipsisClass = "ele-sub-menu-ellipsis";
   return Array.from(el.childNodes ?? []).filter((t) => {
     return t.nodeName === "LI" && !t.classList.contains(ellipsisClass);
   });
@@ -354,20 +123,10 @@ function useMenuEllipsis(option) {
   return { observe, unobserve, computedEllipsis };
 }
 export {
-  ellipsisClass,
   getItemWidth,
-  getLinkNode,
   getMenuChilds,
   getMenuItems,
   getMenuWidth,
-  getNodes,
   getPopperClass,
-  getTriggerNode,
-  linkClass,
-  mergeClass,
-  overflowClass,
-  renderItems,
-  titleClass,
-  triggerClass,
   useMenuEllipsis
 };

package/es/ele-modal/index.d.ts

@@ -1,5 +1,4 @@
 import { ElDialogInstance } from '../ele-app/el';
-import { Position } from './types';
 
 declare const _default: import('vue').DefineComponent<{
     appendToBody: {
@@ -12,7 +11,7 @@ declare const _default: import('vue').DefineComponent<{
     };
     moveOut: import('vue').PropType<import('./types').MoveOut>;
     resizable: import('vue').PropType<import('./types').Resizable>;
-    position: import('vue').PropType<Position>;
+    position: import('vue').PropType<import('./types').Position>;
     resetOnClose: {
         type: BooleanConstructor;
         default: boolean;
@@ -28,19 +27,19 @@ declare const _default: import('vue').DefineComponent<{
         type: NumberConstructor;
         default: number;
     };
-    headerStyle: import('vue').PropType<Partial<import('vue').CSSProperties>>;
-    titleStyle: import('vue').PropType<Partial<import('vue').CSSProperties>>;
-    bodyStyle: import('vue').PropType<Partial<import('vue').CSSProperties>>;
-    footerStyle: import('vue').PropType<Partial<import('vue').CSSProperties>>;
-    closeBtnStyle: import('vue').PropType<Partial<import('vue').CSSProperties>>;
-    fullscreenBtnStyle: import('vue').PropType<Partial<import('vue').CSSProperties>>;
-    resizeIconStyle: import('vue').PropType<Partial<import('vue').CSSProperties>>;
+    headerStyle: import('vue').PropType<import('../ele-app/types').StyleValue>;
+    titleStyle: import('vue').PropType<import('../ele-app/types').StyleValue>;
+    bodyStyle: import('vue').PropType<import('../ele-app/types').StyleValue>;
+    footerStyle: import('vue').PropType<import('../ele-app/types').StyleValue>;
+    closeBtnStyle: import('vue').PropType<import('../ele-app/types').StyleValue>;
+    fullscreenBtnStyle: import('vue').PropType<import('../ele-app/types').StyleValue>;
+    resizeIconStyle: import('vue').PropType<import('../ele-app/types').StyleValue>;
     responsive: {
         type: BooleanConstructor;
         default: null;
     };
-    form: BooleanConstructor; /** 弹窗类名 */
-    appendTo: import('element-plus/es/utils/index').EpPropFinalized<(new (...args: any[]) => string & {}) | (() => string) | ((new (...args: any[]) => string & {}) | (() => string))[], unknown, unknown, "body", boolean>;
+    form: BooleanConstructor;
+    appendTo: import('element-plus/es/utils/index').EpPropFinalized<(new (...args: any[]) => (string | HTMLElement) & {}) | (() => string | HTMLElement) | ((new (...args: any[]) => (string | HTMLElement) & {}) | (() => string | HTMLElement))[], unknown, unknown, "body", boolean>;
     beforeClose: {
         readonly type: import('vue').PropType<import('element-plus').DialogBeforeCloseFn>;
         readonly required: false;
@@ -74,12 +73,12 @@ declare const _default: import('vue').DefineComponent<{
         readonly validator: ((val: unknown) => boolean) | undefined;
         __epPropKey: true;
     };
-    trapFocus: import('element-plus/es/utils/index').EpPropFinalized<BooleanConstructor, unknown, unknown, false, boolean>;
+    trapFocus: BooleanConstructor;
     headerAriaLevel: import('element-plus/es/utils/index').EpPropFinalized<StringConstructor, unknown, unknown, "2", boolean>;
     center: BooleanConstructor;
     alignCenter: BooleanConstructor;
     closeIcon: {
-        readonly type: import('vue').PropType<import('element-plus/es/utils/index').EpPropMergeType<(new (...args: any[]) => (string | import('vue').Component<any, any, any, import('vue').ComputedOptions, import('vue').MethodOptions, {}, any>) & {}) | (() => string | import('vue').Component<any, any, any, import('vue').ComputedOptions, import('vue').MethodOptions, {}, any>) | ((new (...args: any[]) => (string | import('vue').Component<any, any, any, import('vue').ComputedOptions, import('vue').MethodOptions, {}, any>) & {}) | (() => string | import('vue').Component<any, any, any, import('vue').ComputedOptions, import('vue').MethodOptions, {}, any>))[], unknown, unknown>>;
+        readonly type: import('vue').PropType<import('element-plus/es/utils/index').EpPropMergeType<(new (...args: any[]) => (string | import('vue').Component<any, any, any, import('vue').ComputedOptions, import('vue').MethodOptions>) & {}) | (() => string | import('vue').Component<any, any, any, import('vue').ComputedOptions, import('vue').MethodOptions>) | ((new (...args: any[]) => (string | import('vue').Component<any, any, any, import('vue').ComputedOptions, import('vue').MethodOptions>) & {}) | (() => string | import('vue').Component<any, any, any, import('vue').ComputedOptions, import('vue').MethodOptions>))[], unknown, unknown>>;
         readonly required: false;
         readonly validator: ((val: unknown) => boolean) | undefined;
         __epPropKey: true;
@@ -95,8 +94,10 @@ declare const _default: import('vue').DefineComponent<{
     dialogClass: import('vue').ComputedRef<string>;
     teleportTo: import('vue').ComputedRef<string | Element>;
     teleportDisabled: import('vue').ComputedRef<boolean>;
-    handleHeaderMousedown: (event: MouseEvent) => void;
-    handleResizeMousedown: (event: MouseEvent) => void;
+    handleHeaderMousedown: (e: MouseEvent) => void;
+    handleHeaderTouchstart: (e: TouchEvent) => void;
+    handleResizeMousedown: (e: MouseEvent) => void;
+    handleResizeTouchstart: (e: TouchEvent) => void;
     updateModelValue: (modelValue: boolean) => void;
     toggleFullscreen: (fullscreen?: boolean) => void;
     handleOpen: () => void;
@@ -125,7 +126,7 @@ declare const _default: import('vue').DefineComponent<{
     };
     moveOut: import('vue').PropType<import('./types').MoveOut>;
     resizable: import('vue').PropType<import('./types').Resizable>;
-    position: import('vue').PropType<Position>;
+    position: import('vue').PropType<import('./types').Position>;
     resetOnClose: {
         type: BooleanConstructor;
         default: boolean;
@@ -141,19 +142,19 @@ declare const _default: import('vue').DefineComponent<{
         type: NumberConstructor;
         default: number;
     };
-    headerStyle: import('vue').PropType<Partial<import('vue').CSSProperties>>;
-    titleStyle: import('vue').PropType<Partial<import('vue').CSSProperties>>;
-    bodyStyle: import('vue').PropType<Partial<import('vue').CSSProperties>>;
-    footerStyle: import('vue').PropType<Partial<import('vue').CSSProperties>>;
-    closeBtnStyle: import('vue').PropType<Partial<import('vue').CSSProperties>>;
-    fullscreenBtnStyle: import('vue').PropType<Partial<import('vue').CSSProperties>>;
-    resizeIconStyle: import('vue').PropType<Partial<import('vue').CSSProperties>>;
+    headerStyle: import('vue').PropType<import('../ele-app/types').StyleValue>;
+    titleStyle: import('vue').PropType<import('../ele-app/types').StyleValue>;
+    bodyStyle: import('vue').PropType<import('../ele-app/types').StyleValue>;
+    footerStyle: import('vue').PropType<import('../ele-app/types').StyleValue>;
+    closeBtnStyle: import('vue').PropType<import('../ele-app/types').StyleValue>;
+    fullscreenBtnStyle: import('vue').PropType<import('../ele-app/types').StyleValue>;
+    resizeIconStyle: import('vue').PropType<import('../ele-app/types').StyleValue>;
     responsive: {
         type: BooleanConstructor;
         default: null;
     };
-    form: BooleanConstructor; /** 弹窗类名 */
-    appendTo: import('element-plus/es/utils/index').EpPropFinalized<(new (...args: any[]) => string & {}) | (() => string) | ((new (...args: any[]) => string & {}) | (() => string))[], unknown, unknown, "body", boolean>;
+    form: BooleanConstructor;
+    appendTo: import('element-plus/es/utils/index').EpPropFinalized<(new (...args: any[]) => (string | HTMLElement) & {}) | (() => string | HTMLElement) | ((new (...args: any[]) => (string | HTMLElement) & {}) | (() => string | HTMLElement))[], unknown, unknown, "body", boolean>;
     beforeClose: {
         readonly type: import('vue').PropType<import('element-plus').DialogBeforeCloseFn>;
         readonly required: false;
@@ -187,12 +188,12 @@ declare const _default: import('vue').DefineComponent<{
         readonly validator: ((val: unknown) => boolean) | undefined;
         __epPropKey: true;
     };
-    trapFocus: import('element-plus/es/utils/index').EpPropFinalized<BooleanConstructor, unknown, unknown, false, boolean>;
+    trapFocus: BooleanConstructor;
     headerAriaLevel: import('element-plus/es/utils/index').EpPropFinalized<StringConstructor, unknown, unknown, "2", boolean>;
     center: BooleanConstructor;
     alignCenter: BooleanConstructor;
     closeIcon: {
-        readonly type: import('vue').PropType<import('element-plus/es/utils/index').EpPropMergeType<(new (...args: any[]) => (string | import('vue').Component<any, any, any, import('vue').ComputedOptions, import('vue').MethodOptions, {}, any>) & {}) | (() => string | import('vue').Component<any, any, any, import('vue').ComputedOptions, import('vue').MethodOptions, {}, any>) | ((new (...args: any[]) => (string | import('vue').Component<any, any, any, import('vue').ComputedOptions, import('vue').MethodOptions, {}, any>) & {}) | (() => string | import('vue').Component<any, any, any, import('vue').ComputedOptions, import('vue').MethodOptions, {}, any>))[], unknown, unknown>>;
+        readonly type: import('vue').PropType<import('element-plus/es/utils/index').EpPropMergeType<(new (...args: any[]) => (string | import('vue').Component<any, any, any, import('vue').ComputedOptions, import('vue').MethodOptions>) & {}) | (() => string | import('vue').Component<any, any, any, import('vue').ComputedOptions, import('vue').MethodOptions>) | ((new (...args: any[]) => (string | import('vue').Component<any, any, any, import('vue').ComputedOptions, import('vue').MethodOptions>) & {}) | (() => string | import('vue').Component<any, any, any, import('vue').ComputedOptions, import('vue').MethodOptions>))[], unknown, unknown>>;
         readonly required: false;
         readonly validator: ((val: unknown) => boolean) | undefined;
         __epPropKey: true;
@@ -204,10 +205,10 @@ declare const _default: import('vue').DefineComponent<{
     ariaLevel: import('element-plus/es/utils/index').EpPropFinalized<StringConstructor, unknown, unknown, "2", boolean>;
 }>> & {
     "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
-    onOpenAutoFocus?: (() => any) | undefined;
-    onCloseAutoFocus?: (() => any) | undefined;
     onClose?: (() => any) | undefined;
     onOpen?: (() => any) | undefined;
+    onOpenAutoFocus?: (() => any) | undefined;
+    onCloseAutoFocus?: (() => any) | undefined;
     onOpened?: (() => any) | undefined;
     onClosed?: (() => any) | undefined;
     "onUpdate:fullscreen"?: ((_fullscreen: boolean) => any) | undefined;
@@ -216,9 +217,8 @@ declare const _default: import('vue').DefineComponent<{
     title: string;
     center: boolean;
     modelValue: boolean;
-    multiple: boolean;
     appendToBody: boolean;
-    appendTo: string;
+    appendTo: import('element-plus/es/utils/index').EpPropMergeType<(new (...args: any[]) => (string | HTMLElement) & {}) | (() => string | HTMLElement) | ((new (...args: any[]) => (string | HTMLElement) & {}) | (() => string | HTMLElement))[], unknown, unknown>;
     destroyOnClose: boolean;
     closeOnClickModal: import('element-plus/es/utils/index').EpPropMergeType<BooleanConstructor, unknown, unknown>;
     closeOnPressEscape: import('element-plus/es/utils/index').EpPropMergeType<BooleanConstructor, unknown, unknown>;
@@ -226,7 +226,7 @@ declare const _default: import('vue').DefineComponent<{
     modal: import('element-plus/es/utils/index').EpPropMergeType<BooleanConstructor, unknown, unknown>;
     openDelay: number;
     closeDelay: number;
-    trapFocus: import('element-plus/es/utils/index').EpPropMergeType<BooleanConstructor, unknown, unknown>;
+    trapFocus: boolean;
     headerAriaLevel: string;
     alignCenter: boolean;
     draggable: boolean;
@@ -236,6 +236,7 @@ declare const _default: import('vue').DefineComponent<{
     ariaLevel: string;
     minWidth: number;
     minHeight: number;
+    multiple: boolean;
     responsive: boolean;
     resetOnClose: boolean;
     maxable: boolean;

package/es/ele-modal/index.js

@@ -1,9 +1,9 @@
-import { defineComponent, ref, computed, watch, onMounted, onActivated, onDeactivated, nextTick, unref, resolveComponent, openBlock, createBlock, Teleport, createVNode, mergeProps, createSlots, withCtx, createElementVNode, normalizeStyle, renderSlot, createTextVNode, toDisplayString, createElementBlock, withModifiers, createCommentVNode, resolveDynamicComponent, normalizeClass } from "vue";
+import { defineComponent, ref, computed, watch, onMounted, onActivated, onDeactivated, nextTick, resolveComponent, openBlock, createBlock, Teleport, createVNode, mergeProps, createSlots, withCtx, createElementVNode, normalizeStyle, renderSlot, createTextVNode, toDisplayString, createElementBlock, withModifiers, createCommentVNode, resolveDynamicComponent, normalizeClass } from "vue";
 import { ElDialog, ElIcon } from "element-plus";
 import { CloseOutlined, CompressOutlined, ExpandOutlined, ResizeOutlined } from "../icons";
 import ReceiverView from "../ele-config-provider/components/receiver-view";
 import { useLayoutState, useResponsive } from "../ele-pro-layout/util";
-import { getModalContainer, wrapperClass, closedClass, getPositionMargin, handleMove, handleResize, topModal, resetModalStyle } from "./util";
+import { getModalContainer, useModalEvent, wrapperClass, closedClass } from "./util";
 import { modalProps, modalEmits } from "./props";
 const _sfc_main = defineComponent({
   name: "EleModal",
@@ -20,7 +20,6 @@ const _sfc_main = defineComponent({
   props: modalProps,
   emits: modalEmits,
   setup(props, { emit }) {
-    const state = { isInit: true };
     const layoutState = useLayoutState();
     const isResponsive = useResponsive(props);
     const dialogRef = ref(null);
@@ -89,58 +88,24 @@ const _sfc_main = defineComponent({
       const disabled = appendTo === "body" ? !props.appendToBody : false;
       return props.multiple || props.inner ? false : disabled;
     });
-    const getModalEl = () => {
-      var _a, _b;
-      return (_b = unref((_a = unref(dialogRef)) == null ? void 0 : _a.dialogContentRef)) == null ? void 0 : _b.$el;
-    };
-    const getZIndex = () => {
-      return props.zIndex ?? 2e3;
-    };
-    const getPosition = () => {
-      if (props.alignCenter) {
-        return "center";
-      }
-      if (props.top != null && props.top !== "") {
-        return { top: props.top };
-      }
-      return props.position;
-    };
-    const setInitPosition = () => {
-      if (state.isInit) {
-        state.isInit = false;
-        const modalEl = getModalEl();
-        const margin = getPositionMargin(getPosition());
-        if (modalEl && margin != null) {
-          modalEl.style.margin = margin;
-        }
-      }
-    };
-    const mousedownListener = (event) => {
-      if (props.multiple) {
-        topModal(event.currentTarget, getZIndex());
-      }
-    };
-    const handleHeaderMousedown = (event) => {
-      const modalEl = getModalEl();
-      if (!modalEl || !props.draggable || isFullscreen.value) {
-        return;
-      }
-      handleMove(modalEl, event, props);
-    };
-    const handleResizeMousedown = (event) => {
-      const modalEl = getModalEl();
-      if (!modalEl || !props.resizable || isFullscreen.value) {
-        return;
-      }
-      handleResize(modalEl, event, props);
-    };
+    const {
+      handleHeaderMousedown,
+      handleHeaderTouchstart,
+      handleResizeMousedown,
+      handleResizeTouchstart,
+      bindAutoTopEvent,
+      unbindAutoTopEvent,
+      topModal,
+      setInitPosition,
+      resetModalStyle
+    } = useModalEvent(dialogRef, props, isFullscreen);
     const updateModelValue = (modelValue) => {
       emit("update:modelValue", modelValue);
     };
     const toggleFullscreen = (fullscreen) => {
       isFullscreen.value = fullscreen ?? !isFullscreen.value;
       nextTick(() => {
-        topModal(getModalEl(), getZIndex());
+        topModal();
       });
       emit("update:fullscreen", isFullscreen.value);
     };
@@ -149,28 +114,21 @@ const _sfc_main = defineComponent({
         isFullscreen.value = props.fullscreen ?? false;
       }
       nextTick(() => {
-        const modalEl = getModalEl();
         if (props.resetOnClose) {
-          resetModalStyle(modalEl, props.width, getPosition());
+          resetModalStyle();
         } else {
           setInitPosition();
         }
-        topModal(modalEl, getZIndex());
+        topModal();
       });
       emit("open");
     };
     const handleOpened = () => {
-      const modalEl = getModalEl();
-      if (modalEl) {
-        modalEl.addEventListener("mousedown", mousedownListener);
-      }
+      bindAutoTopEvent();
       emit("opened");
     };
     const handleClose = () => {
-      const modalEl = getModalEl();
-      if (modalEl) {
-        modalEl.removeEventListener("mousedown", mousedownListener);
-      }
+      unbindAutoTopEvent();
       emit("close");
     };
     const handleClosed = () => {
@@ -206,7 +164,9 @@ const _sfc_main = defineComponent({
       teleportTo,
       teleportDisabled,
       handleHeaderMousedown,
+      handleHeaderTouchstart,
       handleResizeMousedown,
+      handleResizeTouchstart,
       updateModelValue,
       toggleFullscreen,
       handleOpen,
@@ -272,7 +232,8 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
         createElementVNode("div", {
           style: normalizeStyle(_ctx.headerStyle),
           class: "ele-modal-header",
-          onMousedown: _cache[4] || (_cache[4] = (...args) => _ctx.handleHeaderMousedown && _ctx.handleHeaderMousedown(...args))
+          onMousedown: _cache[6] || (_cache[6] = (...args) => _ctx.handleHeaderMousedown && _ctx.handleHeaderMousedown(...args)),
+          onTouchstart: _cache[7] || (_cache[7] = (...args) => _ctx.handleHeaderTouchstart && _ctx.handleHeaderTouchstart(...args))
         }, [
           createElementVNode("div", {
             class: "ele-modal-title",
@@ -292,6 +253,8 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
             style: normalizeStyle(_ctx.fullscreenBtnStyle),
             onClick: _cache[0] || (_cache[0] = ($event) => _ctx.toggleFullscreen()),
             onMousedown: _cache[1] || (_cache[1] = withModifiers(() => {
+            }, ["stop"])),
+            onTouchstart: _cache[2] || (_cache[2] = withModifiers(() => {
             }, ["stop"]))
           }, [
             renderSlot(_ctx.$slots, "maxIcon", { fullscreen: _ctx.isFullscreen }, () => [
@@ -307,8 +270,10 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
             key: 1,
             class: "ele-modal-tool",
             style: normalizeStyle(_ctx.closeBtnStyle),
-            onClick: _cache[2] || (_cache[2] = ($event) => _ctx.updateModelValue(false)),
-            onMousedown: _cache[3] || (_cache[3] = withModifiers(() => {
+            onClick: _cache[3] || (_cache[3] = ($event) => _ctx.updateModelValue(false)),
+            onMousedown: _cache[4] || (_cache[4] = withModifiers(() => {
+            }, ["stop"])),
+            onTouchstart: _cache[5] || (_cache[5] = withModifiers(() => {
             }, ["stop"]))
           }, [
             renderSlot(_ctx.$slots, "closeIcon", {}, () => [
@@ -329,7 +294,8 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
             { "is-vertical": _ctx.resizable === "vertical" }
           ]),
           style: normalizeStyle(_ctx.resizeIconStyle),
-          onMousedown: _cache[5] || (_cache[5] = (...args) => _ctx.handleResizeMousedown && _ctx.handleResizeMousedown(...args))
+          onMousedown: _cache[8] || (_cache[8] = (...args) => _ctx.handleResizeMousedown && _ctx.handleResizeMousedown(...args)),
+          onTouchstart: _cache[9] || (_cache[9] = (...args) => _ctx.handleResizeTouchstart && _ctx.handleResizeTouchstart(...args))
         }, [
           renderSlot(_ctx.$slots, "resizeIcon", {}, () => [
             createVNode(_component_ElIcon, null, {