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

package/lib/ele-pro-layout/components/pro-sidebox.cjs

@@ -22,17 +22,21 @@ const _sfc_main = vue.defineComponent({
     compact: Boolean,
     /** 二级侧栏是否折叠 */
     collapse: Boolean,
-    /** tooltip 主题 */
+    /** 菜单折叠提示气泡主题 */
     popperEffect: String,
-    /** 菜单项触发模式 */
+    /** 子菜单项触发模式 */
     itemTrigger: String,
-    /** 标题插槽名称 */
+    /** 菜单标题插槽名称 */
     titleSlot: String,
-    /** 图标插槽名称 */
+    /** 菜单图标插槽名称 */
     iconSlot: String
   },
   emits: {
-    itemClick: (_item) => true
+    itemClick: (_item, _e) => true,
+    itemMouseenter: (_item, _e) => true,
+    itemMouseleave: (_item, _e) => true,
+    mouseEnter: (_e) => true,
+    mouseLeave: (_e) => true
   },
   setup(props, { emit }) {
     const { scrollIntoView } = util.useMenuScroll(() => {
@@ -41,17 +45,40 @@ const _sfc_main = vue.defineComponent({
     });
     const menusRef = vue.ref(null);
     const menuItems = vue.computed(() => {
-      return util.getMenuItems(props.menus, props.itemTrigger != "click");
+      return util.getMenuItems(
+        props.menus,
+        props.itemTrigger !== "click" && props.itemTrigger !== "hover"
+      );
     });
-    const onItemClick = (item) => {
-      emit("itemClick", item);
+    const onItemClick = (item, e) => {
+      emit("itemClick", item, e);
+    };
+    const onItemMouseenter = (item, e) => {
+      emit("itemMouseenter", item, e);
+    };
+    const onItemMouseleave = (item, e) => {
+      emit("itemMouseleave", item, e);
+    };
+    const onMouseenter = (e) => {
+      emit("mouseEnter", e);
+    };
+    const onMouseleave = (e) => {
+      emit("mouseLeave", e);
     };
     vue.watch([() => props.active, () => props.compact], () => {
       vue.nextTick(() => {
         scrollIntoView();
       });
     });
-    return { menusRef, menuItems, onItemClick };
+    return {
+      menusRef,
+      menuItems,
+      onItemClick,
+      onItemMouseenter,
+      onItemMouseleave,
+      onMouseenter,
+      onMouseleave
+    };
   }
 });
 const _export_sfc = (sfc, props) => {
@@ -61,11 +88,14 @@ const _export_sfc = (sfc, props) => {
   }
   return target;
 };
-const _hoisted_1 = { class: "ele-admin-sidebox" };
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_EleMenus = vue.resolveComponent("EleMenus");
   const _component_ElScrollbar = vue.resolveComponent("ElScrollbar");
-  return vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
+  return vue.openBlock(), vue.createElementBlock("div", {
+    class: "ele-admin-sidebox",
+    onMouseenter: _cache[0] || (_cache[0] = (...args) => _ctx.onMouseenter && _ctx.onMouseenter(...args)),
+    onMouseleave: _cache[1] || (_cache[1] = (...args) => _ctx.onMouseleave && _ctx.onMouseleave(...args))
+  }, [
     vue.renderSlot(_ctx.$slots, "boxTop"),
     vue.createVNode(_component_ElScrollbar, {
       ref: "menusRef",
@@ -84,7 +114,9 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
           collapseTransition: false,
           firstPopperClass: "ele-admin-sidebox-popup",
           tooltipDisabled: !_ctx.compact,
-          onItemClick: _ctx.onItemClick
+          onItemClick: _ctx.onItemClick,
+          onItemMouseenter: _ctx.onItemMouseenter,
+          onItemMouseleave: _ctx.onItemMouseleave
         }, vue.createSlots({ _: 2 }, [
           _ctx.iconSlot && !["boxTop", "boxBottom"].includes(_ctx.iconSlot) && _ctx.$slots[_ctx.iconSlot] ? {
             name: "icon",
@@ -100,12 +132,12 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
             ]),
             key: "1"
           } : void 0
-        ]), 1032, ["items", "theme", "popupColorful", "collapse", "defaultActive", "popperEffect", "tooltipDisabled", "onItemClick"])) : vue.createCommentVNode("", true)
+        ]), 1032, ["items", "theme", "popupColorful", "collapse", "defaultActive", "popperEffect", "tooltipDisabled", "onItemClick", "onItemMouseenter", "onItemMouseleave"])) : vue.createCommentVNode("", true)
       ]),
       _: 3
     }, 512),
     vue.renderSlot(_ctx.$slots, "boxBottom")
