vxe-pc-ui 3.9.0 → 3.9.2

package/lib/split/src/split.js

@@ -52,7 +52,9 @@ var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defi
     var xID = _xeUtils.default.uniqueId();
     var reactData = {
       staticItems: [],
-      itemList: []
+      itemList: [],
+      barWidth: 0,
+      barHeight: 0
     };
     var internalData = {
       wrapperWidth: 0,
@@ -101,7 +103,7 @@ var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defi
       var $xeSplit = this;
       var reactData = $xeSplit.reactData;
       return reactData.itemList.filter(function (item) {
-        return item.isVisible;
+        return item.isExpand;
       });
     },
     computeAutoItems: function computeAutoItems() {
@@ -152,10 +154,21 @@ var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defi
       var $xeSplit = this;
       var props = $xeSplit;
       var reactData = $xeSplit.reactData;
+      var actionOpts = $xeSplit.computeActionOpts;
+      var showPrevButton = actionOpts.showPrevButton,
+        showNextButton = actionOpts.showNextButton;
       if (props.items && props.items.length) {
         (0, _log.errLog)('vxe.error.errConflicts', ['<vxe-split-pane ...>', 'items']);
       }
-      reactData.itemList = reactData.staticItems;
+      reactData.itemList = reactData.staticItems || [];
+      if ((showPrevButton || showNextButton) && reactData.itemList.length > 2) {
+        (0, _log.errLog)('vxe.error.modelConflicts', ['action-config.showPrevButton | action-config.showNextButton', '<vxe-split-pane ...> Only supports 2 panel']);
+      }
+      reactData.itemList.forEach(function (item) {
+        if (item.showAction) {
+          (0, _log.warnLog)('vxe.error.removeProp', ['showAction']);
+        }
+      });
       $xeSplit.recalculate();
     }
   },
