vxe-pc-ui 4.16.9 → 4.16.11

package/packages/menu/src/menu.ts

@@ -1,14 +1,14 @@
-import { ref, h, reactive, PropType, inject, resolveComponent, watch, VNode, computed, nextTick, onBeforeUnmount, onMounted } from 'vue'
+import { ref, h, reactive, Teleport, PropType, inject, resolveComponent, watch, VNode, computed, nextTick, onBeforeUnmount, onMounted } from 'vue'
 import { defineVxeComponent } from '../../ui/src/comp'
 import XEUtils from 'xe-utils'
 import { VxeUI, createEvent, permission, useSize, globalEvents, renderEmptyElement } from '../../ui'
-import { toCssUnit } from '../../ui/src/dom'
+import { scrollToView, toCssUnit } from '../../ui/src/dom'
 import { getLastZIndex, nextZIndex, isEnableConf } from '../../ui/src/utils'
 import { getSlotVNs } from '../../ui/src/vn'
 import { createComponentLog } from '../../ui/src/log'
 import VxeLoadingComponent from '../../loading'
 
-import type { VxeMenuDefines, VxeMenuPropTypes, MenuInternalData, MenuReactData, VxeMenuEmits, MenuMethods, VxeComponentSlotType, VxeLayoutAsidePropTypes, MenuPrivateMethods, MenuPrivateRef, VxeMenuPrivateComputed, VxeMenuConstructor, VxeMenuPrivateMethods, ValueOf, VxeLayoutAsideConstructor, VxeLayoutAsidePrivateMethods } from '../../../types'
+import type { VxeMenuDefines, VxeMenuPropTypes, MenuInternalData, MenuReactData, VxeMenuEmits, MenuMethods, VxeComponentSlotType, MenuPrivateMethods, MenuPrivateRef, VxeMenuPrivateComputed, VxeMenuConstructor, VxeMenuPrivateMethods, ValueOf, VxeLayoutAsideConstructor, VxeLayoutAsidePrivateMethods } from '../../../types'
 
 const { errLog } = createComponentLog('menu')
 
@@ -16,6 +16,10 @@ const { menus, getConfig, getIcon } = VxeUI
 
 function createInternalData (): MenuInternalData {
   return {
+    lastActiveTime: 0,
+    menuInitMaps: {},
+    menuCacheMaps: {},
+    menuKeyMaps: {},
     menuEffectMaps: {}
   }
 }
