vxe-pc-ui 3.16.10 → 3.16.12

package/es/layout-aside/style.css

@@ -3,14 +3,12 @@
   display: flex;
   flex-direction: column;
   flex-shrink: 0;
+  width: var(--vxe-ui-layout-aside-default-width);
   overflow: hidden;
 }
 .vxe-layout-aside.is--animat {
   transition: width 0.3s;
 }
-.vxe-layout-aside.is--default-width {
-  width: var(--vxe-ui-layout-aside-default-width);
-}
 .vxe-layout-aside.is--collapse {
   width: var(--vxe-ui-layout-aside-collapse-width);
 }

package/es/layout-aside/style.min.css

@@ -1 +1 @@
-.vxe-layout-aside{position:relative;display:flex;flex-direction:column;flex-shrink:0;overflow:hidden}.vxe-layout-aside.is--animat{transition:width .3s}.vxe-layout-aside.is--default-width{width:var(--vxe-ui-layout-aside-default-width)}.vxe-layout-aside.is--collapse{width:var(--vxe-ui-layout-aside-collapse-width)}.vxe-layout-aside.is--padding{padding:var(--vxe-ui-layout-padding-default)}.vxe-layout-aside--inner{flex-grow:1;overflow-y:auto;overflow-x:hidden;outline:0}
+.vxe-layout-aside{position:relative;display:flex;flex-direction:column;flex-shrink:0;width:var(--vxe-ui-layout-aside-default-width);overflow:hidden}.vxe-layout-aside.is--animat{transition:width .3s}.vxe-layout-aside.is--collapse{width:var(--vxe-ui-layout-aside-collapse-width)}.vxe-layout-aside.is--padding{padding:var(--vxe-ui-layout-padding-default)}.vxe-layout-aside--inner{flex-grow:1;overflow-y:auto;overflow-x:hidden;outline:0}

package/es/menu/src/menu.js