-  ]);
+  ], 32);
 }
 const proSidebox = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
 module.exports = proSidebox;

package/lib/ele-pro-layout/components/pro-sidebox.d.ts

@@ -17,20 +17,28 @@ declare const _default: import("vue").DefineComponent<{
     compact: BooleanConstructor;
     /** 二级侧栏是否折叠 */
     collapse: BooleanConstructor;
-    /** tooltip 主题 */
+    /** 菜单折叠提示气泡主题 */
     popperEffect: PropType<import("element-plus/es/utils/index").EpPropMergeType<StringConstructor, "light" | "dark", unknown> | undefined>;
-    /** 菜单项触发模式 */
+    /** 子菜单项触发模式 */
     itemTrigger: PropType<MenuItemTrigger>;
-    /** 标题插槽名称 */
+    /** 菜单标题插槽名称 */
     titleSlot: StringConstructor;
-    /** 图标插槽名称 */
+    /** 菜单图标插槽名称 */
     iconSlot: StringConstructor;
 }, {
     menusRef: import("vue").Ref<ElScrollbarInstance>;
     menuItems: import("vue").ComputedRef<Partial<import("../../ele-menus/types").MenuItem>[]>;
-    onItemClick: (item: MenuItemProps) => void;
+    onItemClick: (item: MenuItemProps, e: MouseEvent) => void;
+    onItemMouseenter: (item: MenuItemProps, e: MouseEvent) => void;
+    onItemMouseleave: (item: MenuItemProps, e: MouseEvent) => void;
+    onMouseenter: (e: MouseEvent) => void;
+    onMouseleave: (e: MouseEvent) => void;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    itemClick: (_item: MenuItemProps) => true;
+    itemClick: (_item: MenuItemProps, _e: MouseEvent) => true;
+    itemMouseenter: (_item: MenuItemProps, _e: MouseEvent) => true;
+    itemMouseleave: (_item: MenuItemProps, _e: MouseEvent) => true;
+    mouseEnter: (_e: MouseEvent) => true;
+    mouseLeave: (_e: MouseEvent) => true;
 }, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     /** 菜单数据 */
     menus: {
@@ -47,16 +55,20 @@ declare const _default: import("vue").DefineComponent<{
     compact: BooleanConstructor;
     /** 二级侧栏是否折叠 */
     collapse: BooleanConstructor;
-    /** tooltip 主题 */
+    /** 菜单折叠提示气泡主题 */
     popperEffect: PropType<import("element-plus/es/utils/index").EpPropMergeType<StringConstructor, "light" | "dark", unknown> | undefined>;
-    /** 菜单项触发模式 */
+    /** 子菜单项触发模式 */
     itemTrigger: PropType<MenuItemTrigger>;
-    /** 标题插槽名称 */
+    /** 菜单标题插槽名称 */
     titleSlot: StringConstructor;
-    /** 图标插槽名称 */
+    /** 菜单图标插槽名称 */
     iconSlot: StringConstructor;
 }>> & {
-    onItemClick?: ((_item: Partial<import("../../ele-menus/types").MenuItem>) => any) | undefined;
+    onItemClick?: ((_item: Partial<import("../../ele-menus/types").MenuItem>, _e: MouseEvent) => any) | undefined;
+    onItemMouseenter?: ((_item: Partial<import("../../ele-menus/types").MenuItem>, _e: MouseEvent) => any) | undefined;
+    onItemMouseleave?: ((_item: Partial<import("../../ele-menus/types").MenuItem>, _e: MouseEvent) => any) | undefined;
+    onMouseEnter?: ((_e: MouseEvent) => any) | undefined;
+    onMouseLeave?: ((_e: MouseEvent) => any) | undefined;
 }, {
     collapse: boolean;
     compact: boolean;

package/lib/ele-pro-layout/components/tab-dropdown.cjs

@@ -25,13 +25,17 @@ const _sfc_main = vue.defineComponent({
     const state = { timer: null };
     const dropdownRef = vue.ref(null);
     const clearTimer = () => {
-      state.timer && clearTimeout(state.timer);
+      if (state.timer) {
+        clearTimeout(state.timer);
+        state.timer = null;
+      }
     };
     const onCommand = (command) => {
       emit("menuClick", command);
       clearTimer();
       if (props.autoClose) {
         state.timer = setTimeout(() => {
+          state.timer = null;
           if (dropdownRef.value) {
             dropdownRef.value.handleClose();
           }

package/lib/ele-pro-layout/index.cjs

@@ -29,6 +29,13 @@ const _sfc_main = vue.defineComponent({
     const { authenticated } = receiver.useLicense();
     const { currentRoute, push } = vueRouter.useRouter();
     const { disableTransition } = util.useDisableTransition();
+    const state = {
+      headerData: [],
+      sideboxData: [],
+      sidebarData: [],
+      menuTimer: null,
+      isHover: false
+    };
     const contentRef = vue.ref(null);
     const levelData = vue.shallowRef([]);
     const tabData = vue.shallowRef([]);
@@ -216,6 +223,9 @@ const _sfc_main = vue.defineComponent({
         sideboxActive.value = active1;
       }
       sidebarActive.value = active;
+      state.headerActive = headerActive.value;
+      state.sideboxActive = sideboxActive.value;
+      state.sidebarActive = sidebarActive.value;
     };
     const splitMenuData = () => {
       var _a;
@@ -292,6 +302,9 @@ const _sfc_main = vue.defineComponent({
           sidebarData.value = menuData.value;
         }
       }
+      state.headerData = headerData.value;
+      state.sideboxData = sideboxData.value;
+      state.sidebarData = sidebarData.value;
     };
     const updateMenuData = () => {
       let temp;
@@ -337,90 +350,276 @@ const _sfc_main = vue.defineComponent({
         });
       }
     };
-    const onNavItemClick = (item) => {
-      if (!item.index || props2.navTrigger != "click") {
-        return;
-      }
-      if (props2.beforeClick && props2.beforeClick(item) === false) {
+    const onNavItemClick = (item, e) => {
+      const path = item.index;
+      const trigger = props2.navTrigger;
+      if (!path || trigger !== "click" && trigger !== "hover") {
         return;
       }
       if (core.isExternalLink(item.index)) {
-        window.open(item.index);
+        e.stopPropagation();
+        if (props2.beforeClick && props2.beforeClick(item, e) === false) {
+          return;
+        }
+        window.open(path);
         return;
       }
-      headerActive.value = item.index;
-      const temp = util.getActiveChilds(
-        headerData.value,
-        headerActive.value,
-        "tempChildren"
-      );
+      const temp = util.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 !== vue.unref(currentRoute).fullPath) {
-        push(item.index);
+      if (trigger !== "click" && !isChild) {
+        e.stopPropagation();
         return;
       }
-      if (mixSidebar.value) {
+      if (props2.beforeClick && props2.beforeClick(item, e) === false) {
+        return;
+      }
+      if (isChild) {
+        if (path !== vue.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: props2.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 = props2.navTrigger;
+      if (trigger !== "hover" || !path || core.isExternalLink(path)) {
         return;
       }
-      sidebarData.value = temp;
+      const temp = util.getActiveChilds(headerData.value, path, "tempChildren");
+      if (!temp.some((d) => {
+        var _a;
+        return !((_a = d.meta) == null ? void 0 : _a.hide);
+      })) {
+        return;
+      }
+      if (props2.beforeClick && props2.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: props2.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;
+        }
+      }, props2.menuHoverTimeout);
     };
-    const onBoxItemClick = (item) => {
-      if (!item.index || props2.boxTrigger != "click") {
+    const onBoxItemClick = (item, e) => {
+      const path = item.index;
+      const trigger = props2.boxTrigger;
+      if (!path || trigger !== "click" && trigger !== "hover") {
         return;
       }
-      if (props2.beforeClick && props2.beforeClick(item) === false) {
+      if (core.isExternalLink(path)) {
+        e.stopPropagation();
+        if (props2.beforeClick && props2.beforeClick(item, e) === false) {
+          return;
+        }
+        window.open(path);
         return;
       }
-      if (core.isExternalLink(item.index)) {
-        window.open(item.index);
+      if (props2.collapse) {
+        if (props2.beforeClick && props2.beforeClick(item, e) === false) {
+          return;
+        }
+        if (path !== vue.unref(currentRoute).fullPath) {
+          push(path);
+        }
         return;
       }
-      sideboxActive.value = item.index;
-      const temp = util.getActiveChilds(
-        sideboxData.value,
-        sideboxActive.value,
-        "tempChildren"
-      );
+      const temp = util.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 !== vue.unref(currentRoute).fullPath) {
-        push(item.index);
+      if (trigger !== "click" && !isChild) {
+        e.stopPropagation();
+        return;
+      }
+      if (props2.beforeClick && props2.beforeClick(item, e) === false) {
+        return;
+      }
+      if (isChild) {
+        if (path !== vue.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 || props2.itemTrigger != "click") {
+    const onBoxItemMouseenter = (item, e) => {
+      if (props2.collapse) {
         return;
       }
-      if (props2.beforeClick && props2.beforeClick(item) === false) {
+      if (state.menuTimer != null) {
+        clearTimeout(state.menuTimer);
+        state.menuTimer = null;
+      }
+      const path = item.index;
+      const trigger = props2.boxTrigger;
+      if (trigger !== "hover" || !path || core.isExternalLink(path)) {
         return;
       }
-      if (core.isExternalLink(item.index)) {
-        window.open(item.index);
+      const temp = util.getActiveChilds(sideboxData.value, path, "tempChildren");
+      if (!temp.some((d) => {
+        var _a;
+        return !((_a = d.meta) == null ? void 0 : _a.hide);
+      })) {
+        return;
+      }
+      if (props2.beforeClick && props2.beforeClick(item, e) === false) {
         return;
       }
-      sidebarActive.value = item.index;
-      if (item.index !== vue.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;
+        }
+      }, props2.menuHoverTimeout);
+    };
+    const onMenuItemClick = (item, e) => {
+      const path = item.index;
+      const trigger = props2.itemTrigger;
+      if (!path || trigger !== "click" && trigger !== "hover") {
+        return;
+      }
+      if (props2.beforeClick && props2.beforeClick(item, e) === false) {
+        return;
+      }
+      if (core.isExternalLink(path)) {
+        e.stopPropagation();
+        window.open(path);
+        return;
+      }
+      sidebarActive.value = path;
+      if (path !== vue.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;
+        }
+      }, props2.menuHoverTimeout);
+    };
     vue.watch(
       () => props2.menus,
       () => {
@@ -463,11 +662,13 @@ const _sfc_main = vue.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;
       }
     );
     vue.watch(
@@ -528,7 +729,7 @@ const _sfc_main = vue.defineComponent({
       props2
     );
     const layoutProvide = vue.computed(() => {
-      const state = {
+      const state2 = {
         mobile: mobile.value,
         collapse: props2.collapse,
         compact: props2.compact,
@@ -541,7 +742,7 @@ const _sfc_main = vue.defineComponent({
         keepAlive: props2.tabBar && props2.keepAlive,
         responsive: props2.responsive
       };
-      return state;
+      return state2;
     });
     vue.provide(receiver.LAYOUT_KEY, layoutProvide);
     return {
@@ -577,8 +778,16 @@ const _sfc_main = vue.defineComponent({
       onHeadMenuOpen,
       onHeadMenuClose,
       onNavItemClick,
+      onNavItemMouseenter,
+      onNavMouseEnter,
+      onNavMouseLeave,
       onBoxItemClick,
-      onMenuItemClick
+      onBoxItemMouseenter,
+      onBoxMouseEnter,
+      onBoxMouseLeave,
+      onMenuItemClick,
+      onSideMouseEnter,
+      onSideMouseLeave
     };
   }
 });
@@ -625,7 +834,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
     }, vue.createSlots({ _: 2 }, [
       vue.renderList(Object.keys(_ctx.$slots).filter(
         (k) => ![
@@ -648,7 +860,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"]),
     vue.createVNode(_component_EleWatermark, {
       class: "ele-admin-main",
       height: 68,
@@ -669,7 +881,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
         }, vue.createSlots({ _: 2 }, [
           vue.renderList(Object.keys(_ctx.$slots).filter(
             (k) => ![
@@ -695,7 +910,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
               ])
             };
           })
-        ]), 1032, ["menus", "sidebarStyle", "colorfulIcon", "active", "compact", "collapse", "popperEffect", "itemTrigger", "titleSlot", "iconSlot", "onItemClick"])) : vue.createCommentVNode("", true),
+        ]), 1032, ["menus", "sidebarStyle", "colorfulIcon", "active", "compact", "collapse", "popperEffect", "itemTrigger", "titleSlot", "iconSlot", "onItemClick", "onItemMouseenter", "onMouseEnter", "onMouseLeave"])) : vue.createCommentVNode("", true),
         _ctx.sidebar ? (vue.openBlock(), vue.createBlock(_component_ProSidebar, {
           key: 1,
           menus: _ctx.sidebarData,
@@ -711,7 +926,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
         }, vue.createSlots({ _: 2 }, [
           vue.renderList(Object.keys(_ctx.$slots).filter(
             (k) => ![
@@ -737,7 +954,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"])) : vue.createCommentVNode("", true),
+        ]), 1032, ["menus", "sidebarStyle", "colorfulIcon", "active", "collapse", "uniqueOpened", "defaultOpeneds", "popperEffect", "itemTrigger", "titleSlot", "iconSlot", "onOpen", "onClsoe", "onItemClick", "onMouseEnter", "onMouseLeave"])) : vue.createCommentVNode("", true),
         vue.createElementVNode("div", _hoisted_1, [
           _ctx.tabBar ? (vue.openBlock(), vue.createBlock(_component_ProTabs, {
             key: 0,