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

package/es/ele-pro-layout/index.js

@@ -28,6 +28,13 @@ const _sfc_main = defineComponent({
     const { authenticated } = useLicense();
     const { currentRoute, push } = useRouter();
     const { disableTransition } = useDisableTransition();
+    const state = {
+      headerData: [],
+      sideboxData: [],
+      sidebarData: [],
+      menuTimer: null,
+      isHover: false
+    };
     const contentRef = ref(null);
     const levelData = shallowRef([]);
     const tabData = shallowRef([]);
@@ -215,6 +222,9 @@ const _sfc_main = defineComponent({
         sideboxActive.value = active1;
       }
       sidebarActive.value = active;
+      state.headerActive = headerActive.value;
+      state.sideboxActive = sideboxActive.value;
+      state.sidebarActive = sidebarActive.value;
     };
     const splitMenuData = () => {
       var _a;
@@ -291,6 +301,9 @@ const _sfc_main = defineComponent({
           sidebarData.value = menuData.value;
         }
       }
+      state.headerData = headerData.value;
+      state.sideboxData = sideboxData.value;
+      state.sidebarData = sidebarData.value;
     };
     const updateMenuData = () => {
       let temp;
@@ -336,90 +349,276 @@ const _sfc_main = defineComponent({
         });
       }
     };
-    const onNavItemClick = (item) => {
-      if (!item.index || props.navTrigger != "click") {
-        return;
-      }
-      if (props.beforeClick && props.beforeClick(item) === false) {
+    const onNavItemClick = (item, e) => {
+      const path = item.index;
+      const trigger = props.navTrigger;
+      if (!path || trigger !== "click" && trigger !== "hover") {
         return;
       }
       if (isExternalLink(item.index)) {
-        window.open(item.index);
+        e.stopPropagation();
+        if (props.beforeClick && props.beforeClick(item, e) === false) {
+          return;
+        }
+        window.open(path);
         return;
       }
-      headerActive.value = item.index;
-      const temp = getActiveChilds(
-        headerData.value,
-        headerActive.value,
-        "tempChildren"
-      );
+      const temp = getActiveChilds(headerData.value, path, "tempChildren");
       const isChild = !temp.some((d) => {
         var _a;
         return !((_a = d.meta) == null ? void 0 : _a.hide);
       });
-      if (isChild && item.index !== unref(currentRoute).fullPath) {
-        push(item.index);
+      if (trigger !== "click" && !isChild) {
+        e.stopPropagation();
         return;
       }
-      if (mixSidebar.value) {
+      if (props.beforeClick && props.beforeClick(item, e) === false) {
+        return;
+      }
+      if (isChild) {
+        if (path !== unref(currentRoute).fullPath) {
+          push(path);
+        }
+        return;
+      }
+      if (headerActive.value !== path) {
+        headerActive.value = path;
+        if (!mixSidebar.value) {
+          sidebarData.value = temp;
+          return;
+        }
         sideboxData.value = temp.map((d) => {
           return {
-            name: d.name,
-            path: d.path,
-            component: d.component,
-            redirect: d.redirect,
-            meta: d.meta,
+            ...d,
             children: props.collapse ? d.children : void 0,
             tempChildren: d.children
           };
         });
+      }
+    };
+    const onNavItemMouseenter = (item, e) => {
+      if (!mixLayout.value) {
+        return;
+      }
+      if (state.menuTimer != null) {
+        clearTimeout(state.menuTimer);
+        state.menuTimer = null;
+      }
+      const path = item.index;
+      const trigger = props.navTrigger;
+      if (trigger !== "hover" || !path || isExternalLink(path)) {
         return;
       }
-      sidebarData.value = temp;
+      const temp = getActiveChilds(headerData.value, path, "tempChildren");
+      if (!temp.some((d) => {
+        var _a;
+        return !((_a = d.meta) == null ? void 0 : _a.hide);
+      })) {
+        return;
+      }
+      if (props.beforeClick && props.beforeClick(item, e) === false) {
+        return;
+      }
+      if (headerActive.value !== path) {
+        state.isHover = true;
+        headerActive.value = path;
+        if (!mixSidebar.value) {
+          sidebarData.value = temp;
+          return;
+        }
+        sideboxData.value = temp.map((d) => {
+          return {
+            ...d,
+            children: props.collapse ? d.children : void 0,
+            tempChildren: d.children
+          };
+        });
+      }
+    };
+    const onNavMouseEnter = () => {
+      if (state.menuTimer != null) {
+        clearTimeout(state.menuTimer);
+        state.menuTimer = null;
+      }
+    };
+    const onNavMouseLeave = () => {
+      if (!state.isHover) {
+        return;
+      }
+      if (state.menuTimer != null) {
+        clearTimeout(state.menuTimer);
+        state.menuTimer = null;
+      }
+      state.menuTimer = setTimeout(() => {
+        state.isHover = false;
+        if (headerActive.value !== state.headerActive) {
+          headerActive.value = state.headerActive;
+          if (mixSidebar.value) {
+            sideboxData.value = state.sideboxData;
+          } else {
+            sidebarData.value = state.sidebarData;
+          }
+        }
+        if (mixSidebar.value && sideboxActive.value !== state.sideboxActive) {
+          sideboxActive.value = state.sideboxActive;
+          sidebarData.value = state.sidebarData;
+        }
+      }, props.menuHoverTimeout);
     };
-    const onBoxItemClick = (item) => {
-      if (!item.index || props.boxTrigger != "click") {
+    const onBoxItemClick = (item, e) => {
+      const path = item.index;
+      const trigger = props.boxTrigger;
+      if (!path || trigger !== "click" && trigger !== "hover") {
         return;
       }
-      if (props.beforeClick && props.beforeClick(item) === false) {
+      if (isExternalLink(path)) {
+        e.stopPropagation();
+        if (props.beforeClick && props.beforeClick(item, e) === false) {
+          return;
+        }
+        window.open(path);
         return;
       }
-      if (isExternalLink(item.index)) {
-        window.open(item.index);
+      if (props.collapse) {
+        if (props.beforeClick && props.beforeClick(item, e) === false) {
+          return;
+        }
+        if (path !== unref(currentRoute).fullPath) {
+          push(path);
+        }
         return;
       }
-      sideboxActive.value = item.index;
-      const temp = getActiveChilds(
-        sideboxData.value,
-        sideboxActive.value,
-        "tempChildren"
-      );
+      const temp = getActiveChilds(sideboxData.value, path, "tempChildren");
       const isChild = !temp.some((d) => {
         var _a;
         return !((_a = d.meta) == null ? void 0 : _a.hide);
       });
-      if (isChild && item.index !== unref(currentRoute).fullPath) {
-        push(item.index);
+      if (trigger !== "click" && !isChild) {
+        e.stopPropagation();
+        return;
+      }
+      if (props.beforeClick && props.beforeClick(item, e) === false) {
+        return;
+      }
+      if (isChild) {
+        if (path !== unref(currentRoute).fullPath) {
+          push(path);
+        }
         return;
       }
-      sidebarData.value = temp;
+      if (sideboxActive.value !== path) {
+        sideboxActive.value = path;
+        sidebarData.value = temp;
+      }
     };
-    const onMenuItemClick = (item) => {
-      if (!item.index || props.itemTrigger != "click") {
+    const onBoxItemMouseenter = (item, e) => {
+      if (props.collapse) {
         return;
       }
-      if (props.beforeClick && props.beforeClick(item) === false) {
+      if (state.menuTimer != null) {
+        clearTimeout(state.menuTimer);
+        state.menuTimer = null;
+      }
+      const path = item.index;
+      const trigger = props.boxTrigger;
+      if (trigger !== "hover" || !path || isExternalLink(path)) {
         return;
       }
-      if (isExternalLink(item.index)) {
-        window.open(item.index);
+      const temp = getActiveChilds(sideboxData.value, path, "tempChildren");
+      if (!temp.some((d) => {
+        var _a;
+        return !((_a = d.meta) == null ? void 0 : _a.hide);
+      })) {
+        return;
+      }
+      if (props.beforeClick && props.beforeClick(item, e) === false) {
         return;
       }
-      sidebarActive.value = item.index;
-      if (item.index !== unref(currentRoute).fullPath) {
-        push(item.index);
+      if (sideboxActive.value !== path) {
+        state.isHover = true;
+        sideboxActive.value = path;
+        sidebarData.value = temp;
       }
     };
+    const onBoxMouseEnter = () => {
+      if (state.menuTimer != null) {
+        clearTimeout(state.menuTimer);
+        state.menuTimer = null;
+      }
+    };
+    const onBoxMouseLeave = () => {
+      if (!state.isHover) {
+        return;
+      }
+      if (state.menuTimer != null) {
+        clearTimeout(state.menuTimer);
+        state.menuTimer = null;
+      }
+      state.menuTimer = setTimeout(() => {
+        state.isHover = false;
+        if (headerActive.value !== state.headerActive) {
+          headerActive.value = state.headerActive;
+          if (mixSidebar.value) {
+            sideboxData.value = state.sideboxData;
+          } else {
+            sidebarData.value = state.sidebarData;
+          }
+        }
+        if (mixSidebar.value && sideboxActive.value !== state.sideboxActive) {
+          sideboxActive.value = state.sideboxActive;
+          sidebarData.value = state.sidebarData;
+        }
+      }, props.menuHoverTimeout);
+    };
+    const onMenuItemClick = (item, e) => {
+      const path = item.index;
+      const trigger = props.itemTrigger;
+      if (!path || trigger !== "click" && trigger !== "hover") {
+        return;
+      }
+      if (props.beforeClick && props.beforeClick(item, e) === false) {
+        return;
+      }
+      if (isExternalLink(path)) {
+        e.stopPropagation();
+        window.open(path);
+        return;
+      }
+      sidebarActive.value = path;
+      if (path !== unref(currentRoute).fullPath) {
+        push(path);
+      }
+    };
+    const onSideMouseEnter = () => {
+      if (state.menuTimer != null) {
+        clearTimeout(state.menuTimer);
+        state.menuTimer = null;
+      }
+    };
+    const onSideMouseLeave = () => {
+      if (!state.isHover) {
+        return;
+      }
+      if (state.menuTimer != null) {
+        clearTimeout(state.menuTimer);
+        state.menuTimer = null;
+      }
+      state.menuTimer = setTimeout(() => {
+        state.isHover = false;
+        if (headerActive.value !== state.headerActive) {
+          headerActive.value = state.headerActive;
+          if (mixSidebar.value) {
+            sideboxData.value = state.sideboxData;
+          } else {
+            sidebarData.value = state.sidebarData;
+          }
+        }
+        if (mixSidebar.value && sideboxActive.value !== state.sideboxActive) {
+          sideboxActive.value = state.sideboxActive;
+          sidebarData.value = state.sidebarData;
+        }
+      }, props.menuHoverTimeout);
+    };
     watch(
       () => props.menus,
       () => {
@@ -462,11 +661,13 @@ const _sfc_main = defineComponent({
           sideboxData.value = sideboxData.value.map((d) => {
             return { ...d, children: d.tempChildren };
           });
+          state.sideboxData = sideboxData.value;
           return;
         }
         sideboxData.value = sideboxData.value.map((d) => {
           return { ...d, children: void 0 };
         });
+        state.sideboxData = sideboxData.value;
       }
     );
     watch(
@@ -527,7 +728,7 @@ const _sfc_main = defineComponent({
       props
     );
     const layoutProvide = computed(() => {
-      const state = {
+      const state2 = {
         mobile: mobile.value,
         collapse: props.collapse,
         compact: props.compact,
@@ -540,7 +741,7 @@ const _sfc_main = defineComponent({
         keepAlive: props.tabBar && props.keepAlive,
         responsive: props.responsive
       };
-      return state;
+      return state2;
     });
     provide(LAYOUT_KEY, layoutProvide);
     return {
@@ -576,8 +777,16 @@ const _sfc_main = defineComponent({
       onHeadMenuOpen,
       onHeadMenuClose,
       onNavItemClick,
+      onNavItemMouseenter,
+      onNavMouseEnter,
+      onNavMouseLeave,
       onBoxItemClick,
-      onMenuItemClick
+      onBoxItemMouseenter,
+      onBoxMouseEnter,
+      onBoxMouseLeave,
+      onMenuItemClick,
+      onSideMouseEnter,
+      onSideMouseLeave
     };
   }
 });
@@ -624,7 +833,10 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
       onLogoClick: _ctx.onLogoClick,
       onOpen: _ctx.onHeadMenuOpen,
       onClsoe: _ctx.onHeadMenuClose,
-      onItemClick: _ctx.onNavItemClick
+      onItemClick: _ctx.onNavItemClick,
+      onItemMouseenter: _ctx.onNavItemMouseenter,
+      onMouseEnter: _ctx.onNavMouseEnter,
+      onMouseLeave: _ctx.onNavMouseLeave
     }, createSlots({ _: 2 }, [
       renderList(Object.keys(_ctx.$slots).filter(
         (k) => ![
@@ -647,7 +859,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
           ])
         };
       })
-    ]), 1032, ["menus", "headerStyle", "active", "ellipsis", "ellipsisProps", "menuTrigger", "itemTrigger", "collapse", "sidebar", "titleSlot", "iconSlot", "levels", "breadcrumb", "breadcrumbSeparator", "homePath", "isHome", "onLogoClick", "onOpen", "onClsoe", "onItemClick"]),
+    ]), 1032, ["menus", "headerStyle", "active", "ellipsis", "ellipsisProps", "menuTrigger", "itemTrigger", "collapse", "sidebar", "titleSlot", "iconSlot", "levels", "breadcrumb", "breadcrumbSeparator", "homePath", "isHome", "onLogoClick", "onOpen", "onClsoe", "onItemClick", "onItemMouseenter", "onMouseEnter", "onMouseLeave"]),
     createVNode(_component_EleWatermark, {
       class: "ele-admin-main",
       height: 68,
@@ -668,7 +880,10 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
           itemTrigger: _ctx.boxTrigger,
           titleSlot: _ctx.sideboxTitleSlot,
           iconSlot: _ctx.sideboxIconSlot,
-          onItemClick: _ctx.onBoxItemClick
+          onItemClick: _ctx.onBoxItemClick,
+          onItemMouseenter: _ctx.onBoxItemMouseenter,
+          onMouseEnter: _ctx.onBoxMouseEnter,
+          onMouseLeave: _ctx.onBoxMouseLeave
         }, createSlots({ _: 2 }, [
           renderList(Object.keys(_ctx.$slots).filter(
             (k) => ![
@@ -694,7 +909,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
               ])
             };
           })
-        ]), 1032, ["menus", "sidebarStyle", "colorfulIcon", "active", "compact", "collapse", "popperEffect", "itemTrigger", "titleSlot", "iconSlot", "onItemClick"])) : createCommentVNode("", true),
+        ]), 1032, ["menus", "sidebarStyle", "colorfulIcon", "active", "compact", "collapse", "popperEffect", "itemTrigger", "titleSlot", "iconSlot", "onItemClick", "onItemMouseenter", "onMouseEnter", "onMouseLeave"])) : createCommentVNode("", true),
         _ctx.sidebar ? (openBlock(), createBlock(_component_ProSidebar, {
           key: 1,
           menus: _ctx.sidebarData,
@@ -710,7 +925,9 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
           iconSlot: _ctx.sidebarIconSlot,
           onOpen: _ctx.onSideMenuOpen,
           onClsoe: _ctx.onSideMenuClose,
-          onItemClick: _ctx.onMenuItemClick
+          onItemClick: _ctx.onMenuItemClick,
+          onMouseEnter: _ctx.onSideMouseEnter,
+          onMouseLeave: _ctx.onSideMouseLeave
         }, createSlots({ _: 2 }, [
           renderList(Object.keys(_ctx.$slots).filter(
             (k) => ![
@@ -736,7 +953,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
               ])
             };
           })
-        ]), 1032, ["menus", "sidebarStyle", "colorfulIcon", "active", "collapse", "uniqueOpened", "defaultOpeneds", "popperEffect", "itemTrigger", "titleSlot", "iconSlot", "onOpen", "onClsoe", "onItemClick"])) : createCommentVNode("", true),
+        ]), 1032, ["menus", "sidebarStyle", "colorfulIcon", "active", "collapse", "uniqueOpened", "defaultOpeneds", "popperEffect", "itemTrigger", "titleSlot", "iconSlot", "onOpen", "onClsoe", "onItemClick", "onMouseEnter", "onMouseLeave"])) : createCommentVNode("", true),
         createElementVNode("div", _hoisted_1, [
           _ctx.tabBar ? (openBlock(), createBlock(_component_ProTabs, {
             key: 0,

package/es/ele-pro-layout/props.d.ts

@@ -201,6 +201,11 @@ export declare const proLayoutProps: {
         type: BooleanConstructor;
         default: boolean;
     };
+    /** 菜单切换超时 */
+    menuHoverTimeout: {
+        type: NumberConstructor;
+        default: number;
+    };
 };
 export type ProLayoutProps = ExtractPropTypes<typeof proLayoutProps>;
 /**

package/es/ele-pro-layout/props.js

@@ -192,6 +192,11 @@ const proLayoutProps = {
   responsive: {
     type: Boolean,
     default: true
+  },
+  /** 菜单切换超时 */
+  menuHoverTimeout: {
+    type: Number,
+    default: 600
   }
 };
 const proLayoutEmits = {

package/es/ele-pro-layout/types.d.ts

@@ -230,12 +230,12 @@ export type BreadcrumbSeparator = ElBreadcrumbProps['separatorIcon'];
 /**
  * 混合模式菜单切换模式
  */
-export type MenuItemTrigger = 'route' | 'click';
+export type MenuItemTrigger = 'route' | 'click' | 'hover';
 
 /**
- * 菜单点击前钩子
+ * 子菜单项点击前钩子
  */
-export type BeforeClick = (item: EleMenuItemProps) => boolean;
+export type BeforeClick = (item: EleMenuItemProps, e: MouseEvent) => boolean;
 
 /**
  * 内链数据
@@ -245,9 +245,35 @@ export interface IframeItem {
   id: string;
   /** 地址 */
   src: string;
+  /** 是否是刷新状态 */
+  refresh?: boolean;
 }
 
 /**
  * 标签页标题组件实例
  */
 export type TabTitleInstance = InstanceType<typeof TabTitle> | null;
+
+/**
+ * 顶栏状态数据
+ */
+export interface HeaderState {
+  /** 是否是鼠标进入状态 */
+  hover: boolean;
+  /** 鼠标离开状态定时器 */
+  timer?: number | null;
+}
+
+/**
+ * 状态数据
+ */
+export interface LayoutState {
+  headerActive?: string;
+  sideboxActive?: string;
+  sidebarActive?: string;
+  headerData: MenuItem[];
+  sideboxData: MenuItem[];
+  sidebarData: MenuItem[];
+  menuTimer?: number | null;
+  isHover: boolean;
+}

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

@@ -24,8 +24,8 @@ declare const _default: import("vue").DefineComponent<{
     };
     size: import("vue").PropType<import("./types").SegmentedSize>;
 }>> & {
-    "onUpdate:modelValue"?: ((_value: string | number) => any) | undefined;
     onChange?: ((_active: string | number) => any) | undefined;
+    "onUpdate:modelValue"?: ((_value: string | number) => any) | undefined;
 }, {
     disabled: boolean;
     block: boolean;

package/es/ele-table-select/index.d.ts

@@ -158,13 +158,13 @@ declare const _default: import("vue").DefineComponent<{
 }>> & {
     onFocus?: ((_e: FocusEvent) => any) | undefined;
     onBlur?: ((_e: FocusEvent) => any) | undefined;
-    "onUpdate:modelValue"?: ((_value: SelectValue) => any) | undefined;
     onChange?: ((_value: SelectValue) => any) | undefined;
+    "onUpdate:modelValue"?: ((_value: SelectValue) => any) | undefined;
+    onVisibleChange?: ((_visible: boolean) => any) | undefined;
+    onRemoveTag?: ((_value: SingleValue) => any) | undefined;
     onClear?: (() => any) | undefined;
     onSelect?: ((_item: DataItem | DataItem[]) => any) | undefined;
     onFilterChange?: ((_value: string) => any) | undefined;
-    onRemoveTag?: ((_value: SingleValue) => any) | undefined;
-    onVisibleChange?: ((_visible: boolean) => any) | undefined;
 }, {
     placement: import("element-plus/es/utils/index").EpPropMergeType<StringConstructor, import("element-plus").Placement, unknown> | undefined;
     disabled: boolean;
@@ -173,11 +173,11 @@ declare const _default: import("vue").DefineComponent<{
     clearable: boolean;
     persistent: boolean;
     transition: string;
+    filterable: boolean;
+    tagType: import("element-plus/es/utils/index").EpPropMergeType<StringConstructor, "success" | "warning" | "info" | "primary" | "danger", unknown> | undefined;
     multiple: boolean;
     responsive: boolean;
-    tagType: import("element-plus/es/utils/index").EpPropMergeType<StringConstructor, "success" | "warning" | "info" | "primary" | "danger", unknown> | undefined;
     automaticDropdown: boolean;
-    filterable: boolean;
     valueKey: string;
     labelKey: string;
 }, {}>;

package/es/ele-tree-select/index.d.ts

@@ -132,11 +132,11 @@ declare const _default: import("vue").DefineComponent<{
 }>> & {
     onFocus?: ((_e: FocusEvent) => any) | undefined;
     onBlur?: ((_e: FocusEvent) => any) | undefined;
-    "onUpdate:modelValue"?: ((_value: SelectValue) => any) | undefined;
     onChange?: ((_value: SelectValue) => any) | undefined;
-    onClear?: (() => any) | undefined;
-    onRemoveTag?: ((_value: SingleValue) => any) | undefined;
+    "onUpdate:modelValue"?: ((_value: SelectValue) => any) | undefined;
     onVisibleChange?: ((_visible: boolean) => any) | undefined;
+    onRemoveTag?: ((_value: SingleValue) => any) | undefined;
+    onClear?: (() => any) | undefined;
 }, {
     placement: import("element-plus/es/utils/index").EpPropMergeType<StringConstructor, import("element-plus").Placement, unknown> | undefined;
     disabled: boolean;
@@ -145,10 +145,10 @@ declare const _default: import("vue").DefineComponent<{
     clearable: boolean;
     persistent: boolean;
     transition: string;
-    multiple: boolean;
+    filterable: boolean;
     tagType: import("element-plus/es/utils/index").EpPropMergeType<StringConstructor, "success" | "warning" | "info" | "primary" | "danger", unknown> | undefined;
+    multiple: boolean;
     automaticDropdown: boolean;
-    filterable: boolean;
     checkedValueStrategy: boolean;
 }, {}>;
 export default _default;

package/es/ele-upload-list/components/list-item.d.ts

@@ -1,5 +1,5 @@
 import type { PropType } from 'vue';
-import type { ElProgressProps } from '../../ele-app/el';
+import type { ElProgressProps, ElImageProps } from '../../ele-app/el';
 import type { UploadItem, UploadLocale } from '../types';
 declare const _default: import("vue").DefineComponent<{
     /** 数据 */
@@ -11,6 +11,8 @@ declare const _default: import("vue").DefineComponent<{
     readonly: BooleanConstructor;
     /** 是否禁用 */
     disabled: BooleanConstructor;
+    /** 自定义条目样式 */
+    imageProps: PropType<ElImageProps>;
     /** 进度条属性 */
     progressProps: PropType<ElProgressProps>;
     /** 国际化 */
@@ -36,6 +38,8 @@ declare const _default: import("vue").DefineComponent<{
     readonly: BooleanConstructor;
     /** 是否禁用 */
     disabled: BooleanConstructor;
+    /** 自定义条目样式 */
+    imageProps: PropType<ElImageProps>;
     /** 进度条属性 */
     progressProps: PropType<ElProgressProps>;
     /** 国际化 */

package/es/ele-upload-list/components/list-item.js

@@ -1,4 +1,4 @@
-import { defineComponent, resolveComponent, openBlock, createElementBlock, renderSlot, createBlock, createVNode, withCtx, withModifiers, createCommentVNode, createElementVNode, toDisplayString, mergeProps } from "vue";
+import { defineComponent, resolveComponent, openBlock, createElementBlock, renderSlot, createBlock, mergeProps, createVNode, withCtx, withModifiers, createCommentVNode, createElementVNode, toDisplayString } from "vue";
 import { ElImage, ElProgress, ElIcon } from "element-plus";
 import { CloseOutlined, SyncOutlined, FileOutlined } from "../../icons";
 import EleTooltip from "../../ele-tooltip/index";
@@ -23,6 +23,8 @@ const _sfc_main = defineComponent({
     readonly: Boolean,
     /** 是否禁用 */
     disabled: Boolean,
+    /** 自定义条目样式 */
+    imageProps: Object,
     /** 进度条属性 */
     progressProps: Object,
     /** 国际化 */
@@ -84,11 +86,12 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
     onClick: _cache[2] || (_cache[2] = (...args) => _ctx.onItemClick && _ctx.onItemClick(...args))
   }, [
     renderSlot(_ctx.$slots, "thumbnail", { item: _ctx.item }, () => [
-      _ctx.item.url ? (openBlock(), createBlock(_component_ElImage, {
+      _ctx.item.url ? (openBlock(), createBlock(_component_ElImage, mergeProps({
         key: 0,
-        fit: "cover",
+        fit: "cover"
+      }, _ctx.imageProps || {}, {
         src: _ctx.item.url
-      }, null, 8, ["src"])) : (openBlock(), createElementBlock("div", _hoisted_2, [
+      }), null, 16, ["src"])) : (openBlock(), createElementBlock("div", _hoisted_2, [
         createVNode(_component_ElIcon, null, {
           default: withCtx(() => [
             createVNode(_component_FileOutlined)