vxe-pc-ui 3.9.0 → 3.9.2

package/es/split/src/split.js

@@ -4,7 +4,7 @@ import { getConfig, getIcon, createEvent, globalEvents, globalMixins, globalResi
 import { getSlotVNs } from '../../ui/src/vn';
 import { toCssUnit, isScale, addClass, removeClass } from '../../ui/src/dom';
 import { getGlobalDefaultConfig } from '../../ui/src/utils';
-import { errLog } from '../../ui/src/log';
+import { warnLog, errLog } from '../../ui/src/log';
 export default {
     name: 'VxeSplit',
     mixins: [
@@ -39,7 +39,9 @@ export default {
         const xID = XEUtils.uniqueId();
         const reactData = {
             staticItems: [],
-            itemList: []
+            itemList: [],
+            barWidth: 0,
+            barHeight: 0
         };
         const internalData = {
             wrapperWidth: 0,
@@ -86,7 +88,7 @@ export default {
         computeVisibleItems() {
             const $xeSplit = this;
             const reactData = $xeSplit.reactData;
-            return reactData.itemList.filter(item => item.isVisible);
+            return reactData.itemList.filter(item => item.isExpand);
         },
         computeAutoItems() {
             const $xeSplit = this;
@@ -136,10 +138,20 @@ export default {
             const $xeSplit = this;
             const props = $xeSplit;
             const reactData = $xeSplit.reactData;
+            const actionOpts = $xeSplit.computeActionOpts;
+            const { showPrevButton, showNextButton } = actionOpts;
             if (props.items && props.items.length) {
                 errLog('vxe.error.errConflicts', ['<vxe-split-pane ...>', 'items']);
             }
-            reactData.itemList = reactData.staticItems;
+            reactData.itemList = reactData.staticItems || [];
+            if ((showPrevButton || showNextButton) && reactData.itemList.length > 2) {
+                errLog('vxe.error.modelConflicts', ['action-config.showPrevButton | action-config.showNextButton', '<vxe-split-pane ...> Only supports 2 panel']);
+            }
+            reactData.itemList.forEach(item => {
+                if (item.showAction) {
+                    warnLog('vxe.error.removeProp', ['showAction']);
+                }
+            });
             $xeSplit.recalculate();
         }
     },
@@ -170,7 +182,6 @@ export default {
             const { itemList } = reactData;
             itemList.forEach(item => {
                 item.isExpand = true;
-                item.isVisible = true;
                 item.foldHeight = 0;
                 item.foldWidth = 0;
                 item.resizeHeight = 0;
@@ -184,7 +195,6 @@ export default {
             const reactData = $xeSplit.reactData;
             const { staticItems } = reactData;
             const itemDef = {
-                isVisible: true,
                 isExpand: true,
                 renderWidth: 0,
                 resizeWidth: 0,
@@ -229,6 +239,7 @@ export default {
                 const { vertical } = props;
                 const { itemList } = reactData;
                 const el = $xeSplit.$refs.refElem;
+                const barInfoElem = $xeSplit.$refs.refBarInfoElem;
                 if (!el) {
                     return;
                 }
@@ -237,6 +248,12 @@ export default {
                 if (!wWidth || !wHeight) {
                     return;
                 }
+                if (barInfoElem) {
+                    reactData.barWidth = barInfoElem.offsetWidth;
+                    reactData.barHeight = barInfoElem.offsetHeight;
+                }
+                const contentWidth = wWidth - (vertical ? 0 : reactData.barWidth * (itemList.length - 1));
+                const contentHeight = wHeight - (vertical ? reactData.barHeight * (itemList.length - 1) : 0);
                 const itemOpts = $xeSplit.computeItemOpts;
                 const allMinWidth = XEUtils.toNumber(itemOpts.minWidth);
                 const allMinHeight = XEUtils.toNumber(itemOpts.minHeight);
@@ -248,7 +265,7 @@ export default {
                         let itemHeight = 0;
                         if (height) {
                             if (isScale(height)) {
-                                itemHeight = wHeight * XEUtils.toNumber(height) / 100;
+                                itemHeight = contentHeight * XEUtils.toNumber(height) / 100;
                             }
                             else {
                                 itemHeight = XEUtils.toNumber(height);
@@ -261,7 +278,7 @@ export default {
                         countHeight += itemHeight;
                     });
                     if (residueItems.length) {
-                        const reMeanHeight = (wHeight - countHeight) / residueItems.length;
+                        const reMeanHeight = (contentHeight - countHeight) / residueItems.length;
                         residueItems.forEach(item => {
                             item.renderHeight = Math.max(XEUtils.toNumber(getGlobalDefaultConfig(item.minHeight, allMinHeight)), reMeanHeight);
                         });
@@ -274,7 +291,7 @@ export default {
                         let itemWidth = 0;
                         if (width) {
                             if (isScale(width)) {
-                                itemWidth = wWidth * XEUtils.toNumber(width) / 100;
+                                itemWidth = contentWidth * XEUtils.toNumber(width) / 100;
                             }
                             else {
                                 itemWidth = XEUtils.toNumber(width);
@@ -287,14 +304,14 @@ export default {
                         countWidth += itemWidth;
                     });
                     if (residueItems.length) {
-                        const reMeanWidth = (wWidth - countWidth) / residueItems.length;
+                        const reMeanWidth = (contentWidth - countWidth) / residueItems.length;
                         residueItems.forEach(item => {
                             item.renderWidth = Math.max(XEUtils.toNumber(getGlobalDefaultConfig(item.minWidth, allMinWidth)), reMeanWidth);
                         });
                     }
                 }
-                internalData.wrapperWidth = wWidth;
-                internalData.wrapperHeight = wHeight;
+                internalData.wrapperWidth = contentWidth;
+                internalData.wrapperHeight = contentHeight;
             });
         },
         dragEvent(evnt) {
@@ -313,33 +330,27 @@ export default {
             if (!el) {
                 return;
             }
-            const itemId = handleEl.getAttribute('itemid');
-            const itemIndex = XEUtils.findIndexOf(itemList, item => item.id === itemId);
-            const item = itemList[itemIndex];
-            if (!item) {
+            const prevEl = handleEl.previousElementSibling;
+            const nextEl = handleEl.nextElementSibling;
+            if (!prevEl || !nextEl) {
                 return;
             }
-            if (!item.isExpand) {
+            const prevId = prevEl.getAttribute('itemid');
+            const nextId = nextEl.getAttribute('itemid');
+            const prevItem = itemList.find(item => item.id === prevId);
+            const nextItem = itemList.find(item => item.id === nextId);
+            if (!prevItem || !nextItem) {
                 return;
             }
             const containerRect = el.getBoundingClientRect();
             const barRect = barEl.getBoundingClientRect();
             const rsSplitLineEl = $xeSplit.$refs.refResizableSplitTip;
             const rsSplitTipEl = rsSplitLineEl ? rsSplitLineEl.children[0] : null;
-            const isFoldNext = $xeSplit.computeIsFoldNext;
             const itemOpts = $xeSplit.computeItemOpts;
             const resizeOpts = $xeSplit.computeResizeOpts;
             const { immediate } = resizeOpts;
             const allMinWidth = XEUtils.toNumber(itemOpts.minWidth);
             const allMinHeight = XEUtils.toNumber(itemOpts.minHeight);
-            const targetItem = itemList[itemIndex + (isFoldNext ? 1 : -1)];
-            const prevItem = itemList[itemIndex + (isFoldNext ? 0 : -1)];
-            const nextItem = itemList[itemIndex + (isFoldNext ? 1 : 0)];
-            const prevEl = targetItem ? el.querySelector(`.vxe-split-pane[itemid="${prevItem.id}"]`) : null;
-            const nextEl = item ? el.querySelector(`.vxe-split-pane[itemid="${nextItem.id}"]`) : null;
-            if (!prevEl || !nextEl) {
-                return;
-            }
             const barOffsetX = Math.ceil(barRect.width - (evnt.clientX - barRect.left));
             const barOffsetY = Math.ceil(evnt.clientY - barRect.top);
             const prevWidth = prevEl.offsetWidth;
@@ -483,7 +494,7 @@ export default {
                 if (rsSplitLineEl) {
                     handleReStyle(evnt);
                 }
-                $xeSplit.dispatchEvent('resize-drag', { item, name: item.name, prevItem, nextItem, offsetHeight: targetOffsetHeight, offsetWidth: targetOffsetWidth }, evnt);
+                $xeSplit.dispatchEvent('resize-drag', { prevItem, nextItem, offsetHeight: targetOffsetHeight, offsetWidth: targetOffsetWidth }, evnt);
             };
             document.onmousemove = (evnt) => {
                 evnt.preventDefault();
@@ -497,7 +508,7 @@ export default {
                 }
                 handleUpdate();
                 removeClass(el, 'is--drag');
-                $xeSplit.dispatchEvent('resize-end', { item, name: item.name, prevItem, nextItem, offsetHeight: targetOffsetHeight, offsetWidth: targetOffsetWidth }, evnt);
+                $xeSplit.dispatchEvent('resize-end', { prevItem, nextItem, offsetHeight: targetOffsetHeight, offsetWidth: targetOffsetWidth }, evnt);
                 $xeSplit.recalculate();
             };
             if (rsSplitLineEl) {
@@ -506,140 +517,193 @@ export default {
             }
             handleDrag(evnt);
             addClass(el, 'is--drag');
-            $xeSplit.dispatchEvent('resize-start', { item, name: item.name, prevItem, nextItem }, evnt);
+            $xeSplit.dispatchEvent('resize-start', { prevItem, nextItem }, evnt);
         },
-        handleItemActionEvent(evnt) {
+        handleItemActionEvent(evnt, prevItem, nextItem, isNext) {
             const $xeSplit = this;
             const props = $xeSplit;
+            const { vertical } = props;
+            let expanded = false;
+            let item = prevItem;
+            if (isNext) {
+                item = nextItem;
+                expanded = !nextItem.isExpand;
+                nextItem.isExpand = expanded;
+            }
+            else {
+                expanded = !prevItem.isExpand;
+                prevItem.isExpand = expanded;
+            }
+            if (vertical) {
+                if (prevItem.isExpand && nextItem.isExpand) {
+                    prevItem.foldHeight = 0;
+                    nextItem.foldHeight = 0;
+                }
+                else if (prevItem.isExpand) {
+                    nextItem.foldHeight = 0;
+                    prevItem.foldHeight = (prevItem.resizeHeight || prevItem.renderHeight) + (nextItem.resizeHeight || nextItem.renderHeight);
+                }
+                else {
+                    prevItem.foldHeight = 0;
+                    nextItem.foldHeight = (prevItem.resizeHeight || prevItem.renderHeight) + (nextItem.resizeHeight || nextItem.renderHeight);
+                }
+            }
+            else {
+                if (prevItem.isExpand && nextItem.isExpand) {
+                    prevItem.foldWidth = 0;
+                    nextItem.foldWidth = 0;
+                }
+                else if (prevItem.isExpand) {
+                    nextItem.foldWidth = 0;
+                    prevItem.foldWidth = (prevItem.resizeWidth || prevItem.renderWidth) + (nextItem.resizeWidth || nextItem.renderWidth);
+                }
+                else {
+                    prevItem.foldWidth = 0;
+                    nextItem.foldWidth = (prevItem.resizeWidth || prevItem.renderWidth) + (nextItem.resizeWidth || nextItem.renderWidth);
+                }
+            }
+            $xeSplit.dispatchEvent('toggle-expand', { prevItem, nextItem, expanded, item }, evnt);
+            $xeSplit.recalculate();
+        },
+        handlePrevActionDblclickEvent(evnt) {
+            const $xeSplit = this;
             const reactData = $xeSplit.reactData;
-            const el = $xeSplit.$refs.refElem;
-            if (!el) {
-                return;
+            const { itemList } = reactData;
+            const actionOpts = $xeSplit.computeActionOpts;
+            const btnEl = evnt.currentTarget;
+            const btnWrapperEl = btnEl.parentElement;
+            const handleEl = btnWrapperEl.parentElement;
+            const prevEl = handleEl.previousElementSibling;
+            const prevId = prevEl.getAttribute('itemid');
+            const prevItem = itemList.find(item => item.id === prevId);
+            const nextEl = handleEl.nextElementSibling;
+            const nextId = nextEl.getAttribute('itemid');
+            const nextItem = itemList.find(item => item.id === nextId);
+            if (actionOpts.trigger === 'dblclick') {
+                if (prevItem && nextItem && nextItem.isExpand) {
+                    $xeSplit.handleItemActionEvent(evnt, prevItem, nextItem, false);
+                }
             }
-            const { vertical } = props;
+            $xeSplit.dispatchEvent('action-dblclick', { prevItem, nextItem }, evnt);
+        },
+        handlePrevActionClickEvent(evnt) {
+            const $xeSplit = this;
+            const reactData = $xeSplit.reactData;
             const { itemList } = reactData;
-            const isFoldNext = $xeSplit.computeIsFoldNext;
+            const actionOpts = $xeSplit.computeActionOpts;
             const btnEl = evnt.currentTarget;
-            const handleEl = btnEl.parentElement;
-            const itemId = handleEl.getAttribute('itemid');
-            const itemIndex = XEUtils.findIndexOf(itemList, item => item.id === itemId);
-            const item = itemList[itemIndex];
-            const targetItem = itemList[itemIndex + (isFoldNext ? 1 : -1)];
-            if (item) {
-                const { showAction, isExpand } = item;
-                if (showAction) {
-                    if (vertical) {
-                        if (targetItem) {
-                            targetItem.isVisible = !isExpand;
-                            targetItem.foldHeight = 0;
-                            item.isExpand = !isExpand;
-                            item.isVisible = true;
-                            item.foldHeight = isExpand ? (targetItem.resizeHeight || targetItem.renderHeight) + (item.resizeHeight || item.renderHeight) : 0;
-                        }
-                    }
-                    else {
-                        if (targetItem) {
-                            targetItem.isVisible = !isExpand;
-                            targetItem.foldWidth = 0;
-                            item.isExpand = !isExpand;
-                            item.isVisible = true;
-                            item.foldWidth = isExpand ? (targetItem.resizeWidth || targetItem.renderWidth) + (item.resizeWidth || item.renderWidth) : 0;
-                        }
-                    }
-                    $xeSplit.dispatchEvent('toggle-expand', { item, name: item.name, targetItem, targetName: targetItem ? targetItem.name : '', expanded: item.isExpand }, evnt);
-                    $xeSplit.recalculate();
+            const btnWrapperEl = btnEl.parentElement;
+            const handleEl = btnWrapperEl.parentElement;
+            const prevEl = handleEl.previousElementSibling;
+            const prevId = prevEl.getAttribute('itemid');
+            const prevItem = itemList.find(item => item.id === prevId);
+            const nextEl = handleEl.nextElementSibling;
+            const nextId = nextEl.getAttribute('itemid');
+            const nextItem = itemList.find(item => item.id === nextId);
+            if (actionOpts.trigger !== 'dblclick') {
+                if (prevItem && nextItem && nextItem.isExpand) {
+                    $xeSplit.handleItemActionEvent(evnt, prevItem, nextItem, false);
                 }
             }
+            $xeSplit.dispatchEvent('action-click', { prevItem, nextItem }, evnt);
         },
-        handleActionDblclickEvent(evnt) {
+        handleNextActionDblclickEvent(evnt) {
             const $xeSplit = this;
             const reactData = $xeSplit.reactData;
             const { itemList } = reactData;
             const actionOpts = $xeSplit.computeActionOpts;
             const btnEl = evnt.currentTarget;
-            const handleEl = btnEl.parentElement;
-            const itemId = handleEl.getAttribute('itemid');
-            const itemIndex = XEUtils.findIndexOf(itemList, item => item.id === itemId);
-            const item = itemList[itemIndex];
+            const btnWrapperEl = btnEl.parentElement;
+            const handleEl = btnWrapperEl.parentElement;
+            const prevEl = handleEl.previousElementSibling;
+            const prevId = prevEl.getAttribute('itemid');
+            const prevItem = itemList.find(item => item.id === prevId);
+            const nextEl = handleEl.nextElementSibling;
+            const nextId = nextEl.getAttribute('itemid');
+            const nextItem = itemList.find(item => item.id === nextId);
             if (actionOpts.trigger === 'dblclick') {
-                $xeSplit.handleItemActionEvent(evnt);
+                if (prevItem && nextItem && prevItem.isExpand) {
+                    $xeSplit.handleItemActionEvent(evnt, prevItem, nextItem, true);
+                }
             }
-            $xeSplit.dispatchEvent('action-dblclick', { item, name: item ? item.name : '' }, evnt);
+            $xeSplit.dispatchEvent('action-dblclick', { prevItem, nextItem }, evnt);
         },
-        handleActionClickEvent(evnt) {
+        handleNextActionClickEvent(evnt) {
             const $xeSplit = this;
             const reactData = $xeSplit.reactData;
             const { itemList } = reactData;
             const actionOpts = $xeSplit.computeActionOpts;
             const btnEl = evnt.currentTarget;
-            const handleEl = btnEl.parentElement;
-            const itemId = handleEl.getAttribute('itemid');
-            const itemIndex = XEUtils.findIndexOf(itemList, item => item.id === itemId);
-            const item = itemList[itemIndex];
+            const btnWrapperEl = btnEl.parentElement;
+            const handleEl = btnWrapperEl.parentElement;
+            const prevEl = handleEl.previousElementSibling;
+            const prevId = prevEl.getAttribute('itemid');
+            const prevItem = itemList.find(item => item.id === prevId);
+            const nextEl = handleEl.nextElementSibling;
+            const nextId = nextEl.getAttribute('itemid');
+            const nextItem = itemList.find(item => item.id === nextId);
             if (actionOpts.trigger !== 'dblclick') {
-                $xeSplit.handleItemActionEvent(evnt);
+                if (prevItem && nextItem && prevItem.isExpand) {
+                    $xeSplit.handleItemActionEvent(evnt, prevItem, nextItem, true);
+                }
             }
-            $xeSplit.dispatchEvent('action-click', { item, name: item ? item.name : '' }, evnt);
+            $xeSplit.dispatchEvent('action-click', { prevItem, nextItem }, evnt);
         },
         handleGlobalResizeEvent() {
             const $xeSplit = this;
             $xeSplit.recalculate();
         },
-        getDefaultActionIcon(item) {
+        getActionIcon(prevItem, nextItem, isNext) {
             const $xeSplit = this;
             const props = $xeSplit;
             const { vertical } = props;
-            const { showAction, isExpand } = item;
-            const isFoldNext = $xeSplit.computeIsFoldNext;
             const topIcon = 'SPLIT_TOP_ACTION';
             const bottomIcon = 'SPLIT_BOTTOM_ACTION';
             const leftIcon = 'SPLIT_LEFT_ACTION';
             const rightIcon = 'SPLIT_RIGHT_ACTION';
-            if (showAction) {
-                let iconName = '';
-                if (isFoldNext) {
-                    if (vertical) {
-                        iconName = isExpand ? bottomIcon : topIcon;
-                    }
-                    else {
-                        iconName = isExpand ? rightIcon : leftIcon;
-                    }
+            let iconName = '';
+            if (vertical) {
+                if (isNext) {
+                    iconName = nextItem.isExpand ? bottomIcon : topIcon;
                 }
                 else {
-                    if (vertical) {
-                        iconName = isExpand ? topIcon : bottomIcon;
-                    }
-                    else {
-                        iconName = isExpand ? leftIcon : rightIcon;
-                    }
+                    iconName = prevItem.isExpand ? topIcon : bottomIcon;
+                }
+            }
+            else {
+                if (isNext) {
+                    iconName = nextItem.isExpand ? rightIcon : leftIcon;
                 }
-                if (iconName) {
-                    return getIcon()[iconName];
+                else {
+                    iconName = prevItem.isExpand ? leftIcon : rightIcon;
                 }
             }
+            if (iconName) {
+                return getIcon()[iconName];
+            }
             return '';
         },
         //
         // Render
         //
-        renderHandleBar(h, item) {
+        renderHandleBar(h, prevItem, nextItem) {
             const $xeSplit = this;
+            const props = $xeSplit;
+            const reactData = $xeSplit.reactData;
+            const { border, resize, vertical } = props;
+            const { itemList } = reactData;
             const barStyle = $xeSplit.computeBarStyle;
             const actionOpts = $xeSplit.computeActionOpts;
-            const isFoldNext = $xeSplit.computeIsFoldNext;
-            const { id, isExpand, showAction } = item;
-            const btnOns = {};
-            if (actionOpts.trigger === 'dblclick') {
-                btnOns.dblclick = $xeSplit.handleItemActionEvent;
-            }
-            else {
-                btnOns.click = $xeSplit.handleItemActionEvent;
-            }
+            const { direction } = actionOpts;
+            const showPrevButton = XEUtils.isBoolean(actionOpts.showPrevButton) ? actionOpts.showPrevButton : (itemList.some(item => item.showAction));
+            const showNextButton = XEUtils.isBoolean(actionOpts.showNextButton) ? actionOpts.showNextButton : (direction === 'next' && itemList.some(item => item.showAction));
+            const resizeOpts = $xeSplit.computeResizeOpts;
+            const { immediate } = resizeOpts;
             return h('div', {
-                attrs: {
-                    itemid: id
-                },
-                class: ['vxe-split-pane-handle', isFoldNext ? 'to--next' : 'to--prev']
+                class: ['vxe-split-pane-handle', vertical ? 'is--vertical' : 'is--horizontal', immediate ? 'is-resize--immediate' : 'is-resize--lazy', {
+                        'is--resize': resize,
+                        'is--border': border
+                    }]
             }, [
                 h('div', {
                     class: 'vxe-split-pane-handle-bar',
@@ -648,14 +712,36 @@ export default {
                         mousedown: $xeSplit.dragEvent
                     }
                 }),
-                showAction
-                    ? h('span', {
-                        class: 'vxe-split-pane-action-btn',
-                        on: btnOns
+                itemList.length === 2
+                    ? h('div', {
+                        class: 'vxe-split-pane-action-btn-wrapper'
                     }, [
-                        h('i', {
-                            class: (isExpand ? actionOpts.openIcon : actionOpts.closeIcon) || $xeSplit.getDefaultActionIcon(item)
-                        })
+                        showPrevButton && nextItem.isExpand
+                            ? h('div', {
+                                class: 'vxe-split-pane-action-btn',
+                                on: {
+                                    dblclick: $xeSplit.handlePrevActionDblclickEvent,
+                                    click: $xeSplit.handlePrevActionClickEvent
+                                }
+                            }, [
+                                h('i', {
+                                    class: $xeSplit.getActionIcon(prevItem, nextItem, false)
+                                })
+                            ])
+                            : renderEmptyElement($xeSplit),
+                        showNextButton && prevItem.isExpand
+                            ? h('div', {
+                                class: 'vxe-split-pane-action-btn',
+                                on: {
+                                    dblclick: $xeSplit.handleNextActionDblclickEvent,
+                                    click: $xeSplit.handleNextActionClickEvent
+                                }
+                            }, [
+                                h('i', {
+                                    class: $xeSplit.getActionIcon(prevItem, nextItem, true)
+                                })
+                            ])
+                            : renderEmptyElement($xeSplit)
                     ])
                     : renderEmptyElement($xeSplit)
             ]);
@@ -670,36 +756,38 @@ export default {
             const { immediate } = resizeOpts;
             const visibleItems = $xeSplit.computeVisibleItems;
             const { autoItems } = $xeSplit.computeAutoItems;
-            const isFoldNext = $xeSplit.computeIsFoldNext;
             const itemVNs = [];
-            itemList.forEach((item, index) => {
-                const { id, name, slots, renderHeight, resizeHeight, foldHeight, renderWidth, resizeWidth, foldWidth, isVisible, isExpand } = item;
+            itemList.forEach((prevItem, index) => {
+                const { id, name, slots, renderHeight, resizeHeight, foldHeight, renderWidth, resizeWidth, foldWidth, isExpand } = prevItem;
+                const nextItem = itemList[index + 1];
                 const defaultSlot = slots ? slots.default : null;
                 const stys = {};
-                let itemWidth = isVisible ? (foldWidth || resizeWidth || renderWidth) : 0;
-                let itemHeight = isVisible ? (foldHeight || resizeHeight || renderHeight) : 0;
+                let itemWidth = isExpand ? (foldWidth || resizeWidth || renderWidth) : 0;
+                let itemHeight = isExpand ? (foldHeight || resizeHeight || renderHeight) : 0;
                 // 至少存在一个自适应
                 if (autoItems.length === 1) {
                     if (vertical) {
-                        if (!item.height) {
+                        if (!prevItem.height) {
                             itemHeight = 0;
                         }
                     }
                     else {
-                        if (!item.width) {
+                        if (!prevItem.width) {
                             itemWidth = 0;
                         }
                     }
                 }
-                // 当只剩下一个可视区自动占用 100%
+                let isFill = true;
                 if (vertical) {
-                    if (itemHeight) {
-                        stys.height = visibleItems.length === 1 ? '100%' : toCssUnit(itemHeight);
+                    if (itemHeight && visibleItems.length > 1) {
+                        isFill = false;
+                        stys.height = toCssUnit(itemHeight);
                     }
                 }
                 else {
-                    if (itemWidth) {
-                        stys.width = visibleItems.length === 1 ? '100%' : toCssUnit(itemWidth);
+                    if (itemWidth && visibleItems.length > 1) {
+                        isFill = false;
+                        stys.width = toCssUnit(itemWidth);
                     }
                 }
                 itemVNs.push(h('div', {
@@ -712,14 +800,12 @@ export default {
                             'is--border': border,
                             'is--height': itemHeight,
                             'is--width': itemWidth,
-                            'is--fill': isVisible && !itemHeight && !itemWidth,
-                            'is--handle': index > 0,
-                            'is--expand': isExpand,
-                            'is--hidden': !isVisible
+                            'is--visible': isExpand,
+                            'is--hidden': !isExpand,
+                            'is--fill': isExpand && isFill
                         }],
                     style: stys
                 }, [
-                    index && !isFoldNext ? $xeSplit.renderHandleBar(h, item) : renderEmptyElement($xeSplit),
                     h('div', {
                         attrs: {
                             itemid: id
@@ -728,10 +814,12 @@ export default {
                     }, [
                         h('div', {
                             class: 'vxe-split-pane--inner'
-                        }, defaultSlot ? $xeSplit.callSlot(defaultSlot, { name, isVisible, isExpand }) : [])
-                    ]),
-                    isFoldNext && index < itemList.length - 1 ? $xeSplit.renderHandleBar(h, item) : renderEmptyElement($xeSplit)
+                        }, defaultSlot ? $xeSplit.callSlot(defaultSlot, { name, isExpand }) : [])
+                    ])
                 ]));
+                if (nextItem) {
+                    itemVNs.push($xeSplit.renderHandleBar(h, prevItem, nextItem));
+                }
             });
             return h('div', {
                 class: 'vxe-split-wrapper'
@@ -777,7 +865,15 @@ export default {
                             })
                         ])
                     ]
-                    : [])
+                    : []),
+                h('div', {
+                    class: 'vxe-split--render-vars'
+                }, [
+                    h('div', {
+                        ref: 'refBarInfoElem',
+                        class: 'vxe-split--handle-bar-info'
+                    })
+                ])
             ]);
         }
     },
@@ -799,6 +895,10 @@ export default {
         if (props.items) {
             $xeSplit.loadItem(props.items);
         }
+        const actionOpts = $xeSplit.computeActionOpts;
+        if (actionOpts.direction) {
+            errLog('vxe.error.delProp', ['action-config.direction', 'action-config.showPrevButton | action-config.showNextButton']);
+        }
         $xeSplit.$nextTick(() => {
             $xeSplit.recalculate();
         });