@@ -39,10 +43,19 @@ export default defineVxeComponent({
   props: {
     modelValue: [String, Number] as PropType<VxeMenuPropTypes.ModelValue>,
     expandAll: Boolean as PropType<VxeMenuPropTypes.ExpandAll>,
+    expandKeys: Array as PropType<VxeMenuPropTypes.ExpandKeys>,
     accordion: {
       type: Boolean as PropType<VxeMenuPropTypes.Accordion>,
       default: () => getConfig().menu.accordion
     },
+    border: {
+      type: [Boolean, String] as PropType<VxeMenuPropTypes.Border>,
+      default: () => getConfig().menu.border
+    },
+    optionProps: {
+      type: Object as PropType<VxeMenuPropTypes.OptionProps>,
+      default: () => getConfig().menu.optionProps
+    },
     collapsed: {
       type: Boolean as PropType<VxeMenuPropTypes.Collapsed>,
       default: null
@@ -88,6 +101,43 @@ export default defineVxeComponent({
       return Object.assign({}, getConfig().menu.menuConfig, props.menuConfig)
     })
 
+    const computePropsOpts = computed(() => {
+      return Object.assign({}, getConfig().menu.optionProps, props.optionProps)
+    })
+
+    const computeTitleField = computed(() => {
+      const propsOpts = computePropsOpts.value
+      return propsOpts.title || 'title'
+    })
+
+    const computeKeyField = computed(() => {
+      const propsOpts = computePropsOpts.value
+      return propsOpts.name || 'name'
+    })
+
+    const computeChildrenField = computed(() => {
+      const propsOpts = computePropsOpts.value
+      return propsOpts.children || 'children'
+    })
+
+    const computeLinkUrlField = computed(() => {
+      const propsOpts = computePropsOpts.value
+      return propsOpts.linkUrl || 'href'
+    })
+
+    const computeRouterLinkField = computed(() => {
+      const propsOpts = computePropsOpts.value
+      return propsOpts.routerLink || 'routerLink'
+    })
+
+    const computeCurrBorder = computed(() => {
+      const { border } = props
+      if (border) {
+        return border === true ? 'first-group' : border
+      }
+      return ''
+    })
+
     const computeIsCollapsed = computed(() => {
       const { collapsed } = props
       if (XEUtils.isBoolean(collapsed)) {
@@ -99,20 +149,13 @@ export default defineVxeComponent({
       return false
     })
 
-    const computeCollapseWidth = computed(() => {
-      let collapseWidth: VxeLayoutAsidePropTypes.CollapseWidth = ''
-      if ($xeLayoutAside) {
-        collapseWidth = $xeLayoutAside.props.collapseWidth || ''
-      }
-      return collapseWidth
-    })
-
-    const computeCollapseEnterWidth = computed(() => {
-      let width: VxeLayoutAsidePropTypes.Width = ''
+    const computeVarStyle = computed(() => {
       if ($xeLayoutAside) {
-        width = $xeLayoutAside.props.width || ''
+        const { computeVarStyle: asideComputeVarStyle } = $xeLayoutAside.getComputeMaps()
+        const asideVarStyle = asideComputeVarStyle.value
+        return asideVarStyle
       }
-      return width
+      return {}
     })
 
     const computeMaps: VxeMenuPrivateComputed = {
@@ -124,6 +167,7 @@ export default defineVxeComponent({
       props,
       context,
       reactData,
+      internalData,
 
       getRefMaps: () => refMaps,
       getComputeMaps: () => computeMaps
@@ -141,12 +185,14 @@ export default defineVxeComponent({
 
     const updateActiveMenu = (isDefExpand?: boolean) => {
       const { activeName } = reactData
-      XEUtils.eachTree(reactData.menuList, (item, index, items, path, parent, nodes) => {
+      const { menuInitMaps } = internalData
+      XEUtils.eachTree(reactData.menuList, (item, index, items, path, parentItem, nodes) => {
         if (item.itemKey === activeName) {
           nodes.forEach(obj => {
             obj.isActive = true
             if (isDefExpand) {
               obj.isExpand = true
+              menuInitMaps[obj.itemId] = true
             }
           })
           item.isExactActive = true
@@ -158,31 +204,68 @@ export default defineVxeComponent({
     }
 
     const updateMenuConfig = () => {
-      const { options, expandAll } = props
-      reactData.menuList = XEUtils.mapTree(options, (item, index, items, path, parent) => {
-        const objItem = {
-          ...item,
-          parentKey: parent ? (parent.name || path.slice(0, path.length - 1).join(',')) : '',
+      const { options, expandAll, expandKeys } = props
+      const muInitMaps: Record<string, boolean> = {}
+      const titleField = computeTitleField.value
+      const keyField = computeKeyField.value
+      const childrenField = computeChildrenField.value
+      const linkUrlField = computeLinkUrlField.value
+      const routerLinkField = computeRouterLinkField.value
+      const defaultExpandMaps: Record<string, boolean> = {}
+      if (expandKeys) {
+        expandKeys.forEach(key => {
+          defaultExpandMaps[key] = true
+        })
+      }
+      const muCacheMaps: Record<string, VxeMenuDefines.MenuItem> = {}
+      const muKeyMaps: Record<string, VxeMenuDefines.MenuItem> = {}
+      reactData.menuList = XEUtils.mapTree(options, (item, index, items, path, parentItem) => {
+        const itemId = ++nemuUniqueKey
+        const itemKey = item[keyField] || path.join(',')
+        const childList = item[childrenField]
+        const hasChild = childList && childList.length > 0
+        const isExpand = hasChild ? (XEUtils.isBoolean(item.expanded) ? item.expanded : (defaultExpandMaps[itemKey] || !!expandAll)) : false
+        if (isExpand) {
+          muInitMaps[itemId] = true
+        }
+        const objItem: VxeMenuDefines.MenuItem = {
+          itemConf: item,
+          title: item[titleField],
+          name: item[keyField],
+          icon: item.icon,
+          linkUrl: item[linkUrlField],
+          linkTarget: item.linkTarget,
+          routerLink: item[routerLinkField],
+          permissionCode: item.permissionCode,
+          children: childList,
+          slots: item.slots,
+          parentKey: parentItem ? (parentItem.name || path.slice(0, path.length - 1).join(',')) : '',
           level: path.length,
-          itemId: ++nemuUniqueKey,
-          itemKey: item.name || path.join(','),
+          itemId,
+          itemKey,
           isExactActive: false,
           isActive: false,
-          isExpand: XEUtils.isBoolean(item.expanded) ? item.expanded : !!expandAll,
-          hasChild: item.children && item.children.length > 0
-        } as VxeMenuDefines.MenuItem
+          isExpand,
+          hasChild,
+          childList: []
+        }
+        if (muKeyMaps[itemKey]) {
+          errLog('vxe.error.repeatKey', [keyField, item[keyField]])
+        }
+        muCacheMaps[itemId] = objItem
+        muKeyMaps[itemKey] = objItem
         return objItem
       }, { children: 'children', mapChildren: 'childList' })
+      internalData.menuInitMaps = muInitMaps
+      internalData.menuCacheMaps = muCacheMaps
+      internalData.menuKeyMaps = muKeyMaps
     }
 
     const updateCollapseStyle = () => {
       const { collapseFixed } = props
       if (collapseFixed) {
         nextTick(() => {
-          const { isEnterCollapse } = reactData
           const isCollapsed = computeIsCollapsed.value
-          const collapseEnterWidth = computeCollapseEnterWidth.value
-          const collapseWidth = computeCollapseWidth.value
           const el = refElem.value
           if (el) {
             const clientRect = el.getBoundingClientRect()
@@ -192,7 +275,6 @@ export default defineVxeComponent({
                   top: toCssUnit(clientRect.top),
                   left: toCssUnit(clientRect.left),
                   height: toCssUnit(parentNode.clientHeight),
-                  width: isEnterCollapse ? (collapseEnterWidth ? toCssUnit(collapseEnterWidth) : '') : (collapseWidth ? toCssUnit(collapseWidth) : ''),
                   zIndex: reactData.collapseZindex
                 }
               : {}
@@ -209,12 +291,6 @@ export default defineVxeComponent({
         if (isCollapsed) {
           if (!initialized) {
             reactData.initialized = true
-            nextTick(() => {
-              const collapseEl = refCollapseElem.value
-              if (collapseEl) {
-                document.body.appendChild(collapseEl)
-              }
-            })
           }
         }
         reactData.isEnterCollapse = false
@@ -225,7 +301,7 @@ export default defineVxeComponent({
 
     const handleClickIconCollapse = (evnt: MouseEvent, item: VxeMenuDefines.MenuItem, itemList: VxeMenuDefines.MenuItem[]) => {
       const { accordion } = props
-      const { menuEffectMaps } = internalData
+      const { menuEffectMaps, menuInitMaps } = internalData
       const { itemId, hasChild, isExpand } = item
       const isCollapsed = computeIsCollapsed.value
       const expanded = !isExpand
@@ -245,6 +321,7 @@ export default defineVxeComponent({
           })
         }
         item.isExpand = expanded
+        menuInitMaps[itemId] = true
 
         const wrapperEl = isCollapsed ? refCollapseElem.value : refElem.value
         if (wrapperEl) {
@@ -284,7 +361,7 @@ export default defineVxeComponent({
       const menuOpts = computeMenuOpts.value
       if (menuConfig ? isEnableConf(menuOpts) : menuOpts.enabled) {
         const { options, visibleMethod } = menuOpts
-        if (!visibleMethod || visibleMethod({ $menu: $xeMenu, options, currentMenu: item })) {
+        if (!visibleMethod || visibleMethod({ $menu: $xeMenu, options, currentMenu: item, currentOption: item.itemConf })) {
           if (VxeUI.contextMenu) {
             VxeUI.contextMenu.openByEvent(evnt, {
               options,
@@ -293,7 +370,7 @@ export default defineVxeComponent({
                   const { option } = eventParams
                   const gMenuOpts = menus.get(option.code)
                   const mmMethod = gMenuOpts ? gMenuOpts.menuMenuMethod : null
-                  const params = { menu: option, currentMenu: item, $event: evnt, $menu: $xeMenu }
+                  const params = { menu: option, currentMenu: item, currentOption: item.itemConf, $event: evnt, $menu: $xeMenu }
                   if (mmMethod) {
                     mmMethod(params, evnt)
                   }
@@ -308,20 +385,24 @@ export default defineVxeComponent({
     }
 
     const handleClickMenu = (evnt: MouseEvent, item: VxeMenuDefines.MenuItem, itemList: VxeMenuDefines.MenuItem[]) => {
-      const { itemKey, routerLink, hasChild } = item
-      if (routerLink) {
+      const { itemKey, linkUrl, routerLink, hasChild } = item
+      if (linkUrl || routerLink) {
         emitModel(itemKey)
-        handleMenuMouseleave()
+        reactData.isEnterCollapse = false
+        internalData.lastActiveTime = Date.now()
       } else {
         if (hasChild) {
           handleClickIconCollapse(evnt, item, itemList)
         } else {
           emitModel(itemKey)
-          handleMenuMouseleave()
+          reactData.isEnterCollapse = false
+          internalData.lastActiveTime = Date.now()
         }
       }
       const params = {
         currentMenu: item,
+        currentOption: item.itemConf,
+        option: item.itemConf,
 
         // 已废弃
         menu: item
@@ -330,27 +411,14 @@ export default defineVxeComponent({
     }
 
     const handleMenuMouseenter = () => {
-      const { collapseStyle } = reactData
-      const collapseEnterWidth = computeCollapseEnterWidth.value
-      reactData.collapseStyle = Object.assign({}, collapseStyle, {
-        width: collapseEnterWidth ? toCssUnit(collapseEnterWidth) : ''
-      })
-      reactData.isEnterCollapse = true
-    }
+      const { lastActiveTime } = internalData
 
-    const handleMenuMouseover = () => {
-      const { isEnterCollapse } = reactData
-      if (!isEnterCollapse) {
-        handleMenuMouseenter()
+      if (lastActiveTime < Date.now() - 500) {
+        reactData.isEnterCollapse = true
       }
     }
 
     const handleMenuMouseleave = () => {
-      const { collapseStyle } = reactData
-      const el = refElem.value
-      reactData.collapseStyle = Object.assign({}, collapseStyle, {
-        width: el ? toCssUnit(el.offsetWidth) : ''
-      })
       reactData.isEnterCollapse = false
     }
 
@@ -370,8 +438,70 @@ export default defineVxeComponent({
       emit(type, createEvent(evnt, { $menu: $xeMenu }, params))
     }
 
+    const handleScrollToView = (itemId: number) => {
+      const wrapperEl = refElem.value
+      const nemuEl = wrapperEl ? wrapperEl.querySelector<HTMLDivElement>(`.vxe-menu--item-wrapper[data-menu-id="${itemId}"]`) : null
+      if (nemuEl) {
+        scrollToView(nemuEl)
+        return true
+      }
+      return false
+    }
+
     const menuMethods: MenuMethods = {
-      dispatchEvent
+      dispatchEvent,
+      setExpandByMenuKey (menuKeys, expanded) {
+        const { menuKeyMaps, menuInitMaps } = internalData
+        if (menuKeys) {
+          if (!XEUtils.isArray(menuKeys)) {
+            menuKeys = [menuKeys]
+          }
+          menuKeys.forEach(mKey => {
+            const menuItem = menuKeyMaps[mKey]
+            if (menuItem) {
+              if (expanded) {
+                menuInitMaps[menuItem.itemId] = true
+              }
+              menuItem.isExpand = !!expanded
+            }
+          })
+        }
+        return nextTick()
+      },
+      clearAllExpandMenu () {
+        const { menuList } = reactData
+        XEUtils.eachTree(menuList, (item) => {
+          item.isExpand = false
+        }, { children: 'childList' })
+        internalData.menuInitMaps = {}
+        return nextTick()
+      },
+      scrollToMenuKey (menuKey) {
+        const { menuKeyMaps } = internalData
+        const menuItem = menuKeyMaps[menuKey]
+        if (!menuItem) {
+          return nextTick()
+        }
+        const { itemId } = menuItem
+        if (handleScrollToView(itemId)) {
+          return nextTick()
+        }
+        return nextTick().then(() => {
+          handleScrollToView(itemId)
+        })
+      },
+      scrollToActiveMenu () {
+        const { activeName } = reactData
+        if (activeName) {
+          return $xeMenu.scrollToMenuKey(activeName)
+        }
+        return nextTick().then(() => {
+          const { activeName } = reactData
+          if (activeName) {
+            return $xeMenu.scrollToMenuKey(activeName)
+          }
+        })
+      }
     }
 
     const menuPrivateMethods: MenuPrivateMethods = {
@@ -388,11 +518,10 @@ export default defineVxeComponent({
       const title = getMenuTitle(item)
       const isCollapsed = computeIsCollapsed.value
       const params = {
-        currentMenu: item as Required<VxeMenuDefines.MenuItem>,
-        collapsed: isCollapsed,
-
-        // 已废弃
-        option: item as Required<VxeMenuPropTypes.MenuOption>
+        currentMenu: item,
+        currentOption: item.itemConf,
+        option: item.itemConf,
+        collapsed: isCollapsed
       }
       return [
         optionSlot
@@ -430,90 +559,110 @@ export default defineVxeComponent({
     }
 
     const renderDefaultChildren = (item: VxeMenuDefines.MenuItem, itemList: VxeMenuDefines.MenuItem[]): VNode => {
-      const { itemId, itemKey, level, hasChild, isActive, isExactActive, isExpand, routerLink, childList } = item
+      const { itemId, itemKey, level, hasChild, isActive, isExactActive, isExpand, linkUrl, routerLink, linkTarget, childList } = item
       const { isEnterCollapse } = reactData
+      const { menuInitMaps } = internalData
       const isCollapsed = computeIsCollapsed.value
       if (item.permissionCode) {
         if (!permission.checkVisible(item.permissionCode)) {
           return renderEmptyElement($xeMenu)
         }
       }
+      const isExpandChild = (!isCollapsed || isEnterCollapse) && isExpand
+      const linkOns = {
+        onContextmenu (evnt: MouseEvent) {
+          handleContextmenuEvent(evnt, item)
+        },
+        onClick (evnt: MouseEvent) {
+          handleClickMenu(evnt, item, itemList)
+        }
+      }
       return h('div', {
         key: itemKey,
         class: ['vxe-menu--item-wrapper', `vxe-menu--item-level${level}`, {
+          'has--child': hasChild,
           'is--exact-active': isExactActive,
           'is--active': isActive,
-          'is--expand': (!isCollapsed || isEnterCollapse) && isExpand
+          'is--expand': isExpandChild
         }],
         'data-menu-id': itemId
       }, [
-        routerLink
-          ? h(resolveComponent('router-link'), {
-            class: 'vxe-menu--item-link',
-            to: routerLink,
-            onContextmenu (evnt: MouseEvent) {
-              handleContextmenuEvent(evnt, item)
-            },
-            onClick (evnt: MouseEvent) {
-              handleClickMenu(evnt, item, itemList)
-            }
-          }, {
-            default: () => renderMenuTitle(item, itemList)
-          })
-          : h('div', {
-            class: 'vxe-menu--item-link',
-            onContextmenu (evnt: MouseEvent) {
-              handleContextmenuEvent(evnt, item)
-            },
-            onClick (evnt: MouseEvent) {
-              handleClickMenu(evnt, item, itemList)
-            }
-          }, renderMenuTitle(item, itemList)),
+        linkUrl
+          ? h('a', {
+            class: 'vxe-menu--item-link is--link',
+            href: linkUrl,
+            target: linkTarget,
+            ...linkOns
+          }, renderMenuTitle(item, itemList))
+          : (
+              routerLink
+                ? h(resolveComponent('router-link'), {
+                  class: 'vxe-menu--item-link is--router',
+                  to: routerLink,
+                  target: linkTarget,
+                  ...linkOns
+                }, {
+                  default: () => renderMenuTitle(item, itemList)
+                })
+                : h('div', {
+                  class: 'vxe-menu--item-link is--default',
+                  ...linkOns
+                }, renderMenuTitle(item, itemList))
+            ),
         hasChild
           ? h('div', {
             class: 'vxe-menu--item-group'
-          }, childList.map(child => renderDefaultChildren(child, childList)))
+          }, isExpandChild || menuInitMaps[itemId] ? childList.map(child => renderDefaultChildren(child, childList)) : [])
           : renderEmptyElement($xeMenu)
       ])
     }
 
     const renderCollapseChildren = (item: VxeMenuDefines.MenuItem, itemList: VxeMenuDefines.MenuItem[]): VNode => {
-      const { itemId, itemKey, level, hasChild, isActive, isExactActive, routerLink, childList } = item
+      const { itemId, itemKey, level, hasChild, isActive, isExactActive, routerLink, linkUrl, linkTarget, childList } = item
       if (item.permissionCode) {
         if (!permission.checkVisible(item.permissionCode)) {
           return renderEmptyElement($xeMenu)
         }
       }
+      const linkOns = {
+        onContextmenu (evnt: MouseEvent) {
+          handleContextmenuEvent(evnt, item)
+        },
+        onClick (evnt: MouseEvent) {
+          handleClickMenu(evnt, item, itemList)
+        }
+      }
       return h('div', {
         key: itemKey,
         class: ['vxe-menu--item-wrapper', `vxe-menu--item-level${level}`, {
+          'has--child': hasChild,
           'is--exact-active': isExactActive,
           'is--active': isActive
         }],
         'data-menu-id': itemId
       }, [
-        routerLink
-          ? h(resolveComponent('router-link'), {
-            class: 'vxe-menu--item-link',
-            to: routerLink,
-            onContextmenu (evnt: MouseEvent) {
-              handleContextmenuEvent(evnt, item)
-            },
-            onClick (evnt: MouseEvent) {
-              handleClickMenu(evnt, item, itemList)
-            }
-          }, {
-            default: () => renderMenuTitle(item, itemList)
-          })
-          : h('div', {
-            class: 'vxe-menu--item-link',
-            onContextmenu (evnt: MouseEvent) {
-              handleContextmenuEvent(evnt, item)
-            },
-            onClick (evnt: MouseEvent) {
-              handleClickMenu(evnt, item, itemList)
-            }
-          }, renderMenuTitle(item, itemList)),
+        linkUrl
+          ? h('a', {
+            class: 'vxe-menu--item-link is--link',
+            href: linkUrl,
+            target: linkTarget,
+            ...linkOns
+          }, renderMenuTitle(item, itemList))
+          : (
+              routerLink
+                ? h(resolveComponent('router-link'), {
+                  class: 'vxe-menu--item-link is--router',
+                  to: routerLink,
+                  target: linkTarget,
+                  ...linkOns
+                }, {
+                  default: () => renderMenuTitle(item, itemList)
+                })
+                : h('div', {
+                  class: 'vxe-menu--item-link is--default',
+                  ...linkOns
+                }, renderMenuTitle(item, itemList))
+            ),
         hasChild
           ? h('div', {
             class: 'vxe-menu--item-group'
@@ -527,27 +676,45 @@ export default defineVxeComponent({
       const { initialized, menuList, collapseStyle, isEnterCollapse } = reactData
       const vSize = computeSize.value
       const isCollapsed = computeIsCollapsed.value
+      const currBorder = computeCurrBorder.value
+      const varStyle = computeVarStyle.value
+      const headerSlot = slots.header
+      const footerSlot = slots.footer
       let ons: Record<string, any> = {}
       if (collapseFixed) {
         ons = {
           onMouseenter: handleMenuMouseenter,
-          onMouseover: handleMenuMouseover,
           onMouseleave: handleMenuMouseleave
         }
       }
+      const stParams = { collapsed: isCollapsed }
       return h('div', {
         ref: refElem,
         class: ['vxe-menu', {
+          [`border--${currBorder}`]: currBorder,
           [`size--${vSize}`]: vSize,
           'is--collapsed': isCollapsed,
           'is--loading': loading
         }]
       }, [
+        headerSlot
+          ? h('div', {
+            class: 'vxe-menu--header'
+          }, headerSlot(stParams))
+          : renderEmptyElement($xeMenu),
         h('div', {
-          class: 'vxe-menu--item-list'
+          class: 'vxe-menu--body'
         }, menuList.map(child => isCollapsed ? renderCollapseChildren(child, menuList) : renderDefaultChildren(child, menuList))),
-        initialized
+        footerSlot
           ? h('div', {
+            class: 'vxe-menu--footer'
+          }, footerSlot(stParams))
+          : renderEmptyElement($xeMenu),
+        h(Teleport, {
+          to: 'body',
+          disabled: !initialized
+        }, [
+          h('div', {
             ref: refCollapseElem,
             class: ['vxe-menu--collapse-wrapper', {
               [`size--${vSize}`]: vSize,
@@ -555,16 +722,26 @@ export default defineVxeComponent({
               'is--enter': isEnterCollapse,
               'is--loading': loading
             }],
-            style: collapseStyle,
+            style: Object.assign({}, varStyle, collapseStyle),
             ...ons
-          }, [
-            isCollapsed
-              ? h('div', {
-                class: 'vxe-menu--item-list'
-              }, menuList.map(child => renderDefaultChildren(child, menuList)))
-              : renderEmptyElement($xeMenu)
-          ])
-          : renderEmptyElement($xeMenu),
+          }, isCollapsed
+            ? [
+                headerSlot
+                  ? h('div', {
+                    class: 'vxe-menu--header'
+                  }, headerSlot(stParams))
+                  : renderEmptyElement($xeMenu),
+                h('div', {
+                  class: 'vxe-menu--body'
+                }, menuList.map(child => renderDefaultChildren(child, menuList))),
+                footerSlot
+                  ? h('div', {
+                    class: 'vxe-menu--footer'
+                  }, footerSlot(stParams))
+                  : renderEmptyElement($xeMenu)
+              ]
+            : [])
+        ]),
         /**
          * 加载中
          */
@@ -610,13 +787,6 @@ export default defineVxeComponent({
     })
 
     onBeforeUnmount(() => {
-      const collapseEl = refCollapseElem.value
-      if (collapseEl) {
-        const parentNode = collapseEl.parentNode
-        if (parentNode) {
-          parentNode.removeChild(collapseEl)
-        }
-      }
       globalEvents.off($xeMenu, 'resize')
       XEUtils.assign(reactData, createReactData())
       XEUtils.assign(internalData, createInternalData())