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

package/lib/ele-menus/util.cjs

@@ -7,26 +7,22 @@ const core = require("../utils/core");
 const icons = require("../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 getLinkNode(item, onItemClick) {
-  if (!(item == null ? void 0 : item.path)) {
-    return;
-  }
-  if (core.isExternalLink(item.path)) {
+function getLinkNode(path) {
+  if (core.isExternalLink(path)) {
     return vue.h("a", {
-      href: item.path,
+      href: path,
       target: "_blank",
-      class: linkClass,
-      onClick: (e) => {
-        e.stopPropagation();
-        onItemClick && onItemClick(item);
-      }
+      class: linkClass
     });
   }
-  return vue.h(vueRouter.RouterLink, { to: item.path, class: linkClass });
+  if (path) {
+    return vue.h(vueRouter.RouterLink, { to: path, class: linkClass });
+  }
 }
-function getNodes(icons2, titles, badge, link) {
+function getNodes(icons2, titles, badge, trigger) {
   const nodes = [];
   if (icons2) {
     icons2.forEach((t) => {
@@ -41,18 +37,19 @@ function getNodes(icons2, titles, badge, link) {
   if (badge) {
     nodes.push(badge);
   }
-  if (link) {
-    nodes.push(link);
+  if (trigger) {
+    nodes.push(trigger);
   }
   return nodes;
 }
-function renderItems(items, sIcon, sTitle, tipDisabled, theme, popTheme, colorful, popupColorful, firstPopClass, first, onItemClick) {
+function renderItems(items, sIcon, sTitle, tipDisabled, theme, popTheme, colorful, popupColorful, firstPopClass, first, onItemClick, onItemMouseenter, onItemMouseleave, webkit) {
   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(
@@ -67,27 +64,40 @@ function renderItems(items, sIcon, sTitle, tipDisabled, theme, popTheme, colorfu
     }
     const bNode = item.badge != null ? vue.h(elementPlus.ElBadge, item.badge) : null;
     if (!((_a = item.children) == null ? void 0 : _a.length)) {
-      const linkNode = getLinkNode(item, onItemClick);
-      const key = item.key || item.index || item.path;
+      const triggerNode = vue.h(
+        "div",
+        {
+          class: triggerClass,
+          onClick: (e) => {
+            onItemClick && onItemClick(item, e);
+          },
+          onMouseenter: (e) => {
+            onItemMouseenter && onItemMouseenter(item, e);
+          },
+          onMouseleave: (e) => {
+            onItemMouseleave && onItemMouseleave(item, e);
+          }
+        },
+        getLinkNode(item.path)
+      );
       nodes.push(
         vue.h(
           elementPlus.ElMenuItem,
           {
             key: key + "-" + tipDisabled,
-            index: item.index,
+            index: item.index || item.path,
             route: item.route,
             disabled: item.disabled,
             class: item.overflow ? overflowClass : void 0,
             onClick: () => {
-              onItemClick && onItemClick(item);
             }
           },
           {
             default: () => {
-              if (!first || tipDisabled) {
-                return getNodes(iNodes, tNodes, bNode, linkNode);
+              if (first && !tipDisabled) {
+                return getNodes(iNodes, void 0, bNode, triggerNode);
               }
-              return getNodes(iNodes, void 0, bNode, linkNode);
+              return getNodes(iNodes, tNodes, bNode, triggerNode);
             },
             title: first && !tipDisabled ? () => tNodes : void 0
           }
@@ -97,47 +107,45 @@ function renderItems(items, sIcon, sTitle, tipDisabled, theme, popTheme, colorfu
     }
     if (item.group === true) {
       nodes.push(
-        vue.h(
-          elementPlus.ElMenuItemGroup,
-          { key: item.key || item.index },
-          {
-            default: () => {
-              return renderItems(
-                item.children,
-                sIcon,
-                sTitle,
-                tipDisabled,
-                theme,
-                popTheme,
-                colorful,
-                popupColorful,
-                firstPopClass,
-                first,
-                onItemClick
-              );
-            },
-            title: () => getNodes(iNodes, tNodes, bNode)
-          }
-        )
+        vue.h(elementPlus.ElMenuItemGroup, { key }, {
+          default: () => {
+            return renderItems(
+              item.children,
+              sIcon,
+              sTitle,
+              tipDisabled,
+              theme,
+              popTheme,
+              colorful,
+              popupColorful,
+              firstPopClass,
+              first,
+              onItemClick,
+              onItemMouseenter,
+              onItemMouseleave
+            );
+          },
+          title: () => getNodes(iNodes, tNodes, bNode)
+        })
       );
       return;
     }
-    const popperClass = getPopperClass(
-      item.popperClass,
-      theme,
-      popTheme,
-      colorful,
-      popupColorful,
-      firstPopClass,
-      first
-    );
     nodes.push(
       vue.h(
         elementPlus.ElSubMenu,
         {
-          key: item.key || item.index,
-          index: item.index,
-          popperClass,
+          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,
@@ -166,7 +174,9 @@ function renderItems(items, sIcon, sTitle, tipDisabled, theme, popTheme, colorfu
               popupColorful,
               firstPopClass,
               false,
-              onItemClick
+              onItemClick,
+              onItemMouseenter,
+              onItemMouseleave
             );
           },
           title: () => getNodes(iNodes, tNodes, bNode)
@@ -176,6 +186,25 @@ function renderItems(items, sIcon, sTitle, tipDisabled, theme, popTheme, colorfu
   });
   return nodes;
 }
+function getPopperClass(customerClass, theme, popTheme, colorful, popupColorful, firstPopClass, first, webkit) {
+  const popperClass = ["ele-menu"];
+  if (webkit) {
+    popperClass.push("is-webkit");
+  }
+  if (popTheme === "dark" || popTheme === "auto" && theme === "dark") {
+    popperClass.push("is-night ele-menu-dark");
+  }
+  if (popupColorful === true || popupColorful === "auto" && colorful) {
+    popperClass.push("is-colorful ele-menu-colorful");
+  }
+  if (first && firstPopClass) {
+    popperClass.push(firstPopClass);
+  }
+  if (customerClass) {
+    popperClass.push(customerClass);
+  }
+  return popperClass.join(" ");
+}
 function getMenuItems(menus, index, horizontal) {
   if (!horizontal || !menus || !menus.length) {
     return { items: menus };
@@ -190,36 +219,16 @@ function getMenuItems(menus, index, horizontal) {
   const moreItems = index === 0 ? data : data.slice(index);
   moreItems.forEach((d) => {
     var _a;
-    const children = ((_a = d.children) == null ? void 0 : _a.length) ? [null] : void 0;
     items.push({
       ...d,
+      key: `overflow-${d.key || d.index || d.path}`,
+      index: `overflow-${d.index || d.path}`,
       overflow: true,
-      key: `overflow-${d.key || d.index}`,
-      index: `overflow-${d.index}`,
-      children
+      children: ((_a = d.children) == null ? void 0 : _a.length) ? [null] : void 0
     });
   });
   return { items, moreItems };
 }
-function getPopperClass(customerClass, theme, popTheme, colorful, popupColorful, firstPopClass, first) {
-  const popperClass = ["ele-menu"];
-  if (navigator.userAgent.includes("WebKit")) {
-    popperClass.push("is-webkit");
-  }
-  if (popTheme === "dark" || popTheme === "auto" && theme === "dark") {
-    popperClass.push("is-night ele-menu-dark");
-  }
-  if (popupColorful === true || popupColorful === "auto" && colorful) {
-    popperClass.push("is-colorful ele-menu-colorful");
-  }
-  if (first && firstPopClass) {
-    popperClass.push(firstPopClass);
-  }
-  if (customerClass) {
-    popperClass.push(customerClass);
-  }
-  return popperClass.join(" ");
-}
 function getMenuWidth(el) {
   if (!el) {
     return;
@@ -239,8 +248,7 @@ function getItemWidth(el) {
   return el.offsetWidth + ml + mr;
 }
 function getMenuChilds(el) {
-  const childs = Array.from(el.childNodes ?? []);
-  return childs.filter((t) => {
+  return Array.from(el.childNodes ?? []).filter((t) => {
     return t.nodeName === "LI" && !t.classList.contains(ellipsisClass);
   });
 }
@@ -311,4 +319,5 @@ exports.linkClass = linkClass;
 exports.overflowClass = overflowClass;
 exports.renderItems = renderItems;
 exports.titleClass = titleClass;
+exports.triggerClass = triggerClass;
 exports.useMenuEllipsis = useMenuEllipsis;

package/lib/ele-menus/util.d.ts

@@ -1,9 +1,11 @@
 import type { VNode, Slot } from 'vue';
-import type { MenuItem, MenuTheme, PopupMenuTheme, PopupColorful, MenuResult, MenuEllipsisOption, ItemClick } from './types';
-/** 菜单链接类名 */
+import type { MenuItem, MenuTheme, PopupMenuTheme, PopupColorful, MenuResult, MenuEllipsisOption, MenuItemEvent } from './types';
+/** 子菜单项链接类名 */
 export declare const linkClass = "ele-menu-link";
 /** 菜单标题类名 */
 export declare const titleClass = "ele-menu-title";
+/** 子菜单项事件触发元素类名 */
+export declare const triggerClass = "ele-menu-trigger";
 /** 菜单溢出隐藏项类名 */
 export declare const overflowClass = "ele-menu-overflow";
 /** 菜单省略项的类名 */
@@ -12,20 +14,20 @@ export declare const ellipsisClass = "ele-sub-menu-ellipsis";
  * 生成菜单链接节点
  * @param path 链接地址
  */
-export declare function getLinkNode(item: MenuItem, onItemClick?: ItemClick): VNode | undefined;
+export declare function getLinkNode(path?: string): VNode | undefined;
 /**
  * 生成菜单内容节点
  * @param icons 图标节点
  * @param titles 标题节点
  * @param badge 徽章节点
- * @param link 链接节点
+ * @param trigger 子菜单项事件触发元素节点
  */
-export declare function getNodes(icons?: VNode[], titles?: VNode[], badge?: VNode | null, link?: VNode | null): VNode[];
+export declare function getNodes(icons?: VNode[], titles?: VNode[], badge?: VNode | null, trigger?: VNode | null): VNode[];
 /**
  * 递归生成菜单节点
  * @param items 菜单数据
  * @param sIcon 图标插槽
- * @param sTitle 白哦提插槽
+ * @param sTitle 标题插槽
  * @param tipDisabled 是否禁用折叠的tooltip
  * @param theme 主题
  * @param popTheme 气泡菜单主题
@@ -33,15 +35,12 @@ export declare function getNodes(icons?: VNode[], titles?: VNode[], badge?: VNod
  * @param popupColorful 气泡菜单是否彩色图标
  * @param firstPopClass 第一级气泡菜单类名
  * @param first 是否是第一级菜单
+ * @param onItemClick 子菜单项点击事件
+ * @param onItemMouseenter 子菜单项鼠标进入事件
+ * @param onItemMouseenter 子菜单项鼠标离开事件
+ * @param webkit 是否时webkit内核
  */
-export declare function renderItems(items?: MenuItem[], sIcon?: Slot, sTitle?: Slot, tipDisabled?: boolean, theme?: MenuTheme, popTheme?: PopupMenuTheme, colorful?: boolean, popupColorful?: PopupColorful, firstPopClass?: string, first?: boolean, onItemClick?: ItemClick): VNode[];
-/**
- * 生成菜单数据
- * @param items 菜单数据
- * @param index 省略位置
- * @param horizontal 是否是水平菜单
- */
-export declare function getMenuItems(menus?: MenuItem[], index?: number, horizontal?: boolean): MenuResult;
+export declare function renderItems(items?: MenuItem[], sIcon?: Slot, sTitle?: Slot, tipDisabled?: boolean, theme?: MenuTheme, popTheme?: PopupMenuTheme, colorful?: boolean, popupColorful?: PopupColorful, firstPopClass?: string, first?: boolean, onItemClick?: MenuItemEvent, onItemMouseenter?: MenuItemEvent, onItemMouseleave?: MenuItemEvent, webkit?: boolean): VNode[];
 /**
  * 生成气泡菜单的类名
  * @param customerClass 自定义的类名
@@ -52,7 +51,14 @@ export declare function getMenuItems(menus?: MenuItem[], index?: number, horizon
  * @param firstPopClass 第一级气泡菜单类名
  * @param first 是否是第一级菜单
  */
-export declare function getPopperClass(customerClass?: string, theme?: MenuTheme, popTheme?: PopupMenuTheme, colorful?: boolean, popupColorful?: PopupColorful, firstPopClass?: string, first?: boolean): string;
+export declare function getPopperClass(customerClass?: string, theme?: MenuTheme, popTheme?: PopupMenuTheme, colorful?: boolean, popupColorful?: PopupColorful, firstPopClass?: string, first?: boolean, webkit?: boolean): string;
+/**
+ * 生成菜单数据
+ * @param items 菜单数据
+ * @param index 省略位置
+ * @param horizontal 是否是水平菜单
+ */
+export declare function getMenuItems(menus?: MenuItem[], index?: number, horizontal?: boolean): MenuResult;
 /**
  * 获取菜单节点宽度
  * @param el 菜单节点

package/lib/ele-modal/index.cjs

@@ -39,6 +39,29 @@ const _sfc_main = vue.defineComponent({
       if (props$1.form) {
         classes.push("ele-modal-form");
       }
+      if (props$1.position) {
+        if (props$1.position === "top") {
+          classes.push("ele-modal-top");
+        } else if (props$1.position === "bottom") {
+          classes.push("ele-modal-bottom");
+        } else if (props$1.position === "left") {
+          classes.push("ele-modal-left");
+        } else if (props$1.position === "right") {
+          classes.push("ele-modal-right");
+        } else if (props$1.position === "leftTop") {
+          classes.push("ele-modal-left-top");
+        } else if (props$1.position === "leftBottom") {
+          classes.push("ele-modal-left-bottom");
+        } else if (props$1.position === "rightTop") {
+          classes.push("ele-modal-right-top");
+        } else if (props$1.position === "rightBottom") {
+          classes.push("ele-modal-right-bottom");
+        } else if (props$1.position === "center") {
+          classes.push("ele-modal-center");
+        }
+      } else if (props$1.alignCenter) {
+        classes.push("ele-modal-center");
+      }
       if (props$1.draggable) {
         classes.push(util.movableClass);
       }
@@ -98,7 +121,7 @@ const _sfc_main = vue.defineComponent({
       return classes.join(" ");
     });
     const dialogProps = vue.computed(() => {
-      const opt = {
+      const option = {
         fullscreen: false,
         modal: props$1.multiple ? false : props$1.modal,
         appendToBody: false,
@@ -108,7 +131,7 @@ const _sfc_main = vue.defineComponent({
         destroyOnClose: false,
         modalClass: dialogClass.value
       };
-      return Object.assign({}, attrs, core.pick(props$1, props.dialogPropKeys), opt);
+      return Object.assign({}, attrs, core.pick(props$1, props.dialogPropKeys), option);
     });
     const teleportDisabled = vue.computed(() => {
       const appendTo = props$1.appendTo || "body";
@@ -149,7 +172,7 @@ const _sfc_main = vue.defineComponent({
         if (props$1.resetOnClose) {
           util.resetModalStyle(modalEl, props$1.width, props$1.top);
         }
-        if (props$1.position) {
+        if (props$1.position && typeof props$1.position === "object") {
           util.setInitPosition(
             modalEl,
             props$1.resizable,
@@ -211,7 +234,7 @@ const _sfc_main = vue.defineComponent({
     vue.watch(
       () => props$1.position,
       (position) => {
-        if (position && props$1.modelValue) {
+        if (props$1.modelValue && position && typeof position === "object") {
           util.setInitPosition(
             getModalEl(),
             props$1.resizable,

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

@@ -198,11 +198,11 @@ declare const _default: import("vue").DefineComponent<{
     title: import("element-plus/es/utils/index").EpPropFinalized<StringConstructor, unknown, unknown, "", boolean>;
     ariaLevel: import("element-plus/es/utils/index").EpPropFinalized<StringConstructor, unknown, unknown, "2", boolean>;
 }>> & {
+    "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
     onOpen?: (() => any) | undefined;
     onClose?: (() => any) | undefined;
     onOpenAutoFocus?: (() => any) | undefined;
     onCloseAutoFocus?: (() => any) | undefined;
-    "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
     onOpened?: (() => any) | undefined;
     onClosed?: (() => any) | undefined;
     "onUpdate:fullscreen"?: ((_fullscreen: boolean) => any) | undefined;
@@ -229,8 +229,8 @@ declare const _default: import("vue").DefineComponent<{
     showClose: import("element-plus/es/utils/index").EpPropMergeType<BooleanConstructor, unknown, unknown>;
     ariaLevel: string;
     minWidth: number;
-    minHeight: number;
     multiple: boolean;
+    minHeight: number;
     responsive: boolean;
     resetOnClose: boolean;
     maxable: boolean;

package/lib/ele-modal/style/index.scss

@@ -11,15 +11,23 @@
 
   & > .el-overlay-dialog {
     position: absolute;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: center;
 
     & > .el-dialog {
+      padding: 0;
+      position: relative;
       background: eleVar('modal', 'bg');
       border-radius: eleVar('modal', 'radius');
-      padding: 0;
 
+      & > .el-dialog__header,
       & > .el-dialog__footer {
+        flex-shrink: 0;
         border: none;
         padding: 0;
+        margin: 0;
       }
 
       & > .el-dialog__body {
@@ -27,12 +35,6 @@
         color: inherit;
         font-size: inherit;
       }
-
-      & > .el-dialog__header {
-        margin: 0;
-        padding: 0;
-        border: none;
-      }
     }
   }
 
@@ -101,6 +103,55 @@
   }
 }
 
+/* 默认位置 */
+.ele-modal-center > .el-overlay-dialog > .el-dialog,
+.ele-modal-top > .el-overlay-dialog > .el-dialog,
+.ele-modal-bottom > .el-overlay-dialog > .el-dialog,
+.ele-modal-left > .el-overlay-dialog > .el-dialog,
+.ele-modal-right > .el-overlay-dialog > .el-dialog,
+.ele-modal-left-top > .el-overlay-dialog > .el-dialog,
+.ele-modal-left-bottom > .el-overlay-dialog > .el-dialog,
+.ele-modal-right-top > .el-overlay-dialog > .el-dialog,
+.ele-modal-right-bottom > .el-overlay-dialog > .el-dialog {
+  margin: 0;
+}
+
+.ele-modal-center > .el-overlay-dialog {
+  justify-content: center;
+}
+
+.ele-modal-bottom > .el-overlay-dialog {
+  justify-content: flex-end;
+}
+
+.ele-modal-left > .el-overlay-dialog {
+  justify-content: center;
+  align-items: flex-start;
+}
+
+.ele-modal-right > .el-overlay-dialog {
+  justify-content: center;
+  align-items: flex-end;
+}
+
+.ele-modal-left-top > .el-overlay-dialog {
+  align-items: flex-start;
+}
+
+.ele-modal-left-bottom > .el-overlay-dialog {
+  justify-content: flex-end;
+  align-items: flex-start;
+}
+
+.ele-modal-right-top > .el-overlay-dialog {
+  align-items: flex-end;
+}
+
+.ele-modal-right-bottom > .el-overlay-dialog {
+  justify-content: flex-end;
+  align-items: flex-end;
+}
+
 /* 支持拖拽 */
 .ele-modal-movable > .el-overlay-dialog > .el-dialog > .el-dialog__header {
   cursor: move;
@@ -135,10 +186,6 @@
   display: flex;
   flex-direction: column;
 
-  & > .el-dialog__header {
-    flex-shrink: 0;
-  }
-
   & > .el-dialog__body {
     flex: auto;
     overflow: auto;
@@ -186,7 +233,6 @@
 
   & > .el-overlay-dialog {
     pointer-events: none;
-    position: absolute;
     overflow: hidden;
 
     & > .el-dialog {

package/lib/ele-modal/types.d.ts

@@ -19,6 +19,8 @@ export type MoveOut = boolean | MoveOutValue[];
 export interface PositionObject {
   top?: string | number;
   left?: string | number;
+  bottom?: string | number;
+  right?: string | number;
 }
 
 /**
@@ -39,13 +41,3 @@ export type PositionValue =
  * 初始位置类型
  */
 export type Position = PositionValue | PositionObject;
-
-/**
- * 弹窗坐标
- */
-export interface Location {
-  top?: number;
-  left?: number;
-  topValue?: string;
-  leftValue?: string;
-}

package/lib/ele-modal/util.cjs

@@ -30,7 +30,7 @@ function initModalStyle(modalEl, resizable) {
   modalEl.style.bottom = "auto";
   modalEl.style.right = "auto";
   modalEl.style.margin = "0";
-  modalEl.style.position = "relative";
+  modalEl.style.position = "absolute";
   modalEl.style.display = resizable ? "inline-flex" : "inline-block";
   modalEl.style.verticalAlign = "top";
 }
@@ -247,78 +247,43 @@ function resetModalStyle(modalEl, width, top) {
   modalEl.style.minWidth = "";
 }
 function setModalPosition(modalEl, resizable, position, moveOut) {
-  if (!modalEl) {
+  if (!position || typeof position !== "object" || !modalEl) {
     return;
   }
   const wrapEl = modalEl.parentElement;
   if (!wrapEl) {
     return;
   }
-  const location = {};
   initModalStyle(modalEl, resizable);
+  const location = {};
   const canOutB = canMoveOut(moveOut, "bottom");
   const canOutR = canMoveOut(moveOut, "right");
   const t = wrapEl.clientHeight - modalEl.clientHeight - (canOutB ? 0 : fixTop);
   const maxTop = t < 0 ? 0 : t;
   const l = wrapEl.clientWidth - modalEl.clientWidth - (canOutR ? 0 : fixLeft);
   const maxLeft = l < 0 ? 0 : l;
-  if (position === "top") {
-    location.top = 0;
-    location.left = maxLeft / 2;
-  } else if (position === "bottom") {
-    location.top = maxTop;
-    location.left = maxLeft / 2;
-  } else if (position === "left") {
-    location.top = maxTop / 2;
-    location.left = 0;
-  } else if (position === "right") {
+  if (position.top != null) {
+    location.top = position.top;
+  } else if (position.bottom != null) {
+    location.bottom = position.bottom;
+  } else if (position.left != null || position.right != null) {
     location.top = maxTop / 2;
-    location.left = maxLeft;
-  } else if (position === "leftTop") {
-    location.top = 0;
-    location.left = 0;
-  } else if (position === "leftBottom") {
-    location.top = maxTop;
-    location.left = 0;
-  } else if (position === "rightTop") {
-    location.top = 0;
-    location.left = maxLeft;
-  } else if (position === "rightBottom") {
-    location.top = maxTop;
-    location.left = maxLeft;
-  } else if (position === "center") {
-    location.top = maxTop / 2;
-    location.left = maxLeft / 2;
-  } else if (typeof position === "object") {
-    if (position.top != null) {
-      if (typeof position.top === "number") {
-        location.top = position.top;
-      } else {
-        location.topValue = position.top;
-      }
-    } else if (position.left != null) {
-      location.top = maxTop / 2;
-    }
-    if (position.left != null) {
-      if (typeof position.left === "number") {
-        location.left = position.left;
-      } else {
-        location.leftValue = position.left;
-      }
-    } else if (position.top != null) {
-      location.left = maxLeft / 2;
-    }
   }
-  if (location.top != null) {
-    modalEl.style.top = `${Math.floor(location.top)}px`;
-  } else if (location.topValue != null) {
-    modalEl.style.top = location.topValue;
-  }
-  if (location.left != null) {
-    modalEl.style.left = `${Math.floor(location.left)}px`;
-  } else if (location.leftValue != null) {
-    modalEl.style.left = location.leftValue;
+  if (position.left != null) {
+    location.left = position.left;
+  } else if (position.right != null) {
+    location.right = position.right;
+  } else if (position.top != null || position.bottom != null) {
+    location.left = maxLeft / 2;
   }
+  Object.keys(location).forEach((key) => {
+    const value = location[key];
+    if (typeof value === "number") {
+      modalEl.style[key] = `${Math.floor(value)}px`;
+    } else if (value != null) {
+      modalEl.style[key] = value;
+    }
+  });
 }
 function setInitPosition(modalEl, resizable, position, moveOut, force) {
   const attr = "ele-position";