@@ -1,7 +1,7 @@
 import { defineVxeComponent } from '../../ui/src/comp';
 import XEUtils from 'xe-utils';
 import { VxeUI, createEvent, permission, globalMixins, 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';
@@ -10,6 +10,10 @@ const { errLog } = createComponentLog('menu');
 const { menus, getConfig, getIcon } = VxeUI;
 function createInternalData() {
     return {
+        lastActiveTime: 0,
+        menuInitMaps: {},
+        menuCacheMaps: {},
+        menuKeyMaps: {},
         menuEffectMaps: {}
     };
 }
@@ -34,10 +38,19 @@ export default {
     props: {
         value: [String, Number],
         expandAll: Boolean,
+        expandKeys: Array,
         accordion: {
             type: Boolean,
             default: () => getConfig().menu.accordion
         },
+        border: {
+            type: [Boolean, String],
+            default: () => getConfig().menu.border
+        },
+        optionProps: {
+            type: Object,
+            default: () => getConfig().menu.optionProps
+        },
         collapsed: {
             type: Boolean,
             default: null
@@ -63,7 +76,46 @@ export default {
         const reactData = createReactData();
         return Object.assign(Object.assign({}, {}), { xID: XEUtils.uniqueId(), reactData });
     },
-    computed: Object.assign(Object.assign({}, {}), { computeMenuOpts() {
+    computed: Object.assign(Object.assign({}, {}), { computePropsOpts() {
+            const $xeMenu = this;
+            const props = $xeMenu;
+            return Object.assign({}, getConfig().menu.optionProps, props.optionProps);
+        },
+        computeTitleField() {
+            const $xeMenu = this;
+            const propsOpts = $xeMenu.computePropsOpts;
+            return propsOpts.title || 'title';
+        },
+        computeKeyField() {
+            const $xeMenu = this;
+            const propsOpts = $xeMenu.computePropsOpts;
+            return propsOpts.name || 'name';
+        },
+        computeChildrenField() {
+            const $xeMenu = this;
+            const propsOpts = $xeMenu.computePropsOpts;
+            return propsOpts.children || 'children';
+        },
+        computeLinkUrlField() {
+            const $xeMenu = this;
+            const propsOpts = $xeMenu.computePropsOpts;
+            return propsOpts.linkUrl || 'href';
+        },
+        computeRouterLinkField() {
+            const $xeMenu = this;
+            const propsOpts = $xeMenu.computePropsOpts;
+            return propsOpts.routerLink || 'routerLink';
+        },
+        computeCurrBorder() {
+            const $xeMenu = this;
+            const props = $xeMenu;
+            const { border } = props;
+            if (border) {
+                return border === true ? 'first-group' : border;
+            }
+            return '';
+        },
+        computeMenuOpts() {
             const $xeMenu = this;
             const props = $xeMenu;
             return Object.assign({}, getConfig().tree.menuConfig, props.menuConfig);
@@ -80,14 +132,14 @@ export default {
             }
             return false;
         },
-        computeCollapseWidth() {
+        computeVarStyle() {
             const $xeMenu = this;
             const $xeLayoutAside = $xeMenu.$xeLayoutAside;
-            let collapseWidth = '';
             if ($xeLayoutAside) {
-                collapseWidth = $xeLayoutAside.collapseWidth || '';
+                const asideVarStyle = $xeLayoutAside.computeVarStyle;
+                return asideVarStyle;
             }
-            return collapseWidth;
+            return {};
         },
         computeCollapseEnterWidth() {
             const $xeMenu = this;
@@ -132,6 +184,77 @@ export default {
             }
             return [];
         },
+        setExpandByMenuKey(menuKeys, expanded) {
+            const $xeMenu = this;
+            const internalData = $xeMenu.internalData;
+            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 $xeMenu.$nextTick();
+        },
+        clearAllExpandMenu() {
+            const $xeMenu = this;
+            const reactData = $xeMenu.reactData;
+            const internalData = $xeMenu.internalData;
+            const { menuList } = reactData;
+            XEUtils.eachTree(menuList, (item) => {
+                item.isExpand = false;
+            }, { children: 'childList' });
+            internalData.menuInitMaps = {};
+            return $xeMenu.$nextTick();
+        },
+        handleScrollToView(itemId) {
+            const $xeMenu = this;
+            const el = $xeMenu.$refs.refElem;
+            const nemuEl = el ? el.querySelector(`.vxe-menu--item-wrapper[data-menu-id="${itemId}"]`) : null;
+            if (nemuEl) {
+                scrollToView(nemuEl);
+                return true;
+            }
+            return false;
+        },
+        scrollToMenuKey(menuKey) {
+            const $xeMenu = this;
+            const internalData = $xeMenu.internalData;
+            const { menuKeyMaps } = internalData;
+            const menuItem = menuKeyMaps[menuKey];
+            if (!menuItem) {
+                return $xeMenu.$nextTick();
+            }
+            const { itemId } = menuItem;
+            if ($xeMenu.handleScrollToView(itemId)) {
+                return $xeMenu.$nextTick();
+            }
+            return $xeMenu.$nextTick().then(() => {
+                $xeMenu.handleScrollToView(itemId);
+            });
+        },
+        scrollToActiveMenu() {
+            const $xeMenu = this;
+            const reactData = $xeMenu.reactData;
+            const { activeName } = reactData;
+            if (activeName) {
+                return $xeMenu.scrollToMenuKey(activeName);
+            }
+            return $xeMenu.$nextTick().then(() => {
+                const { activeName } = reactData;
+                if (activeName) {
+                    return $xeMenu.scrollToMenuKey(activeName);
+                }
+            });
+        },
         getMenuTitle(item) {
             return `${item.title || item.name}`;
         },
@@ -145,13 +268,16 @@ export default {
         updateActiveMenu(isDefExpand) {
             const $xeMenu = this;
             const reactData = $xeMenu.reactData;
+            const internalData = $xeMenu.internalData;
             const { activeName } = reactData;
+            const { menuInitMaps } = internalData;
             XEUtils.eachTree(reactData.menuList, (item, index, items, path, parent, nodes) => {
                 if (item.itemKey === activeName) {
                     nodes.forEach(obj => {
                         obj.isActive = true;
                         if (isDefExpand) {
                             obj.isExpand = true;
+                            menuInitMaps[obj.itemId] = true;
                         }
                     });
                     item.isExactActive = true;
@@ -166,11 +292,62 @@ export default {
             const $xeMenu = this;
             const props = $xeMenu;
             const reactData = $xeMenu.reactData;
-            const { options, expandAll } = props;
-            reactData.menuList = XEUtils.mapTree(options, (item, index, items, path, parent) => {
-                const objItem = Object.assign(Object.assign({}, item), { parentKey: parent ? (parent.name || path.slice(0, path.length - 1).join(',')) : '', level: path.length, itemId: ++nemuUniqueKey, itemKey: item.name || path.join(','), isExactActive: false, isActive: false, isExpand: XEUtils.isBoolean(item.expanded) ? item.expanded : !!expandAll, hasChild: item.children && item.children.length > 0 });
+            const internalData = $xeMenu.internalData;
+            const { options, expandAll, expandKeys } = props;
+            const muInitMaps = {};
+            const titleField = $xeMenu.computeTitleField;
+            const keyField = $xeMenu.computeKeyField;
+            const childrenField = $xeMenu.computeChildrenField;
+            const linkUrlField = $xeMenu.computeLinkUrlField;
+            const routerLinkField = $xeMenu.computeRouterLinkField;
+            const defaultExpandMaps = {};
+            if (expandKeys) {
+                expandKeys.forEach(key => {
+                    defaultExpandMaps[key] = true;
+                });
+            }
+            const muCacheMaps = {};
+            const muKeyMaps = {};
+            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 = {
+                    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,
+                    itemKey,
+                    isExactActive: false,
+                    isActive: false,
+                    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;
         },
         updateCollapseStyle() {
             const $xeMenu = this;
@@ -179,10 +356,7 @@ export default {
             const { collapseFixed } = props;
             if (collapseFixed) {
                 $xeMenu.$nextTick(() => {
-                    const { isEnterCollapse } = reactData;
                     const isCollapsed = $xeMenu.computeIsCollapsed;
-                    const collapseEnterWidth = $xeMenu.computeCollapseEnterWidth;
-                    const collapseWidth = $xeMenu.computeCollapseWidth;
                     const el = $xeMenu.$refs.refElem;
                     if (el) {
                         const clientRect = el.getBoundingClientRect();
@@ -192,7 +366,6 @@ export default {
                                 top: toCssUnit(clientRect.top),
                                 left: toCssUnit(clientRect.left),
                                 height: toCssUnit(parentNode.clientHeight),
-                                width: isEnterCollapse ? (collapseEnterWidth ? toCssUnit(collapseEnterWidth) : '') : (collapseWidth ? toCssUnit(collapseWidth) : ''),
                                 zIndex: reactData.collapseZindex
                             }
                             : {};
@@ -229,7 +402,7 @@ export default {
             const props = $xeMenu;
             const internalData = $xeMenu.internalData;
             const { accordion } = props;
-            const { menuEffectMaps } = internalData;
+            const { menuEffectMaps, menuInitMaps } = internalData;
             const { itemId, hasChild, isExpand } = item;
             const isCollapsed = $xeMenu.computeIsCollapsed;
             const expanded = !isExpand;
@@ -247,6 +420,7 @@ export default {
                     });
                 }
                 item.isExpand = expanded;
+                menuInitMaps[itemId] = true;
                 const wrapperEl = isCollapsed ? $xeMenu.$refs.refCollapseElem : $xeMenu.$refs.refElem;
                 if (wrapperEl) {
                     const nemuEl = wrapperEl.querySelector(`.vxe-menu--item-wrapper[data-menu-id="${itemId}"]`);
@@ -282,7 +456,7 @@ export default {
             const menuOpts = $xeMenu.computeMenuOpts;
             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,
@@ -291,7 +465,7 @@ export default {
                                     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);
                                     }
@@ -306,9 +480,13 @@ export default {
         },
         handleClickMenu(evnt, item, itemList) {
             const $xeMenu = this;
-            const { itemKey, routerLink, hasChild } = item;
-            if (routerLink) {
+            const reactData = $xeMenu.reactData;
+            const internalData = $xeMenu.internalData;
+            const { itemKey, linkUrl, routerLink, hasChild } = item;
+            if (linkUrl || routerLink) {
                 $xeMenu.emitModel(itemKey);
+                reactData.isEnterCollapse = false;
+                internalData.lastActiveTime = Date.now();
             }
             else {
                 if (hasChild) {
@@ -316,10 +494,14 @@ export default {
                 }
                 else {
                     $xeMenu.emitModel(itemKey);
+                    reactData.isEnterCollapse = false;
+                    internalData.lastActiveTime = Date.now();
                 }
             }
             const params = {
                 currentMenu: item,
+                currentOption: item.itemConf,
+                option: item.itemConf,
                 // 已废弃
                 menu: item
             };
@@ -328,29 +510,15 @@ export default {
         handleMenuMouseenter() {
             const $xeMenu = this;
             const reactData = $xeMenu.reactData;
-            const { collapseStyle } = reactData;
-            const collapseEnterWidth = $xeMenu.computeCollapseEnterWidth;
-            reactData.collapseStyle = Object.assign({}, collapseStyle, {
-                width: collapseEnterWidth ? toCssUnit(collapseEnterWidth) : ''
-            });
-            reactData.isEnterCollapse = true;
-        },
-        handleMenuMouseover() {
-            const $xeMenu = this;
-            const reactData = $xeMenu.reactData;
-            const { isEnterCollapse } = reactData;
-            if (!isEnterCollapse) {
-                $xeMenu.handleMenuMouseenter();
+            const internalData = $xeMenu.internalData;
+            const { lastActiveTime } = internalData;
+            if (lastActiveTime < Date.now() - 500) {
+                reactData.isEnterCollapse = true;
             }
         },
         handleMenuMouseleave() {
             const $xeMenu = this;
             const reactData = $xeMenu.reactData;
-            const { collapseStyle } = reactData;
-            const el = $xeMenu.$refs.refElem;
-            reactData.collapseStyle = Object.assign({}, collapseStyle, {
-                width: el ? toCssUnit(el.offsetWidth) : ''
-            });
             reactData.isEnterCollapse = false;
         },
         //
@@ -369,9 +537,9 @@ export default {
             const isCollapsed = $xeMenu.computeIsCollapsed;
             const params = {
                 currentMenu: item,
-                collapsed: isCollapsed,
-                // 已废弃
-                option: item
+                currentOption: item.itemConf,
+                option: item.itemConf,
+                collapsed: isCollapsed
             };
             return [
                 optionSlot
@@ -414,70 +582,87 @@ export default {
         renderDefaultChildren(h, item, itemList) {
             const $xeMenu = this;
             const reactData = $xeMenu.reactData;
-            const { itemId, itemKey, level, hasChild, isActive, isExactActive, isExpand, routerLink, childList } = item;
+            const internalData = $xeMenu.internalData;
+            const { itemId, itemKey, level, hasChild, isActive, isExactActive, isExpand, linkUrl, routerLink, linkTarget, childList } = item;
             const { isEnterCollapse } = reactData;
+            const { menuInitMaps } = internalData;
             const isCollapsed = $xeMenu.computeIsCollapsed;
             if (item.permissionCode) {
                 if (!permission.checkVisible(item.permissionCode)) {
                     return renderEmptyElement($xeMenu);
                 }
             }
+            const isExpandChild = (!isCollapsed || isEnterCollapse) && isExpand;
+            const linkOns = {
+                contextmenu(evnt) {
+                    $xeMenu.handleContextmenuEvent(evnt, item);
+                },
+                click(evnt) {
+                    $xeMenu.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
                     }],
                 attrs: {
                     'data-menu-id': itemId
                 }
             }, [
-                routerLink
-                    ? h('router-link', {
-                        class: 'vxe-menu--item-link',
-                        props: {
-                            custom: true,
-                            to: routerLink
+                linkUrl
+                    ? h('a', {
+                        class: 'vxe-menu--item-link is--link',
+                        attrs: {
+                            href: linkUrl,
+                            target: linkTarget
                         },
-                        on: {
-                            contextmenu(evnt) {
-                                $xeMenu.handleContextmenuEvent(evnt, item);
-                            },
-                            click(evnt) {
-                                $xeMenu.handleClickMenu(evnt, item, itemList);
-                            }
-                        }
+                        on: linkOns
                     }, $xeMenu.renderMenuTitle(h, item, itemList))
-                    : h('div', {
-                        class: 'vxe-menu--item-link',
-                        on: {
-                            contextmenu(evnt) {
-                                $xeMenu.handleContextmenuEvent(evnt, item);
+                    : (routerLink
+                        ? h('router-link', {
+                            class: 'vxe-menu--item-link is--router',
+                            props: {
+                                custom: true,
+                                to: routerLink,
+                                target: linkTarget
                             },
-                            click(evnt) {
-                                $xeMenu.handleClickMenu(evnt, item, itemList);
-                            }
-                        }
-                    }, $xeMenu.renderMenuTitle(h, item, itemList)),
+                            on: linkOns
+                        }, $xeMenu.renderMenuTitle(h, item, itemList))
+                        : h('div', {
+                            class: 'vxe-menu--item-link is--default',
+                            on: linkOns
+                        }, $xeMenu.renderMenuTitle(h, item, itemList))),
                 hasChild
                     ? h('div', {
                         class: 'vxe-menu--item-group'
-                    }, childList.map(child => $xeMenu.renderDefaultChildren(h, child, childList)))
+                    }, isExpandChild || menuInitMaps[itemId] ? childList.map(child => $xeMenu.renderDefaultChildren(h, child, childList)) : [])
                     : renderEmptyElement($xeMenu)
             ]);
         },
         renderCollapseChildren(h, item, itemList) {
             const $xeMenu = this;
-            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 = {
+                contextmenu(evnt) {
+                    $xeMenu.handleContextmenuEvent(evnt, item);
+                },
+                click(evnt) {
+                    $xeMenu.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
                     }],
@@ -485,33 +670,29 @@ export default {
                     'data-menu-id': itemId
                 }
             }, [
-                routerLink
-                    ? h('router-link', {
-                        class: 'vxe-menu--item-link',
-                        props: {
-                            custom: true,
-                            to: routerLink
+                linkUrl
+                    ? h('a', {
+                        class: 'vxe-menu--item-link is--link',
+                        attrs: {
+                            href: linkUrl,
+                            target: linkTarget
                         },
-                        on: {
-                            contextmenu(evnt) {
-                                $xeMenu.handleContextmenuEvent(evnt, item);
-                            },
-                            click(evnt) {
-                                $xeMenu.handleClickMenu(evnt, item, itemList);
-                            }
-                        }
+                        on: linkOns
                     }, $xeMenu.renderMenuTitle(h, item, itemList))
-                    : h('div', {
-                        class: 'vxe-menu--item-link',
-                        on: {
-                            contextmenu(evnt) {
-                                $xeMenu.handleContextmenuEvent(evnt, item);
+                    : (routerLink
+                        ? h('router-link', {
+                            class: 'vxe-menu--item-link is--router',
+                            props: {
+                                custom: true,
+                                to: routerLink,
+                                target: linkTarget
                             },
-                            click(evnt) {
-                                $xeMenu.handleClickMenu(evnt, item, itemList);
-                            }
-                        }
-                    }, $xeMenu.renderMenuTitle(h, item, itemList)),
+                            on: linkOns
+                        }, $xeMenu.renderMenuTitle(h, item, itemList))
+                        : h('div', {
+                            class: 'vxe-menu--item-link is--default',
+                            on: linkOns
+                        }, $xeMenu.renderMenuTitle(h, item, itemList))),
                 hasChild
                     ? h('div', {
                         class: 'vxe-menu--item-group'
@@ -522,30 +703,46 @@ export default {
         renderVN(h) {
             const $xeMenu = this;
             const props = $xeMenu;
+            const slots = $xeMenu.$scopedSlots;
             const reactData = $xeMenu.reactData;
             const { loading, collapseFixed } = props;
             const { initialized, menuList, collapseStyle, isEnterCollapse } = reactData;
             const vSize = $xeMenu.computeSize;
             const isCollapsed = $xeMenu.computeIsCollapsed;
+            const currBorder = $xeMenu.computeCurrBorder;
+            const varStyle = $xeMenu.computeVarStyle;
+            const headerSlot = slots.header;
+            const footerSlot = slots.footer;
             let ons = {};
             if (collapseFixed) {
                 ons = {
                     mouseenter: $xeMenu.handleMenuMouseenter,
-                    mouseover: $xeMenu.handleMenuMouseover,
                     mouseleave: $xeMenu.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 ? $xeMenu.renderCollapseChildren(h, child, menuList) : $xeMenu.renderDefaultChildren(h, child, menuList))),
+                footerSlot
+                    ? h('div', {
+                        class: 'vxe-menu--footer'
+                    }, footerSlot(stParams))
+                    : renderEmptyElement($xeMenu),
                 initialized
                     ? h('div', {
                         ref: 'refCollapseElem',
@@ -555,15 +752,25 @@ export default {
                                 'is--enter': isEnterCollapse,
                                 'is--loading': loading
                             }],
-                        style: collapseStyle,
+                        style: Object.assign({}, varStyle, collapseStyle),
                         on: ons
-                    }, [
-                        isCollapsed
-                            ? h('div', {
-                                class: 'vxe-menu--item-list'
-                            }, menuList.map(child => $xeMenu.renderDefaultChildren(h, child, menuList)))
-                            : renderEmptyElement($xeMenu)
-                    ])
+                    }, isCollapsed
+                        ? [
+                            headerSlot
+                                ? h('div', {
+                                    class: 'vxe-menu--header'
+                                }, headerSlot(stParams))
+                                : renderEmptyElement($xeMenu),
+                            h('div', {
+                                class: 'vxe-menu--body'
+                            }, menuList.map(child => $xeMenu.renderDefaultChildren(h, child, menuList))),
+                            footerSlot
+                                ? h('div', {
+                                    class: 'vxe-menu--footer'
+                                }, footerSlot(stParams))
+                                : renderEmptyElement($xeMenu)
+                        ]
+                        : [])
                     : renderEmptyElement($xeMenu),
                 /**
                  * 加载中