vxe-pc-ui 3.16.9 → 3.16.11

package/lib/menu/src/menu.js

@@ -24,6 +24,10 @@ var menus = _ui.VxeUI.menus,
   getIcon = _ui.VxeUI.getIcon;
 function createInternalData() {
   return {
+    lastActiveTime: 0,
+    menuInitMaps: {},
+    menuCacheMaps: {},
+    menuKeyMaps: {},
     menuEffectMaps: {}
   };
 }
@@ -45,12 +49,25 @@ var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defi
   props: {
     value: [String, Number],
     expandAll: Boolean,
+    expandKeys: Array,
     accordion: {
       type: Boolean,
       default: function _default() {
         return getConfig().menu.accordion;
       }
     },
+    border: {
+      type: [Boolean, String],
+      default: function _default() {
+        return getConfig().menu.border;
+      }
+    },
+    optionProps: {
+      type: Object,
+      default: function _default() {
+        return getConfig().menu.optionProps;
+      }
+    },
     collapsed: {
       type: Boolean,
       default: null
@@ -84,6 +101,45 @@ var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defi
     });
   },
   computed: Object.assign(Object.assign({}, {}), {
+    computePropsOpts: function computePropsOpts() {
+      var $xeMenu = this;
+      var props = $xeMenu;
+      return Object.assign({}, getConfig().menu.optionProps, props.optionProps);
+    },
+    computeTitleField: function computeTitleField() {
+      var $xeMenu = this;
+      var propsOpts = $xeMenu.computePropsOpts;
+      return propsOpts.title || 'title';
+    },
+    computeKeyField: function computeKeyField() {
+      var $xeMenu = this;
+      var propsOpts = $xeMenu.computePropsOpts;
+      return propsOpts.name || 'name';
+    },
+    computeChildrenField: function computeChildrenField() {
+      var $xeMenu = this;
+      var propsOpts = $xeMenu.computePropsOpts;
+      return propsOpts.children || 'children';
+    },
+    computeLinkUrlField: function computeLinkUrlField() {
+      var $xeMenu = this;
+      var propsOpts = $xeMenu.computePropsOpts;
+      return propsOpts.linkUrl || 'href';
+    },
+    computeRouterLinkField: function computeRouterLinkField() {
+      var $xeMenu = this;
+      var propsOpts = $xeMenu.computePropsOpts;
+      return propsOpts.routerLink || 'routerLink';
+    },
+    computeCurrBorder: function computeCurrBorder() {
+      var $xeMenu = this;
+      var props = $xeMenu;
+      var border = props.border;
+      if (border) {
+        return border === true ? 'first-group' : border;
+      }
+      return '';
+    },
     computeMenuOpts: function computeMenuOpts() {
       var $xeMenu = this;
       var props = $xeMenu;
@@ -101,14 +157,14 @@ var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defi
       }
       return false;
     },
-    computeCollapseWidth: function computeCollapseWidth() {
+    computeVarStyle: function computeVarStyle() {
       var $xeMenu = this;
       var $xeLayoutAside = $xeMenu.$xeLayoutAside;
-      var collapseWidth = '';
       if ($xeLayoutAside) {
-        collapseWidth = $xeLayoutAside.collapseWidth || '';
+        var asideVarStyle = $xeLayoutAside.computeVarStyle;
+        return asideVarStyle;
       }
-      return collapseWidth;
+      return {};
     },
     computeCollapseEnterWidth: function computeCollapseEnterWidth() {
       var $xeMenu = this;
@@ -155,6 +211,80 @@ var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defi
       }
       return [];
     },
+    setExpandByMenuKey: function setExpandByMenuKey(menuKeys, expanded) {
+      var $xeMenu = this;
+      var internalData = $xeMenu.internalData;
+      var menuKeyMaps = internalData.menuKeyMaps,
+        menuInitMaps = internalData.menuInitMaps;
+      if (menuKeys) {
+        if (!_xeUtils.default.isArray(menuKeys)) {
+          menuKeys = [menuKeys];
+        }
+        menuKeys.forEach(function (mKey) {
+          var menuItem = menuKeyMaps[mKey];
+          if (menuItem) {
+            if (expanded) {
+              menuInitMaps[menuItem.itemId] = true;
+            }
+            menuItem.isExpand = !!expanded;
+          }
+        });
+      }
+      return $xeMenu.$nextTick();
+    },
+    clearAllExpandMenu: function clearAllExpandMenu() {
+      var $xeMenu = this;
+      var reactData = $xeMenu.reactData;
+      var internalData = $xeMenu.internalData;
+      var menuList = reactData.menuList;
+      _xeUtils.default.eachTree(menuList, function (item) {
+        item.isExpand = false;
+      }, {
+        children: 'childList'
+      });
+      internalData.menuInitMaps = {};
+      return $xeMenu.$nextTick();
+    },
+    handleScrollToView: function handleScrollToView(itemId) {
+      var $xeMenu = this;
+      var el = $xeMenu.$refs.refElem;
+      var nemuEl = el ? el.querySelector(".vxe-menu--item-wrapper[data-menu-id=\"".concat(itemId, "\"]")) : null;
+      if (nemuEl) {
+        (0, _dom.scrollToView)(nemuEl);
+        return true;
+      }
+      return false;
+    },
+    scrollToMenuKey: function scrollToMenuKey(menuKey) {
+      var $xeMenu = this;
+      var internalData = $xeMenu.internalData;
+      var menuKeyMaps = internalData.menuKeyMaps;
+      var menuItem = menuKeyMaps[menuKey];
+      if (!menuItem) {
+        return $xeMenu.$nextTick();
+      }
+      var itemId = menuItem.itemId;
+      if ($xeMenu.handleScrollToView(itemId)) {
+        return $xeMenu.$nextTick();
+      }
+      return $xeMenu.$nextTick().then(function () {
+        $xeMenu.handleScrollToView(itemId);
+      });
+    },
+    scrollToActiveMenu: function scrollToActiveMenu() {
+      var $xeMenu = this;
+      var reactData = $xeMenu.reactData;
+      var activeName = reactData.activeName;
+      if (activeName) {
+        return $xeMenu.scrollToMenuKey(activeName);
+      }
+      return $xeMenu.$nextTick().then(function () {
+        var activeName = reactData.activeName;
+        if (activeName) {
+          return $xeMenu.scrollToMenuKey(activeName);
+        }
+      });
+    },
     getMenuTitle: function getMenuTitle(item) {
       return "".concat(item.title || item.name);
     },
@@ -168,13 +298,16 @@ var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defi
     updateActiveMenu: function updateActiveMenu(isDefExpand) {
       var $xeMenu = this;
       var reactData = $xeMenu.reactData;
+      var internalData = $xeMenu.internalData;
       var activeName = reactData.activeName;
+      var menuInitMaps = internalData.menuInitMaps;
       _xeUtils.default.eachTree(reactData.menuList, function (item, index, items, path, parent, nodes) {
         if (item.itemKey === activeName) {
           nodes.forEach(function (obj) {
             obj.isActive = true;
             if (isDefExpand) {
               obj.isExpand = true;
+              menuInitMaps[obj.itemId] = true;
             }
           });
           item.isExactActive = true;
@@ -190,24 +323,67 @@ var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defi
       var $xeMenu = this;
       var props = $xeMenu;
       var reactData = $xeMenu.reactData;
+      var internalData = $xeMenu.internalData;
       var options = props.options,
-        expandAll = props.expandAll;
-      reactData.menuList = _xeUtils.default.mapTree(options, function (item, index, items, path, parent) {
-        var objItem = Object.assign(Object.assign({}, item), {
-          parentKey: parent ? parent.name || path.slice(0, path.length - 1).join(',') : '',
+        expandAll = props.expandAll,
+        expandKeys = props.expandKeys;
+      var muInitMaps = {};
+      var titleField = $xeMenu.computeTitleField;
+      var keyField = $xeMenu.computeKeyField;
+      var childrenField = $xeMenu.computeChildrenField;
+      var linkUrlField = $xeMenu.computeLinkUrlField;
+      var routerLinkField = $xeMenu.computeRouterLinkField;
+      var defaultExpandMaps = {};
+      if (expandKeys) {
+        expandKeys.forEach(function (key) {
+          defaultExpandMaps[key] = true;
+        });
+      }
+      var muCacheMaps = {};
+      var muKeyMaps = {};
+      reactData.menuList = _xeUtils.default.mapTree(options, function (item, index, items, path, parentItem) {
+        var itemId = ++nemuUniqueKey;
+        var itemKey = item[keyField] || path.join(',');
+        var childList = item[childrenField];
+        var hasChild = childList && childList.length > 0;
+        var isExpand = hasChild ? _xeUtils.default.isBoolean(item.expanded) ? item.expanded : defaultExpandMaps[itemKey] || !!expandAll : false;
+        if (isExpand) {
+          muInitMaps[itemId] = true;
+        }
+        var objItem = {
+          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: itemId,
+          itemKey: itemKey,
           isExactActive: false,
           isActive: false,
-          isExpand: _xeUtils.default.isBoolean(item.expanded) ? item.expanded : !!expandAll,
-          hasChild: item.children && item.children.length > 0
-        });
+          isExpand: isExpand,
+          hasChild: 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;
     },
     updateCollapseStyle: function updateCollapseStyle() {
       var $xeMenu = this;
@@ -216,10 +392,7 @@ var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defi
       var collapseFixed = props.collapseFixed;
       if (collapseFixed) {
         $xeMenu.$nextTick(function () {
-          var isEnterCollapse = reactData.isEnterCollapse;
           var isCollapsed = $xeMenu.computeIsCollapsed;
-          var collapseEnterWidth = $xeMenu.computeCollapseEnterWidth;
-          var collapseWidth = $xeMenu.computeCollapseWidth;
           var el = $xeMenu.$refs.refElem;
           if (el) {
             var clientRect = el.getBoundingClientRect();
@@ -228,7 +401,6 @@ var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defi
               top: (0, _dom.toCssUnit)(clientRect.top),
               left: (0, _dom.toCssUnit)(clientRect.left),
               height: (0, _dom.toCssUnit)(parentNode.clientHeight),
-              width: isEnterCollapse ? collapseEnterWidth ? (0, _dom.toCssUnit)(collapseEnterWidth) : '' : collapseWidth ? (0, _dom.toCssUnit)(collapseWidth) : '',
               zIndex: reactData.collapseZindex
             } : {};
           }
@@ -264,7 +436,8 @@ var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defi
       var props = $xeMenu;
       var internalData = $xeMenu.internalData;
       var accordion = props.accordion;
-      var menuEffectMaps = internalData.menuEffectMaps;
+      var menuEffectMaps = internalData.menuEffectMaps,
+        menuInitMaps = internalData.menuInitMaps;
       var itemId = item.itemId,
         hasChild = item.hasChild,
         isExpand = item.isExpand;
@@ -284,6 +457,7 @@ var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defi
           });
         }
         item.isExpand = expanded;
+        menuInitMaps[itemId] = true;
         var wrapperEl = isCollapsed ? $xeMenu.$refs.refCollapseElem : $xeMenu.$refs.refElem;
         if (wrapperEl) {
           var nemuEl = wrapperEl.querySelector(".vxe-menu--item-wrapper[data-menu-id=\"".concat(itemId, "\"]"));
@@ -322,7 +496,8 @@ var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defi
         if (!visibleMethod || visibleMethod({
           $menu: $xeMenu,
           options: options,
-          currentMenu: item
+          currentMenu: item,
+          currentOption: item.itemConf
         })) {
           if (_ui.VxeUI.contextMenu) {
             _ui.VxeUI.contextMenu.openByEvent(evnt, {
@@ -335,6 +510,7 @@ var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defi
                   var params = {
                     menu: option,
                     currentMenu: item,
+                    currentOption: item.itemConf,
                     $event: evnt,
                     $menu: $xeMenu
                   };
@@ -354,20 +530,29 @@ var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defi
     },
     handleClickMenu: function handleClickMenu(evnt, item, itemList) {
       var $xeMenu = this;
+      var reactData = $xeMenu.reactData;
+      var internalData = $xeMenu.internalData;
       var itemKey = item.itemKey,
+        linkUrl = item.linkUrl,
         routerLink = item.routerLink,
         hasChild = item.hasChild;
-      if (routerLink) {
+      if (linkUrl || routerLink) {
         $xeMenu.emitModel(itemKey);
+        reactData.isEnterCollapse = false;
+        internalData.lastActiveTime = Date.now();
       } else {
         if (hasChild) {
           $xeMenu.handleClickIconCollapse(evnt, item, itemList);
         } else {
           $xeMenu.emitModel(itemKey);
+          reactData.isEnterCollapse = false;
+          internalData.lastActiveTime = Date.now();
         }
       }
       var params = {
         currentMenu: item,
+        currentOption: item.itemConf,
+        option: item.itemConf,
         // 已废弃
         menu: item
       };
@@ -376,29 +561,15 @@ var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defi
     handleMenuMouseenter: function handleMenuMouseenter() {
       var $xeMenu = this;
       var reactData = $xeMenu.reactData;
-      var collapseStyle = reactData.collapseStyle;
-      var collapseEnterWidth = $xeMenu.computeCollapseEnterWidth;
-      reactData.collapseStyle = Object.assign({}, collapseStyle, {
-        width: collapseEnterWidth ? (0, _dom.toCssUnit)(collapseEnterWidth) : ''
-      });
-      reactData.isEnterCollapse = true;
-    },
-    handleMenuMouseover: function handleMenuMouseover() {
-      var $xeMenu = this;
-      var reactData = $xeMenu.reactData;
-      var isEnterCollapse = reactData.isEnterCollapse;
-      if (!isEnterCollapse) {
-        $xeMenu.handleMenuMouseenter();
+      var internalData = $xeMenu.internalData;
+      var lastActiveTime = internalData.lastActiveTime;
+      if (lastActiveTime < Date.now() - 500) {
+        reactData.isEnterCollapse = true;
       }
     },
     handleMenuMouseleave: function handleMenuMouseleave() {
       var $xeMenu = this;
       var reactData = $xeMenu.reactData;
-      var collapseStyle = reactData.collapseStyle;
-      var el = $xeMenu.$refs.refElem;
-      reactData.collapseStyle = Object.assign({}, collapseStyle, {
-        width: el ? (0, _dom.toCssUnit)(el.offsetWidth) : ''
-      });
       reactData.isEnterCollapse = false;
     },
     //
@@ -419,9 +590,9 @@ var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defi
       var isCollapsed = $xeMenu.computeIsCollapsed;
       var params = {
         currentMenu: item,
-        collapsed: isCollapsed,
-        // 已废弃
-        option: item
+        currentOption: item.itemConf,
+        option: item.itemConf,
+        collapsed: isCollapsed
       };
       return [optionSlot ? (0, _ui.renderEmptyElement)($xeMenu) : h('div', {
         class: 'vxe-menu--item-link-icon'
@@ -448,6 +619,7 @@ var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defi
     renderDefaultChildren: function renderDefaultChildren(h, item, itemList) {
       var $xeMenu = this;
       var reactData = $xeMenu.reactData;
+      var internalData = $xeMenu.internalData;
       var itemId = item.itemId,
         itemKey = item.itemKey,
         level = item.level,
@@ -455,54 +627,61 @@ var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defi
         isActive = item.isActive,
         isExactActive = item.isExactActive,
         isExpand = item.isExpand,
+        linkUrl = item.linkUrl,
         routerLink = item.routerLink,
+        linkTarget = item.linkTarget,
         childList = item.childList;
       var isEnterCollapse = reactData.isEnterCollapse;
+      var menuInitMaps = internalData.menuInitMaps;
       var isCollapsed = $xeMenu.computeIsCollapsed;
       if (item.permissionCode) {
         if (!_ui.permission.checkVisible(item.permissionCode)) {
           return (0, _ui.renderEmptyElement)($xeMenu);
         }
       }
+      var isExpandChild = (!isCollapsed || isEnterCollapse) && isExpand;
+      var linkOns = {
+        contextmenu: function contextmenu(evnt) {
+          $xeMenu.handleContextmenuEvent(evnt, item);
+        },
+        click: function click(evnt) {
+          $xeMenu.handleClickMenu(evnt, item, itemList);
+        }
+      };
       return h('div', {
         key: itemKey,
         class: ['vxe-menu--item-wrapper', "vxe-menu--item-level".concat(level), {
+          'has--child': hasChild,
           'is--exact-active': isExactActive,
           'is--active': isActive,
-          'is--expand': (!isCollapsed || isEnterCollapse) && isExpand
+          'is--expand': isExpandChild
         }],
         attrs: {
           'data-menu-id': itemId
         }
-      }, [routerLink ? h('router-link', {
-        class: 'vxe-menu--item-link',
+      }, [linkUrl ? h('a', {
+        class: 'vxe-menu--item-link is--link',
+        attrs: {
+          href: linkUrl,
+          target: linkTarget
+        },
+        on: linkOns
+      }, $xeMenu.renderMenuTitle(h, item, itemList)) : routerLink ? h('router-link', {
+        class: 'vxe-menu--item-link is--router',
         props: {
           custom: true,
-          to: routerLink
+          to: routerLink,
+          target: linkTarget
         },
-        on: {
-          contextmenu: function contextmenu(evnt) {
-            $xeMenu.handleContextmenuEvent(evnt, item);
-          },
-          click: function click(evnt) {
-            $xeMenu.handleClickMenu(evnt, item, itemList);
-          }
-        }
+        on: linkOns
       }, $xeMenu.renderMenuTitle(h, item, itemList)) : h('div', {
-        class: 'vxe-menu--item-link',
-        on: {
-          contextmenu: function contextmenu(evnt) {
-            $xeMenu.handleContextmenuEvent(evnt, item);
-          },
-          click: function click(evnt) {
-            $xeMenu.handleClickMenu(evnt, item, itemList);
-          }
-        }
+        class: 'vxe-menu--item-link is--default',
+        on: linkOns
       }, $xeMenu.renderMenuTitle(h, item, itemList)), hasChild ? h('div', {
         class: 'vxe-menu--item-group'
-      }, childList.map(function (child) {
+      }, isExpandChild || menuInitMaps[itemId] ? childList.map(function (child) {
         return $xeMenu.renderDefaultChildren(h, child, childList);
-      })) : (0, _ui.renderEmptyElement)($xeMenu)]);
+      }) : []) : (0, _ui.renderEmptyElement)($xeMenu)]);
     },
     renderCollapseChildren: function renderCollapseChildren(h, item, itemList) {
       var $xeMenu = this;
@@ -513,45 +692,50 @@ var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defi
         isActive = item.isActive,
         isExactActive = item.isExactActive,
         routerLink = item.routerLink,
+        linkUrl = item.linkUrl,
+        linkTarget = item.linkTarget,
         childList = item.childList;
       if (item.permissionCode) {
         if (!_ui.permission.checkVisible(item.permissionCode)) {
           return (0, _ui.renderEmptyElement)($xeMenu);
         }
       }
+      var linkOns = {
+        contextmenu: function contextmenu(evnt) {
+          $xeMenu.handleContextmenuEvent(evnt, item);
+        },
+        click: function click(evnt) {
+          $xeMenu.handleClickMenu(evnt, item, itemList);
+        }
+      };
       return h('div', {
         key: itemKey,
         class: ['vxe-menu--item-wrapper', "vxe-menu--item-level".concat(level), {
+          'has--child': hasChild,
           'is--exact-active': isExactActive,
           'is--active': isActive
         }],
         attrs: {
           'data-menu-id': itemId
         }
-      }, [routerLink ? h('router-link', {
-        class: 'vxe-menu--item-link',
+      }, [linkUrl ? h('a', {
+        class: 'vxe-menu--item-link is--link',
+        attrs: {
+          href: linkUrl,
+          target: linkTarget
+        },
+        on: linkOns
+      }, $xeMenu.renderMenuTitle(h, item, itemList)) : routerLink ? h('router-link', {
+        class: 'vxe-menu--item-link is--router',
         props: {
           custom: true,
-          to: routerLink
+          to: routerLink,
+          target: linkTarget
         },
-        on: {
-          contextmenu: function contextmenu(evnt) {
-            $xeMenu.handleContextmenuEvent(evnt, item);
-          },
-          click: function click(evnt) {
-            $xeMenu.handleClickMenu(evnt, item, itemList);
-          }
-        }
+        on: linkOns
       }, $xeMenu.renderMenuTitle(h, item, itemList)) : h('div', {
-        class: 'vxe-menu--item-link',
-        on: {
-          contextmenu: function contextmenu(evnt) {
-            $xeMenu.handleContextmenuEvent(evnt, item);
-          },
-          click: function click(evnt) {
-            $xeMenu.handleClickMenu(evnt, item, itemList);
-          }
-        }
+        class: 'vxe-menu--item-link is--default',
+        on: linkOns
       }, $xeMenu.renderMenuTitle(h, item, itemList)), hasChild ? h('div', {
         class: 'vxe-menu--item-group'
       }, childList.map(function (child) {
@@ -561,6 +745,7 @@ var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defi
     renderVN: function renderVN(h) {
       var $xeMenu = this;
       var props = $xeMenu;
+      var slots = $xeMenu.$scopedSlots;
       var reactData = $xeMenu.reactData;
       var loading = props.loading,
         collapseFixed = props.collapseFixed;
@@ -570,31 +755,45 @@ var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defi
         isEnterCollapse = reactData.isEnterCollapse;
       var vSize = $xeMenu.computeSize;
       var isCollapsed = $xeMenu.computeIsCollapsed;
+      var currBorder = $xeMenu.computeCurrBorder;
+      var varStyle = $xeMenu.computeVarStyle;
+      var headerSlot = slots.header;
+      var footerSlot = slots.footer;
       var ons = {};
       if (collapseFixed) {
         ons = {
           mouseenter: $xeMenu.handleMenuMouseenter,
-          mouseover: $xeMenu.handleMenuMouseover,
           mouseleave: $xeMenu.handleMenuMouseleave
         };
       }
+      var stParams = {
+        collapsed: isCollapsed
+      };
       return h('div', {
         ref: 'refElem',
-        class: ['vxe-menu', _defineProperty(_defineProperty(_defineProperty({}, "size--".concat(vSize), vSize), 'is--collapsed', isCollapsed), 'is--loading', loading)]
-      }, [h('div', {
-        class: 'vxe-menu--item-list'
+        class: ['vxe-menu', _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "border--".concat(currBorder), currBorder), "size--".concat(vSize), vSize), 'is--collapsed', isCollapsed), 'is--loading', loading)]
+      }, [headerSlot ? h('div', {
+        class: 'vxe-menu--header'
+      }, headerSlot(stParams)) : (0, _ui.renderEmptyElement)($xeMenu), h('div', {
+        class: 'vxe-menu--body'
       }, menuList.map(function (child) {
         return isCollapsed ? $xeMenu.renderCollapseChildren(h, child, menuList) : $xeMenu.renderDefaultChildren(h, child, menuList);
-      })), initialized ? h('div', {
+      })), footerSlot ? h('div', {
+        class: 'vxe-menu--footer'
+      }, footerSlot(stParams)) : (0, _ui.renderEmptyElement)($xeMenu), initialized ? h('div', {
         ref: 'refCollapseElem',
         class: ['vxe-menu--collapse-wrapper', _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "size--".concat(vSize), vSize), 'is--collapsed', isCollapsed), 'is--enter', isEnterCollapse), 'is--loading', loading)],
-        style: collapseStyle,
+        style: Object.assign({}, varStyle, collapseStyle),
         on: ons
-      }, [isCollapsed ? h('div', {
-        class: 'vxe-menu--item-list'
+      }, isCollapsed ? [headerSlot ? h('div', {
+        class: 'vxe-menu--header'
+      }, headerSlot(stParams)) : (0, _ui.renderEmptyElement)($xeMenu), h('div', {
+        class: 'vxe-menu--body'
       }, menuList.map(function (child) {
         return $xeMenu.renderDefaultChildren(h, child, menuList);
-      })) : (0, _ui.renderEmptyElement)($xeMenu)]) : (0, _ui.renderEmptyElement)($xeMenu),
+      })), footerSlot ? h('div', {
+        class: 'vxe-menu--footer'
+      }, footerSlot(stParams)) : (0, _ui.renderEmptyElement)($xeMenu)] : []) : (0, _ui.renderEmptyElement)($xeMenu),
       /**
        * 加载中
        */