ele-admin-plus 1.0.2 → 1.1.0

package/es/ele-menus/types/index.d.ts

@@ -1,9 +1,9 @@
-import type { CSSProperties, Component } from 'vue';
-import type { MenuItemProps, SubMenuProps, MenuItemGroupProps, IconProps, BadgeProps } from 'element-plus';
+import type { Component } from 'vue';
+import type { StyleValue, ElIconProps, ElMenuItemProps, ElSubMenuProps, ElMenuItemGroupProps, ElBadgeProps } from '../../ele-app/types';
 /**
  * 菜单数据
  */
-export interface MenuItem extends Partial<MenuItemProps>, Omit<Partial<SubMenuProps>, 'index'>, Partial<MenuItemGroupProps> {
+export interface MenuItem extends Omit<ElMenuItemProps, 'style' | 'class'>, Omit<ElSubMenuProps, 'index' | 'style' | 'class'>, ElMenuItemGroupProps {
     /** 唯一标识 */
     key?: string | number;
     /** 标题 */
@@ -11,19 +11,21 @@ export interface MenuItem extends Partial<MenuItemProps>, Omit<Partial<SubMenuPr
     /** 图标 */
     icon?: string | Component;
     /** 图标属性 */
-    iconProps?: MenuIconProps;
+    iconProps?: ElIconProps;
     /** 图标样式 */
-    iconStyle?: CSSProperties;
+    iconStyle?: StyleValue;
     /** 菜单链接地址 */
     path?: string;
     /** 是否展示为分组菜单 */
     group?: boolean;
     /** 徽章 */
-    badge?: MenuBadgeProps;
+    badge?: ElBadgeProps;
     /** 子级数据 */
     children?: MenuItem[];
     /** 附加数据 */
     meta?: Record<keyof any, any>;
+    /** 是否是溢出的菜单 */
+    overflow?: boolean;
 }
 /**
  * 主题
@@ -38,20 +40,35 @@ export type PopupMenuTheme = 'auto' | MenuTheme;
  */
 export type PopupColorful = 'auto' | boolean;
 /**
- * 菜单图标属性
+ * 省略菜单的属性
  */
-export interface MenuIconProps extends Partial<IconProps> {
-    /** 样式 */
-    style?: CSSProperties;
-    /** 类名 */
-    class?: string;
+export interface EllipsisProps extends ElSubMenuProps {
+    /** 唯一标识 */
+    key?: string | number;
+    /** 图标 */
+    icon?: string | Component;
+    /** 图标属性 */
+    iconProps?: ElIconProps;
+    /** 图标样式 */
+    iconStyle?: StyleValue;
+}
+/**
+ * 生成菜单数据返回结果
+ */
+export interface MenuResult {
+    /** 菜单数据 */
+    items?: MenuItem[];
+    /** 省略的菜单数据 */
+    moreItems?: MenuItem[];
 }
 /**
- * 菜单徽章属性
+ * 菜单省略计算参数
  */
-export interface MenuBadgeProps extends Partial<BadgeProps> {
-    /** 样式 */
-    style?: CSSProperties;
-    /** 类名 */
-    class?: string;
+export interface MenuEllipsisOption {
+    /** 获取菜单节点 */
+    getMenuEl: () => HTMLElement | null;
+    /** 获取菜单省略项节点 */
+    getMoreEl: () => HTMLElement | null;
+    /** 返回计算结果 */
+    onEllipsis: (index: number) => void;
 }

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

@@ -0,0 +1,73 @@
+import type { VNode, Slot } from 'vue';
+import type { MenuItem, MenuTheme, PopupMenuTheme, PopupColorful, MenuResult, MenuEllipsisOption } from './types';
+export declare const linkClass = "ele-menu-link";
+export declare const overflowClass = "ele-menu-overflow";
+export declare const ellipsisClass = "ele-sub-menu-ellipsis";
+/**
+ * 生成菜单链接节点
+ * @param path 链接地址
+ */
+export declare function getLinkNode(path?: string): VNode | undefined;
+/**
+ * 生成菜单内容节点
+ * @param icons 图标节点
+ * @param titles 标题节点
+ * @param badge 徽章节点
+ * @param link 链接节点
+ */
+export declare function getNodes(icons?: VNode[], titles?: VNode[], badge?: VNode | null, link?: VNode | null): VNode[];
+/**
+ * 递归生成菜单节点
+ * @param items 菜单数据
+ * @param sIcon 图标插槽
+ * @param sTitle 白哦提插槽
+ * @param tipDisabled 是否禁用折叠的tooltip
+ * @param theme 主题
+ * @param popTheme 气泡菜单主题
+ * @param colorful 是否彩色图标
+ * @param popupColorful 气泡菜单是否彩色图标
+ * @param firstPopClass 第一级气泡菜单类名
+ * @param first 是否是第一级菜单
+ */
+export declare function renderItems(items?: MenuItem[], sIcon?: Slot, sTitle?: Slot, tipDisabled?: boolean, theme?: MenuTheme, popTheme?: PopupMenuTheme, colorful?: boolean, popupColorful?: PopupColorful, firstPopClass?: string, first?: boolean): VNode[];
+/**
+ * 生成菜单数据
+ * @param items 菜单数据
+ * @param index 省略位置
+ * @param horizontal 是否是水平菜单
+ */
+export declare function getMenuItems(menus?: MenuItem[], index?: number, horizontal?: boolean): MenuResult;
+/**
+ * 生成气泡菜单的类名
+ * @param customerClass 自定义的类名
+ * @param theme 主题
+ * @param popTheme 气泡菜单主题
+ * @param colorful 是否彩色图标
+ * @param popupColorful 气泡菜单是否彩色图标
+ * @param firstPopClass 第一级气泡菜单类名
+ * @param first 是否是第一级菜单
+ */
+export declare function getPopperClass(customerClass?: string, theme?: MenuTheme, popTheme?: PopupMenuTheme, colorful?: boolean, popupColorful?: PopupColorful, firstPopClass?: string, first?: boolean): string;
+/**
+ * 获取菜单节点宽度
+ * @param el 菜单节点
+ */
+export declare function getMenuWidth(el?: HTMLElement | null): number | undefined;
+/**
+ * 获取菜单项节点宽度
+ * @param el 菜单项节点
+ */
+export declare function getItemWidth(el?: HTMLElement | null): number | undefined;
+/**
+ * 获取菜单子级节点
+ * @param el 菜单节点
+ */
+export declare function getMenuChilds(el: HTMLElement): HTMLElement[];
+/**
+ * 菜单溢出省略
+ */
+export declare function useMenuEllipsis(option: MenuEllipsisOption): {
+    observe: () => void;
+    unobserve: () => void;
+    calcIndex: () => number | undefined;
+};

package/es/ele-menus/util.js

@@ -0,0 +1,303 @@
+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 overflowClass = "ele-menu-overflow";
+const ellipsisClass = "ele-sub-menu-ellipsis";
+function getLinkNode(path) {
+  if (!path) {
+    return;
+  }
+  if (isExternalLink(path)) {
+    return h("a", {
+      href: path,
+      target: "_blank",
+      class: linkClass,
+      onClick: (e) => e.stopPropagation()
+    });
+  }
+  return h(RouterLink, { to: path, class: linkClass });
+}
+function getNodes(icons, titles, badge, link) {
+  const nodes = [];
+  if (icons) {
+    icons.forEach((t) => {
+      nodes.push(t);
+    });
+  }
+  if (titles) {
+    titles.forEach((t) => {
+      nodes.push(t);
+    });
+  }
+  if (badge) {
+    nodes.push(badge);
+  }
+  if (link) {
+    nodes.push(link);
+  }
+  return nodes;
+}
+function renderItems(items, sIcon, sTitle, tipDisabled, theme, popTheme, colorful, popupColorful, firstPopClass, first) {
+  const nodes = [];
+  if (!items) {
+    return nodes;
+  }
+  items.forEach((item) => {
+    var _a;
+    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", item.title));
+    }
+    const bNode = item.badge != null ? h(ElBadge, item.badge) : null;
+    if (!((_a = item.children) == null ? void 0 : _a.length)) {
+      const linkNode = getLinkNode(item.path);
+      const key = item.key || item.index || item.path;
+      nodes.push(
+        h(
+          ElMenuItem,
+          {
+            key: key + "-" + tipDisabled,
+            index: item.index,
+            route: item.route,
+            disabled: item.disabled,
+            class: item.overflow ? overflowClass : void 0
+          },
+          {
+            default: () => {
+              if (!first || tipDisabled) {
+                return getNodes(iNodes, tNodes, bNode, linkNode);
+              }
+              return getNodes(iNodes, void 0, bNode, linkNode);
+            },
+            title: first && !tipDisabled ? () => tNodes : void 0
+          }
+        )
+      );
+      return;
+    }
+    if (item.group === true) {
+      nodes.push(
+        h(
+          ElMenuItemGroup,
+          { key: item.key || item.index },
+          {
+            default: () => {
+              return renderItems(
+                item.children,
+                sIcon,
+                sTitle,
+                tipDisabled,
+                theme,
+                popTheme,
+                colorful,
+                popupColorful,
+                firstPopClass,
+                first
+              );
+            },
+            title: () => getNodes(iNodes, tNodes, bNode)
+          }
+        )
+      );
+      return;
+    }
+    const popperClass = getPopperClass(
+      item.popperClass,
+      theme,
+      popTheme,
+      colorful,
+      popupColorful,
+      firstPopClass,
+      first
+    );
+    nodes.push(
+      h(
+        ElSubMenu,
+        {
+          key: item.key || item.index,
+          index: item.index,
+          popperClass,
+          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: item.overflow ? overflowClass : void 0
+        },
+        {
+          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
+            );
+          },
+          title: () => getNodes(iNodes, tNodes, bNode)
+        }
+      )
+    );
+  });
+  return nodes;
+}
+function getMenuItems(menus, index, horizontal) {
+  if (!horizontal || !menus || !menus.length) {
+    return { items: menus };
+  }
+  const data = menus.map((d) => {
+    return { ...d, group: false };
+  });
+  if (index == null || index < 0 || index >= data.length) {
+    return { items: data };
+  }
+  const items = index === 0 ? [] : data.slice(0, index);
+  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,
+      overflow: true,
+      key: `overflow-${d.key || d.index}`,
+      index: `overflow-${d.index}`,
+      children
+    });
+  });
+  return { items, moreItems };
+}
+function getPopperClass(customerClass, theme, popTheme, colorful, popupColorful, firstPopClass, first) {
+  const popperClass = ["ele-menu"];
+  if (popTheme === "dark" || popTheme === "auto" && theme === "dark") {
+    popperClass.push("ele-menu-dark");
+  }
+  if (popupColorful === true || popupColorful === "auto" && colorful) {
+    popperClass.push("ele-menu-colorful");
+  }
+  if (first && firstPopClass) {
+    popperClass.push(firstPopClass);
+  }
+  if (customerClass) {
+    popperClass.push(customerClass);
+  }
+  return popperClass.join(" ");
+}
+function getMenuWidth(el) {
+  if (!el) {
+    return;
+  }
+  const style = getCurrentStyle(el);
+  const pl = Number.parseInt(style.paddingLeft || "0", 10);
+  const pr = Number.parseInt(style.paddingRight || "0", 10);
+  return el.clientWidth - pl - pr;
+}
+function getItemWidth(el) {
+  if (!el) {
+    return;
+  }
+  const style = getCurrentStyle(el);
+  const ml = Number.parseInt(style.marginLeft || "0", 10);
+  const mr = Number.parseInt(style.marginRight || "0", 10);
+  return el.offsetWidth + ml + mr;
+}
+function getMenuChilds(el) {
+  const childs = Array.from(el.childNodes ?? []);
+  return childs.filter((t) => {
+    return t.nodeName === "LI" && !t.classList.contains(ellipsisClass);
+  });
+}
+function useMenuEllipsis(option) {
+  const { getMenuEl, getMoreEl, onEllipsis } = option;
+  const state = { activated: true };
+  const observer = new ResizeObserver(
+    debounce(() => {
+      const index = calcIndex();
+      if (index != null) {
+        onEllipsis(index);
+      }
+    }, 400)
+  );
+  const calcIndex = () => {
+    const menuEl = getMenuEl();
+    if (!menuEl || !state.activated) {
+      return;
+    }
+    const childs = getMenuChilds(menuEl);
+    const menuWidth = getMenuWidth(menuEl) || 0;
+    const moreWidth = getItemWidth(getMoreEl()) || 48;
+    let index = 0;
+    let calcWidth = 0;
+    for (let i = 0; i < childs.length; i++) {
+      const width = getItemWidth(childs[i]) || 0;
+      calcWidth += width;
+      if (calcWidth > menuWidth) {
+        if (calcWidth - width + moreWidth > menuWidth) {
+          index = i - 1;
+        }
+        break;
+      }
+      index = i + 1;
+    }
+    return index;
+  };
+  const observe = () => {
+    unobserve();
+    const menuEl = getMenuEl();
+    if (menuEl) {
+      observer.observe(menuEl);
+    }
+  };
+  const unobserve = () => {
+    const menuEl = getMenuEl();
+    if (menuEl) {
+      observer.unobserve(menuEl);
+    }
+  };
+  onBeforeMount(() => {
+    unobserve();
+  });
+  onActivated(() => {
+    state.activated = true;
+  });
+  onDeactivated(() => {
+    state.activated = false;
+  });
+  return { observe, unobserve, calcIndex };
+}
+export {
+  ellipsisClass,
+  getItemWidth,
+  getLinkNode,
+  getMenuChilds,
+  getMenuItems,
+  getMenuWidth,
+  getNodes,
+  getPopperClass,
+  linkClass,
+  overflowClass,
+  renderItems,
+  useMenuEllipsis
+};

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