@@ -188,7 +201,6 @@ var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defi
       var itemList = reactData.itemList;
       itemList.forEach(function (item) {
         item.isExpand = true;
-        item.isVisible = true;
         item.foldHeight = 0;
         item.foldWidth = 0;
         item.resizeHeight = 0;
@@ -202,7 +214,6 @@ var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defi
       var reactData = $xeSplit.reactData;
       var staticItems = reactData.staticItems;
       var itemDef = {
-        isVisible: true,
         isExpand: true,
         renderWidth: 0,
         resizeWidth: 0,
@@ -247,6 +258,7 @@ var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defi
         var vertical = props.vertical;
         var itemList = reactData.itemList;
         var el = $xeSplit.$refs.refElem;
+        var barInfoElem = $xeSplit.$refs.refBarInfoElem;
         if (!el) {
           return;
         }
@@ -255,6 +267,12 @@ var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defi
         if (!wWidth || !wHeight) {
           return;
         }
+        if (barInfoElem) {
+          reactData.barWidth = barInfoElem.offsetWidth;
+          reactData.barHeight = barInfoElem.offsetHeight;
+        }
+        var contentWidth = wWidth - (vertical ? 0 : reactData.barWidth * (itemList.length - 1));
+        var contentHeight = wHeight - (vertical ? reactData.barHeight * (itemList.length - 1) : 0);
         var itemOpts = $xeSplit.computeItemOpts;
         var allMinWidth = _xeUtils.default.toNumber(itemOpts.minWidth);
         var allMinHeight = _xeUtils.default.toNumber(itemOpts.minHeight);
@@ -266,7 +284,7 @@ var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defi
             var itemHeight = 0;
             if (height) {
               if ((0, _dom.isScale)(height)) {
-                itemHeight = wHeight * _xeUtils.default.toNumber(height) / 100;
+                itemHeight = contentHeight * _xeUtils.default.toNumber(height) / 100;
               } else {
                 itemHeight = _xeUtils.default.toNumber(height);
               }
@@ -277,7 +295,7 @@ var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defi
             countHeight += itemHeight;
           });
           if (residueItems.length) {
-            var reMeanHeight = (wHeight - countHeight) / residueItems.length;
+            var reMeanHeight = (contentHeight - countHeight) / residueItems.length;
             residueItems.forEach(function (item) {
               item.renderHeight = Math.max(_xeUtils.default.toNumber((0, _utils.getGlobalDefaultConfig)(item.minHeight, allMinHeight)), reMeanHeight);
             });
@@ -289,7 +307,7 @@ var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defi
             var itemWidth = 0;
             if (width) {
               if ((0, _dom.isScale)(width)) {
-                itemWidth = wWidth * _xeUtils.default.toNumber(width) / 100;
+                itemWidth = contentWidth * _xeUtils.default.toNumber(width) / 100;
               } else {
                 itemWidth = _xeUtils.default.toNumber(width);
               }
@@ -300,14 +318,14 @@ var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defi
             countWidth += itemWidth;
           });
           if (residueItems.length) {
-            var reMeanWidth = (wWidth - countWidth) / residueItems.length;
+            var reMeanWidth = (contentWidth - countWidth) / residueItems.length;
             residueItems.forEach(function (item) {
               item.renderWidth = Math.max(_xeUtils.default.toNumber((0, _utils.getGlobalDefaultConfig)(item.minWidth, allMinWidth)), reMeanWidth);
             });
           }
         }
-        internalData.wrapperWidth = wWidth;
-        internalData.wrapperHeight = wHeight;
+        internalData.wrapperWidth = contentWidth;
+        internalData.wrapperHeight = contentHeight;
       });
     },
     dragEvent: function dragEvent(evnt) {
@@ -327,35 +345,31 @@ var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defi
       if (!el) {
         return;
       }
-      var itemId = handleEl.getAttribute('itemid');
-      var itemIndex = _xeUtils.default.findIndexOf(itemList, function (item) {
-        return item.id === itemId;
-      });
-      var item = itemList[itemIndex];
-      if (!item) {
+      var prevEl = handleEl.previousElementSibling;
+      var nextEl = handleEl.nextElementSibling;
+      if (!prevEl || !nextEl) {
         return;
       }
-      if (!item.isExpand) {
+      var prevId = prevEl.getAttribute('itemid');
+      var nextId = nextEl.getAttribute('itemid');
+      var prevItem = itemList.find(function (item) {
+        return item.id === prevId;
+      });
+      var nextItem = itemList.find(function (item) {
+        return item.id === nextId;
+      });
+      if (!prevItem || !nextItem) {
         return;
       }
       var containerRect = el.getBoundingClientRect();
       var barRect = barEl.getBoundingClientRect();
       var rsSplitLineEl = $xeSplit.$refs.refResizableSplitTip;
       var rsSplitTipEl = rsSplitLineEl ? rsSplitLineEl.children[0] : null;
-      var isFoldNext = $xeSplit.computeIsFoldNext;
       var itemOpts = $xeSplit.computeItemOpts;
       var resizeOpts = $xeSplit.computeResizeOpts;
       var immediate = resizeOpts.immediate;
       var allMinWidth = _xeUtils.default.toNumber(itemOpts.minWidth);
       var allMinHeight = _xeUtils.default.toNumber(itemOpts.minHeight);
-      var targetItem = itemList[itemIndex + (isFoldNext ? 1 : -1)];
-      var prevItem = itemList[itemIndex + (isFoldNext ? 0 : -1)];
-      var nextItem = itemList[itemIndex + (isFoldNext ? 1 : 0)];
-      var prevEl = targetItem ? el.querySelector(".vxe-split-pane[itemid=\"".concat(prevItem.id, "\"]")) : null;
-      var nextEl = item ? el.querySelector(".vxe-split-pane[itemid=\"".concat(nextItem.id, "\"]")) : null;
-      if (!prevEl || !nextEl) {
-        return;
-      }
       var barOffsetX = Math.ceil(barRect.width - (evnt.clientX - barRect.left));
       var barOffsetY = Math.ceil(evnt.clientY - barRect.top);
       var prevWidth = prevEl.offsetWidth;
@@ -492,8 +506,6 @@ var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defi
           handleReStyle(evnt);
         }
         $xeSplit.dispatchEvent('resize-drag', {
-          item: item,
-          name: item.name,
           prevItem: prevItem,
           nextItem: nextItem,
           offsetHeight: targetOffsetHeight,
@@ -513,8 +525,6 @@ var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defi
         handleUpdate();
         (0, _dom.removeClass)(el, 'is--drag');
         $xeSplit.dispatchEvent('resize-end', {
-          item: item,
-          name: item.name,
           prevItem: prevItem,
           nextItem: nextItem,
           offsetHeight: targetOffsetHeight,
@@ -529,173 +539,250 @@ var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defi
       handleDrag(evnt);
       (0, _dom.addClass)(el, 'is--drag');
       $xeSplit.dispatchEvent('resize-start', {
-        item: item,
-        name: item.name,
         prevItem: prevItem,
         nextItem: nextItem
       }, evnt);
     },
-    handleItemActionEvent: function handleItemActionEvent(evnt) {
+    handleItemActionEvent: function handleItemActionEvent(evnt, prevItem, nextItem, isNext) {
       var $xeSplit = this;
       var props = $xeSplit;
+      var vertical = props.vertical;
+      var expanded = false;
+      var 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: prevItem,
+        nextItem: nextItem,
+        expanded: expanded,
+        item: item
+      }, evnt);
+      $xeSplit.recalculate();
+    },
+    handlePrevActionDblclickEvent: function handlePrevActionDblclickEvent(evnt) {
+      var $xeSplit = this;
       var reactData = $xeSplit.reactData;
-      var el = $xeSplit.$refs.refElem;
-      if (!el) {
-        return;
+      var itemList = reactData.itemList;
+      var actionOpts = $xeSplit.computeActionOpts;
+      var btnEl = evnt.currentTarget;
+      var btnWrapperEl = btnEl.parentElement;
+      var handleEl = btnWrapperEl.parentElement;
+      var prevEl = handleEl.previousElementSibling;
+      var prevId = prevEl.getAttribute('itemid');
+      var prevItem = itemList.find(function (item) {
+        return item.id === prevId;
+      });
+      var nextEl = handleEl.nextElementSibling;
+      var nextId = nextEl.getAttribute('itemid');
+      var nextItem = itemList.find(function (item) {
+        return item.id === nextId;
+      });
+      if (actionOpts.trigger === 'dblclick') {
+        if (prevItem && nextItem && nextItem.isExpand) {
+          $xeSplit.handleItemActionEvent(evnt, prevItem, nextItem, false);
+        }
       }
-      var vertical = props.vertical;
+      $xeSplit.dispatchEvent('action-dblclick', {
+        prevItem: prevItem,
+        nextItem: nextItem
+      }, evnt);
+    },
+    handlePrevActionClickEvent: function handlePrevActionClickEvent(evnt) {
+      var $xeSplit = this;
+      var reactData = $xeSplit.reactData;
       var itemList = reactData.itemList;
-      var isFoldNext = $xeSplit.computeIsFoldNext;
+      var actionOpts = $xeSplit.computeActionOpts;
       var btnEl = evnt.currentTarget;
-      var handleEl = btnEl.parentElement;
-      var itemId = handleEl.getAttribute('itemid');
-      var itemIndex = _xeUtils.default.findIndexOf(itemList, function (item) {
-        return item.id === itemId;
+      var btnWrapperEl = btnEl.parentElement;
+      var handleEl = btnWrapperEl.parentElement;
+      var prevEl = handleEl.previousElementSibling;
+      var prevId = prevEl.getAttribute('itemid');
+      var prevItem = itemList.find(function (item) {
+        return item.id === prevId;
       });
-      var item = itemList[itemIndex];
-      var targetItem = itemList[itemIndex + (isFoldNext ? 1 : -1)];
-      if (item) {
-        var showAction = item.showAction,
-          isExpand = item.isExpand;
-        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: item,
-            name: item.name,
-            targetItem: targetItem,
-            targetName: targetItem ? targetItem.name : '',
-            expanded: item.isExpand
-          }, evnt);
-          $xeSplit.recalculate();
+      var nextEl = handleEl.nextElementSibling;
+      var nextId = nextEl.getAttribute('itemid');
+      var nextItem = itemList.find(function (item) {
+        return item.id === nextId;
+      });
+      if (actionOpts.trigger !== 'dblclick') {
+        if (prevItem && nextItem && nextItem.isExpand) {
+          $xeSplit.handleItemActionEvent(evnt, prevItem, nextItem, false);
         }
       }
+      $xeSplit.dispatchEvent('action-click', {
+        prevItem: prevItem,
+        nextItem: nextItem
+      }, evnt);
     },
-    handleActionDblclickEvent: function handleActionDblclickEvent(evnt) {
+    handleNextActionDblclickEvent: function handleNextActionDblclickEvent(evnt) {
       var $xeSplit = this;
       var reactData = $xeSplit.reactData;
       var itemList = reactData.itemList;
       var actionOpts = $xeSplit.computeActionOpts;
       var btnEl = evnt.currentTarget;
-      var handleEl = btnEl.parentElement;
-      var itemId = handleEl.getAttribute('itemid');
-      var itemIndex = _xeUtils.default.findIndexOf(itemList, function (item) {
-        return item.id === itemId;
+      var btnWrapperEl = btnEl.parentElement;
+      var handleEl = btnWrapperEl.parentElement;
+      var prevEl = handleEl.previousElementSibling;
+      var prevId = prevEl.getAttribute('itemid');
+      var prevItem = itemList.find(function (item) {
+        return item.id === prevId;
+      });
+      var nextEl = handleEl.nextElementSibling;
+      var nextId = nextEl.getAttribute('itemid');
+      var nextItem = itemList.find(function (item) {
+        return item.id === nextId;
       });
-      var item = itemList[itemIndex];
       if (actionOpts.trigger === 'dblclick') {
-        $xeSplit.handleItemActionEvent(evnt);
+        if (prevItem && nextItem && prevItem.isExpand) {
+          $xeSplit.handleItemActionEvent(evnt, prevItem, nextItem, true);
+        }
       }
       $xeSplit.dispatchEvent('action-dblclick', {
-        item: item,
-        name: item ? item.name : ''
+        prevItem: prevItem,
+        nextItem: nextItem
       }, evnt);
     },
-    handleActionClickEvent: function handleActionClickEvent(evnt) {
+    handleNextActionClickEvent: function handleNextActionClickEvent(evnt) {
       var $xeSplit = this;
       var reactData = $xeSplit.reactData;
       var itemList = reactData.itemList;
       var actionOpts = $xeSplit.computeActionOpts;
       var btnEl = evnt.currentTarget;
-      var handleEl = btnEl.parentElement;
-      var itemId = handleEl.getAttribute('itemid');
-      var itemIndex = _xeUtils.default.findIndexOf(itemList, function (item) {
-        return item.id === itemId;
+      var btnWrapperEl = btnEl.parentElement;
+      var handleEl = btnWrapperEl.parentElement;
+      var prevEl = handleEl.previousElementSibling;
+      var prevId = prevEl.getAttribute('itemid');
+      var prevItem = itemList.find(function (item) {
+        return item.id === prevId;
+      });
+      var nextEl = handleEl.nextElementSibling;
+      var nextId = nextEl.getAttribute('itemid');
+      var nextItem = itemList.find(function (item) {
+        return item.id === nextId;
       });
-      var item = itemList[itemIndex];
       if (actionOpts.trigger !== 'dblclick') {
-        $xeSplit.handleItemActionEvent(evnt);
+        if (prevItem && nextItem && prevItem.isExpand) {
+          $xeSplit.handleItemActionEvent(evnt, prevItem, nextItem, true);
+        }
       }
       $xeSplit.dispatchEvent('action-click', {
-        item: item,
-        name: item ? item.name : ''
+        prevItem: prevItem,
+        nextItem: nextItem
       }, evnt);
     },
     handleGlobalResizeEvent: function handleGlobalResizeEvent() {
       var $xeSplit = this;
       $xeSplit.recalculate();
     },
-    getDefaultActionIcon: function getDefaultActionIcon(item) {
+    getActionIcon: function getActionIcon(prevItem, nextItem, isNext) {
       var $xeSplit = this;
       var props = $xeSplit;
       var vertical = props.vertical;
-      var showAction = item.showAction,
-        isExpand = item.isExpand;
-      var isFoldNext = $xeSplit.computeIsFoldNext;
       var topIcon = 'SPLIT_TOP_ACTION';
       var bottomIcon = 'SPLIT_BOTTOM_ACTION';
       var leftIcon = 'SPLIT_LEFT_ACTION';
       var rightIcon = 'SPLIT_RIGHT_ACTION';
-      if (showAction) {
-        var iconName = '';
-        if (isFoldNext) {
-          if (vertical) {
-            iconName = isExpand ? bottomIcon : topIcon;
-          } else {
-            iconName = isExpand ? rightIcon : leftIcon;
-          }
+      var 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;
         }
-        if (iconName) {
-          return (0, _ui.getIcon)()[iconName];
+      } else {
+        if (isNext) {
+          iconName = nextItem.isExpand ? rightIcon : leftIcon;
+        } else {
+          iconName = prevItem.isExpand ? leftIcon : rightIcon;
         }
       }
+      if (iconName) {
+        return (0, _ui.getIcon)()[iconName];
+      }
       return '';
     },
     //
     // Render
     //
-    renderHandleBar: function renderHandleBar(h, item) {
+    renderHandleBar: function renderHandleBar(h, prevItem, nextItem) {
       var $xeSplit = this;
+      var props = $xeSplit;
+      var reactData = $xeSplit.reactData;
+      var border = props.border,
+        resize = props.resize,
+        vertical = props.vertical;
+      var itemList = reactData.itemList;
       var barStyle = $xeSplit.computeBarStyle;
       var actionOpts = $xeSplit.computeActionOpts;
-      var isFoldNext = $xeSplit.computeIsFoldNext;
-      var id = item.id,
-        isExpand = item.isExpand,
-        showAction = item.showAction;
-      var btnOns = {};
-      if (actionOpts.trigger === 'dblclick') {
-        btnOns.dblclick = $xeSplit.handleItemActionEvent;
-      } else {
-        btnOns.click = $xeSplit.handleItemActionEvent;
-      }
+      var direction = actionOpts.direction;
+      var showPrevButton = _xeUtils.default.isBoolean(actionOpts.showPrevButton) ? actionOpts.showPrevButton : itemList.some(function (item) {
+        return item.showAction;
+      });
+      var showNextButton = _xeUtils.default.isBoolean(actionOpts.showNextButton) ? actionOpts.showNextButton : direction === 'next' && itemList.some(function (item) {
+        return item.showAction;
+      });
+      var resizeOpts = $xeSplit.computeResizeOpts;
+      var immediate = resizeOpts.immediate;
       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',
         style: barStyle,
         on: {
           mousedown: $xeSplit.dragEvent
         }
-      }), showAction ? h('span', {
+      }), itemList.length === 2 ? h('div', {
+        class: 'vxe-split-pane-action-btn-wrapper'
+      }, [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)
+      })]) : (0, _ui.renderEmptyElement)($xeSplit), showNextButton && prevItem.isExpand ? h('div', {
         class: 'vxe-split-pane-action-btn',
-        on: btnOns
+        on: {
+          dblclick: $xeSplit.handleNextActionDblclickEvent,
+          click: $xeSplit.handleNextActionClickEvent
+        }
       }, [h('i', {
-        class: (isExpand ? actionOpts.openIcon : actionOpts.closeIcon) || $xeSplit.getDefaultActionIcon(item)
-      })]) : (0, _ui.renderEmptyElement)($xeSplit)]);
+        class: $xeSplit.getActionIcon(prevItem, nextItem, true)
+      })]) : (0, _ui.renderEmptyElement)($xeSplit)]) : (0, _ui.renderEmptyElement)($xeSplit)]);
     },
     renderItems: function renderItems(h) {
       var $xeSplit = this;
@@ -710,44 +797,45 @@ var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defi
       var immediate = resizeOpts.immediate;
       var visibleItems = $xeSplit.computeVisibleItems;
       var autoItems = $xeSplit.computeAutoItems.autoItems;
-      var isFoldNext = $xeSplit.computeIsFoldNext;
       var itemVNs = [];
-      itemList.forEach(function (item, index) {
-        var id = item.id,
-          name = item.name,
-          slots = item.slots,
-          renderHeight = item.renderHeight,
-          resizeHeight = item.resizeHeight,
-          foldHeight = item.foldHeight,
-          renderWidth = item.renderWidth,
-          resizeWidth = item.resizeWidth,
-          foldWidth = item.foldWidth,
-          isVisible = item.isVisible,
-          isExpand = item.isExpand;
+      itemList.forEach(function (prevItem, index) {
+        var id = prevItem.id,
+          name = prevItem.name,
+          slots = prevItem.slots,
+          renderHeight = prevItem.renderHeight,
+          resizeHeight = prevItem.resizeHeight,
+          foldHeight = prevItem.foldHeight,
+          renderWidth = prevItem.renderWidth,
+          resizeWidth = prevItem.resizeWidth,
+          foldWidth = prevItem.foldWidth,
+          isExpand = prevItem.isExpand;
+        var nextItem = itemList[index + 1];
         var defaultSlot = slots ? slots.default : null;
         var stys = {};
-        var itemWidth = isVisible ? foldWidth || resizeWidth || renderWidth : 0;
-        var itemHeight = isVisible ? foldHeight || resizeHeight || renderHeight : 0;
+        var itemWidth = isExpand ? foldWidth || resizeWidth || renderWidth : 0;
+        var 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%
+        var isFill = true;
         if (vertical) {
-          if (itemHeight) {
-            stys.height = visibleItems.length === 1 ? '100%' : (0, _dom.toCssUnit)(itemHeight);
+          if (itemHeight && visibleItems.length > 1) {
+            isFill = false;
+            stys.height = (0, _dom.toCssUnit)(itemHeight);
           }
         } else {
-          if (itemWidth) {
-            stys.width = visibleItems.length === 1 ? '100%' : (0, _dom.toCssUnit)(itemWidth);
+          if (itemWidth && visibleItems.length > 1) {
+            isFill = false;
+            stys.width = (0, _dom.toCssUnit)(itemWidth);
           }
         }
         itemVNs.push(h('div', {
@@ -760,13 +848,12 @@ var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defi
             '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) : (0, _ui.renderEmptyElement)($xeSplit), h('div', {
+        }, [h('div', {
           attrs: {
             itemid: id
           },
@@ -775,9 +862,11 @@ var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defi
           class: 'vxe-split-pane--inner'
         }, defaultSlot ? $xeSplit.callSlot(defaultSlot, {
           name: name,
-          isVisible: isVisible,
           isExpand: isExpand
-        }) : [])]), isFoldNext && index < itemList.length - 1 ? $xeSplit.renderHandleBar(h, item) : (0, _ui.renderEmptyElement)($xeSplit)]));
+        }) : [])])]));
+        if (nextItem) {
+          itemVNs.push($xeSplit.renderHandleBar(h, prevItem, nextItem));
+        }
       });
       return h('div', {
         class: 'vxe-split-wrapper'
@@ -816,7 +905,12 @@ var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defi
         class: 'vxe-split--resizable-split-number-prev'
       }), h('div', {
         class: 'vxe-split--resizable-split-number-next'
-      })])] : [])]);
+      })])] : []), h('div', {
+        class: 'vxe-split--render-vars'
+      }, [h('div', {
+        ref: 'refBarInfoElem',
+        class: 'vxe-split--handle-bar-info'
+      })])]);
     }
   },
   created: function created() {
@@ -837,6 +931,10 @@ var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defi
     if (props.items) {
       $xeSplit.loadItem(props.items);
     }
+    var actionOpts = $xeSplit.computeActionOpts;
+    if (actionOpts.direction) {
+      (0, _log.errLog)('vxe.error.delProp', ['action-config.direction', 'action-config.showPrevButton | action-config.showNextButton']);
+    }
     $xeSplit.$nextTick(function () {
       $xeSplit.recalculate();
     });