@@ -1,6 +1,5 @@
-import type { DialogProps } from 'element-plus';
-import type { ElDialogInstance } from '../ele-app/types';
-declare const _sfc_main: import("vue").DefineComponent<{
+import type { ElDialogProps, ElDialogInstance } from '../ele-app/types';
+declare const _default: import("vue").DefineComponent<{
     appendToBody: {
         type: BooleanConstructor;
         default: boolean;
@@ -27,10 +26,12 @@ declare const _sfc_main: import("vue").DefineComponent<{
         type: NumberConstructor;
         default: number;
     };
-    headerStyle: import("vue").PropType<import("vue").CSSProperties>;
-    titleStyle: import("vue").PropType<import("vue").CSSProperties>;
-    bodyStyle: import("vue").PropType<import("vue").CSSProperties>;
-    footerStyle: import("vue").PropType<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>;
     responsive: {
         type: BooleanConstructor;
         default: null;
@@ -87,7 +88,7 @@ declare const _sfc_main: import("vue").DefineComponent<{
     container: import("vue").Ref<Element>;
     isFullscreen: import("vue").Ref<boolean>;
     destroyed: import("vue").Ref<boolean>;
-    dialogProps: import("vue").ComputedRef<Partial<DialogProps>>;
+    dialogProps: import("vue").ComputedRef<ElDialogProps>;
     updateModelValue: (modelValue: boolean) => void;
     toggleFullscreen: (fullscreen?: boolean) => void;
     onOpen: () => void;
@@ -132,10 +133,12 @@ declare const _sfc_main: import("vue").DefineComponent<{
         type: NumberConstructor;
         default: number;
     };
-    headerStyle: import("vue").PropType<import("vue").CSSProperties>;
-    titleStyle: import("vue").PropType<import("vue").CSSProperties>;
-    bodyStyle: import("vue").PropType<import("vue").CSSProperties>;
-    footerStyle: import("vue").PropType<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>;
     responsive: {
         type: BooleanConstructor;
         default: null;
@@ -188,26 +191,20 @@ declare const _sfc_main: import("vue").DefineComponent<{
     showClose: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
     title: import("element-plus/es/utils").EpPropFinalized<StringConstructor, unknown, unknown, "", boolean>;
 }>> & {
-    "onUpdate:fullscreen"?: ((_fullscreen: boolean) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
+    onClose?: (() => any) | undefined;
     onOpen?: (() => any) | undefined;
+    "onUpdate:fullscreen"?: ((_fullscreen: boolean) => any) | undefined;
     onOpened?: (() => any) | undefined;
-    onClose?: (() => any) | undefined;
     onClosed?: (() => any) | undefined;
-    "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
     onOpenAutoFocus?: (() => any) | undefined;
     onCloseAutoFocus?: (() => any) | undefined;
 }, {
+    form: boolean;
+    title: string;
     center: import("element-plus/es/utils").EpPropMergeType<BooleanConstructor, unknown, unknown>;
+    modelValue: import("element-plus/es/utils").EpPropMergeType<BooleanConstructor, unknown, unknown>;
     appendToBody: boolean;
-    draggable: boolean;
-    resetOnClose: boolean;
-    maxable: boolean;
-    multiple: boolean;
-    inner: boolean;
-    minWidth: number;
-    minHeight: number;
-    responsive: boolean;
-    form: boolean;
     destroyOnClose: import("element-plus/es/utils").EpPropMergeType<BooleanConstructor, unknown, unknown>;
     closeOnClickModal: import("element-plus/es/utils").EpPropMergeType<BooleanConstructor, unknown, unknown>;
     closeOnPressEscape: import("element-plus/es/utils").EpPropMergeType<BooleanConstructor, unknown, unknown>;
@@ -215,12 +212,18 @@ declare const _sfc_main: import("vue").DefineComponent<{
     modal: import("element-plus/es/utils").EpPropMergeType<BooleanConstructor, unknown, unknown>;
     openDelay: number;
     closeDelay: number;
-    modelValue: import("element-plus/es/utils").EpPropMergeType<BooleanConstructor, unknown, unknown>;
     trapFocus: import("element-plus/es/utils").EpPropMergeType<BooleanConstructor, unknown, unknown>;
     alignCenter: import("element-plus/es/utils").EpPropMergeType<BooleanConstructor, unknown, unknown>;
     customClass: string;
+    draggable: boolean;
     fullscreen: import("element-plus/es/utils").EpPropMergeType<BooleanConstructor, unknown, unknown>;
     showClose: import("element-plus/es/utils").EpPropMergeType<BooleanConstructor, unknown, unknown>;
-    title: string;
+    minWidth: number;
+    responsive: boolean;
+    resetOnClose: boolean;
+    maxable: boolean;
+    multiple: boolean;
+    inner: boolean;
+    minHeight: number;
 }, {}>;
-export default _sfc_main;
+export default _default;

package/es/ele-modal/index.js

@@ -1,4 +1,4 @@
-import { defineComponent, ref, computed, unref, watch, onActivated, onDeactivated, nextTick, resolveComponent, openBlock, createBlock, Teleport, createVNode, mergeProps, createSlots, withCtx, createElementVNode, normalizeStyle, normalizeClass, renderSlot, createTextVNode, toDisplayString, createElementBlock, createCommentVNode } from "vue";
+import { defineComponent, ref, computed, unref, watch, onActivated, onDeactivated, nextTick, resolveComponent, openBlock, createBlock, Teleport, createVNode, mergeProps, createSlots, withCtx, createElementVNode, normalizeStyle, renderSlot, createTextVNode, toDisplayString, createElementBlock, createCommentVNode } from "vue";
 import { ElDialog, ElIcon } from "element-plus";
 import { Close } from "@element-plus/icons-vue";
 import { CompressOutlined, ExpandOutlined } from "../icons";
@@ -214,8 +214,7 @@ const _export_sfc = (sfc, props) => {
   }
   return target;
 };
-const _hoisted_1 = ["id"];
-const _hoisted_2 = ["onClick"];
+const _hoisted_1 = ["onClick"];
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_CompressOutlined = resolveComponent("CompressOutlined");
   const _component_ExpandOutlined = resolveComponent("ExpandOutlined");
@@ -242,8 +241,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
           style: normalizeStyle(_ctx.headerStyle)
         }, [
           createElementVNode("div", {
-            id: titleId,
-            class: normalizeClass(titleClass),
+            class: "ele-modal-title",
             style: normalizeStyle(_ctx.titleStyle)
           }, [
             renderSlot(_ctx.$slots, "header", {
@@ -253,35 +251,37 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
             }, () => [
               createTextVNode(toDisplayString(_ctx.title), 1)
             ])
-          ], 14, _hoisted_1),
+          ], 4),
           _ctx.maxable ? (openBlock(), createElementBlock("div", {
             key: 0,
             class: "ele-modal-tool",
+            style: normalizeStyle(_ctx.fullscreenBtnStyle),
             onClick: _cache[0] || (_cache[0] = ($event) => _ctx.toggleFullscreen())
           }, [
             renderSlot(_ctx.$slots, "maxIcon", { fullscreen: _ctx.isFullscreen }, () => [
-              createVNode(_component_ElIcon, { style: { "transform": "scale(0.88)" } }, {
+              createVNode(_component_ElIcon, { style: { "transform": "scale(0.72)" } }, {
                 default: withCtx(() => [
                   _ctx.isFullscreen ? (openBlock(), createBlock(_component_CompressOutlined, { key: 0 })) : (openBlock(), createBlock(_component_ExpandOutlined, { key: 1 }))
                 ]),
                 _: 1
               })
             ])
-          ])) : createCommentVNode("", true),
+          ], 4)) : createCommentVNode("", true),
           _ctx.showClose ? (openBlock(), createElementBlock("div", {
             key: 1,
             class: "ele-modal-tool",
+            style: normalizeStyle(_ctx.closeBtnStyle),
             onClick: close
           }, [
             renderSlot(_ctx.$slots, "closeIcon", {}, () => [
-              createVNode(_component_ElIcon, { style: { "transform": "scale(1.24)" } }, {
+              createVNode(_component_ElIcon, null, {
                 default: withCtx(() => [
                   createVNode(_component_Close)
                 ]),
                 _: 1
               })
             ])
-          ], 8, _hoisted_2)) : createCommentVNode("", true)
+          ], 12, _hoisted_1)) : createCommentVNode("", true)
         ], 4)
       ]),
       default: withCtx(() => [

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

@@ -1,5 +1,6 @@
-import type { PropType, ExtractPropTypes, CSSProperties } from 'vue';
+import type { PropType, ExtractPropTypes } from 'vue';
 import { dialogProps } from 'element-plus';
+import type { StyleValue } from '../ele-app/types';
 import type { Resizable, MoveOut, Position } from './types';
 /**
  * 属性
@@ -31,10 +32,12 @@ export declare const modalProps: {
         type: NumberConstructor;
         default: number;
     };
-    headerStyle: PropType<CSSProperties>;
-    titleStyle: PropType<CSSProperties>;
-    bodyStyle: PropType<CSSProperties>;
-    footerStyle: PropType<CSSProperties>;
+    headerStyle: PropType<StyleValue>;
+    titleStyle: PropType<StyleValue>;
+    bodyStyle: PropType<StyleValue>;
+    footerStyle: PropType<StyleValue>;
+    closeBtnStyle: PropType<StyleValue>;
+    fullscreenBtnStyle: PropType<StyleValue>;
     responsive: {
         type: BooleanConstructor;
         default: null;
@@ -54,12 +57,12 @@ export declare const modalProps: {
     openDelay: import("element-plus/es/utils").EpPropFinalized<NumberConstructor, unknown, unknown, 0, boolean>;
     closeDelay: import("element-plus/es/utils").EpPropFinalized<NumberConstructor, unknown, unknown, 0, boolean>;
     top: {
-        /**
-         * 弹窗组件属性名
-         */
         readonly type: PropType<string>;
         readonly required: false;
         readonly validator: ((val: unknown) => boolean) | undefined;
+        /**
+         * 弹窗组件属性名
+         */
         __epPropKey: true;
     };
     modelValue: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, false, boolean>;

package/es/ele-modal/props.js

@@ -44,6 +44,10 @@ const modalProps = {
   bodyStyle: Object,
   // 底栏样式
   footerStyle: Object,
+  // 自定义关闭按钮样式
+  closeBtnStyle: Object,
+  // 自定义全屏按钮样式
+  fullscreenBtnStyle: Object,
   // 是否开启响应式
   responsive: {
     type: Boolean,