vxe-pc-ui 4.9.1 → 4.9.3

package/lib/split/src/split.js

@@ -48,10 +48,13 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
     } = context;
     const xID = _xeUtils.default.uniqueId();
     const refElem = (0, _vue.ref)();
+    const refBarInfoElem = (0, _vue.ref)();
     const refResizableSplitTip = (0, _vue.ref)();
     const reactData = (0, _vue.reactive)({
       staticItems: [],
-      itemList: []
+      itemList: [],
+      barWidth: 0,
+      barHeight: 0
     });
     const internalData = {
       wrapperWidth: 0,
@@ -69,12 +72,8 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
     const computeActionOpts = (0, _vue.computed)(() => {
       return Object.assign({}, (0, _ui.getConfig)().split.actionConfig, props.actionConfig);
     });
-    const computeIsFoldNext = (0, _vue.computed)(() => {
-      const actionOpts = computeActionOpts.value;
-      return actionOpts.direction === 'next';
-    });
     const computeVisibleItems = (0, _vue.computed)(() => {
-      return reactData.itemList.filter(item => item.isVisible);
+      return reactData.itemList.filter(item => item.isExpand);
     });
     const computeAutoItems = (0, _vue.computed)(() => {
       const {
@@ -88,10 +87,10 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
           renderHeight,
           resizeHeight,
           foldHeight,
-          isVisible,
+          isExpand,
           height
         } = item;
-        const itemHeight = isVisible ? foldHeight || resizeHeight || renderHeight : 0;
+        const itemHeight = isExpand ? foldHeight || resizeHeight || renderHeight : 0;
         if (!height) {
           autoItems.push(item);
         }
@@ -101,10 +100,10 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
           renderWidth,
           resizeWidth,
           foldWidth,
-          isVisible,
+          isExpand,
           width
         } = item;
-        const itemWidth = isVisible ? foldWidth || resizeWidth || renderWidth : 0;
+        const itemWidth = isExpand ? foldWidth || resizeWidth || renderWidth : 0;
         if (!width) {
           autoItems.push(item);
         }
@@ -136,8 +135,7 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
     const computeMaps = {
       computeItemOpts,
       computeBarOpts,
-      computeActionOpts,
-      computeIsFoldNext
+      computeActionOpts
     };
     const refMaps = {
       refElem
@@ -167,38 +165,31 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
       }
       return [];
     };
-    const getDefaultActionIcon = item => {
+    const getActionIcon = (prevItem, nextItem, isNext) => {
       const {
         vertical
       } = props;
-      const {
-        showAction,
-        isExpand
-      } = item;
-      const isFoldNext = computeIsFoldNext.value;
       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;
         }
-        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 '';
     };
     const reset = () => {
@@ -207,7 +198,6 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
       } = reactData;
       itemList.forEach(item => {
         item.isExpand = true;
-        item.isVisible = true;
         item.foldHeight = 0;
         item.foldWidth = 0;
         item.resizeHeight = 0;
@@ -219,8 +209,12 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
       const {
         staticItems
       } = reactData;
+      const actionOpts = computeActionOpts.value;
+      const {
+        showPrevButton,
+        showNextButton
+      } = actionOpts;
       const itemDef = {
-        isVisible: true,
         isExpand: true,
         renderWidth: 0,
         resizeWidth: 0,
@@ -230,6 +224,9 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
         foldHeight: 0
       };
       reactData.itemList = list.map(item => {
+        if (item.showAction) {
+          (0, _log.warnLog)('vxe.error.removeProp', ['showAction']);
+        }
         if (item.slots) {
           _xeUtils.default.each(item.slots, func => {
             if (!_xeUtils.default.isFunction(func)) {
@@ -246,6 +243,9 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
       if (staticItems.length) {
         (0, _log.errLog)('vxe.error.errConflicts', ['<vxe-split-pane ...>', 'items']);
       }
+      if ((showPrevButton || showNextButton) && reactData.itemList.length > 2) {
+        (0, _log.errLog)('vxe.error.errConflicts', ['action-config.showPrevButton | action-config.showNextButton', 'Only supports 2 item']);
+      }
       return recalculate();
     };
     const loadItem = list => {
@@ -263,6 +263,7 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
           itemList
         } = reactData;
         const el = refElem.value;
+        const barInfoElem = refBarInfoElem.value;
         if (!el) {
           return;
         }
@@ -271,6 +272,12 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
         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 = computeItemOpts.value;
         const allMinWidth = _xeUtils.default.toNumber(itemOpts.minWidth);
         const allMinHeight = _xeUtils.default.toNumber(itemOpts.minHeight);
@@ -284,7 +291,7 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
             let 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);
               }
@@ -295,7 +302,7 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
             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.default.toNumber((0, _utils.getGlobalDefaultConfig)(item.minHeight, allMinHeight)), reMeanHeight);
             });
@@ -309,7 +316,7 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
             let 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);
               }
@@ -320,14 +327,14 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
             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.default.toNumber((0, _utils.getGlobalDefaultConfig)(item.minWidth, allMinWidth)), reMeanWidth);
             });
           }
         }
-        internalData.wrapperWidth = wWidth;
-        internalData.wrapperHeight = wHeight;
+        internalData.wrapperWidth = contentWidth;
+        internalData.wrapperHeight = contentHeight;
       });
     };
     const dragEvent = evnt => {
@@ -348,20 +355,22 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
       if (!el) {
         return;
       }
-      const itemId = handleEl.getAttribute('itemid');
-      const itemIndex = _xeUtils.default.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 = refResizableSplitTip.value;
       const rsSplitTipEl = rsSplitLineEl ? rsSplitLineEl.children[0] : null;
-      const isFoldNext = computeIsFoldNext.value;
       const itemOpts = computeItemOpts.value;
       const resizeOpts = computeResizeOpts.value;
       const {
@@ -369,14 +378,6 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
       } = resizeOpts;
       const allMinWidth = _xeUtils.default.toNumber(itemOpts.minWidth);
       const allMinHeight = _xeUtils.default.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;
@@ -513,8 +514,6 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
           handleReStyle(evnt);
         }
         dispatchEvent('resize-drag', {
-          item,
-          name: item.name,
           prevItem,
           nextItem,
           offsetHeight: targetOffsetHeight,
@@ -534,8 +533,6 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
         handleUpdate();
         (0, _dom.removeClass)(el, 'is--drag');
         dispatchEvent('resize-end', {
-          item,
-          name: item.name,
           prevItem,
           nextItem,
           offsetHeight: targetOffsetHeight,
@@ -550,98 +547,149 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
       handleDrag(evnt);
       (0, _dom.addClass)(el, 'is--drag');
       dispatchEvent('resize-start', {
-        item,
-        name: item.name,
         prevItem,
         nextItem
       }, evnt);
     };
-    const handleItemActionEvent = evnt => {
-      const el = refElem.value;
-      if (!el) {
-        return;
-      }
+    const handleItemActionEvent = (evnt, prevItem, nextItem, isNext) => {
       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);
+        }
+      }
+      dispatchEvent('toggle-expand', {
+        prevItem,
+        nextItem,
+        expanded,
+        item
+      }, evnt);
+      recalculate();
+    };
+    const handlePrevActionDblclickEvent = evnt => {
       const {
         itemList
       } = reactData;
-      const isFoldNext = computeIsFoldNext.value;
+      const actionOpts = computeActionOpts.value;
       const btnEl = evnt.currentTarget;
-      const handleEl = btnEl.parentElement;
-      const itemId = handleEl.getAttribute('itemid');
-      const itemIndex = _xeUtils.default.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;
-            }
-          }
-          dispatchEvent('toggle-expand', {
-            item,
-            name: item.name,
-            targetItem,
-            targetName: targetItem ? targetItem.name : '',
-            expanded: item.isExpand
-          }, evnt);
-          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) {
+          handleItemActionEvent(evnt, prevItem, nextItem, false);
         }
       }
+      dispatchEvent('action-dblclick', {
+        prevItem,
+        nextItem
+      }, evnt);
     };
-    const handleActionDblclickEvent = evnt => {
+    const handlePrevActionClickEvent = evnt => {
       const {
         itemList
       } = reactData;
       const actionOpts = computeActionOpts.value;
       const btnEl = evnt.currentTarget;
-      const handleEl = btnEl.parentElement;
-      const itemId = handleEl.getAttribute('itemid');
-      const itemIndex = _xeUtils.default.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') {
+        if (prevItem && nextItem && nextItem.isExpand) {
+          handleItemActionEvent(evnt, prevItem, nextItem, false);
+        }
+      }
+      dispatchEvent('action-click', {
+        prevItem,
+        nextItem
+      }, evnt);
+    };
+    const handleNextActionDblclickEvent = evnt => {
+      const {
+        itemList
+      } = reactData;
+      const actionOpts = computeActionOpts.value;
+      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') {
-        handleItemActionEvent(evnt);
+        if (prevItem && nextItem && prevItem.isExpand) {
+          handleItemActionEvent(evnt, prevItem, nextItem, true);
+        }
       }
       dispatchEvent('action-dblclick', {
-        item,
-        name: item ? item.name : ''
+        prevItem,
+        nextItem
       }, evnt);
     };
-    const handleActionClickEvent = evnt => {
+    const handleNextActionClickEvent = evnt => {
       const {
         itemList
       } = reactData;
       const actionOpts = computeActionOpts.value;
       const btnEl = evnt.currentTarget;
-      const handleEl = btnEl.parentElement;
-      const itemId = handleEl.getAttribute('itemid');
-      const itemIndex = _xeUtils.default.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') {
-        handleItemActionEvent(evnt);
+        if (prevItem && nextItem && prevItem.isExpand) {
+          handleItemActionEvent(evnt, prevItem, nextItem, true);
+        }
       }
       dispatchEvent('action-click', {
-        item,
-        name: item ? item.name : ''
+        prevItem,
+        nextItem
       }, evnt);
     };
     const handleGlobalResizeEvent = () => {
@@ -656,29 +704,50 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
     };
     const splitPrivateMethods = {};
     Object.assign($xeSplit, splitMethods, splitPrivateMethods);
-    const renderHandleBar = item => {
+    const renderHandleBar = (prevItem, nextItem) => {
+      const {
+        border,
+        resize,
+        vertical
+      } = props;
+      const {
+        itemList
+      } = reactData;
       const barStyle = computeBarStyle.value;
       const actionOpts = computeActionOpts.value;
-      const isFoldNext = computeIsFoldNext.value;
       const {
-        id,
-        isExpand,
-        showAction
-      } = item;
+        direction
+      } = actionOpts;
+      const showPrevButton = _xeUtils.default.isBoolean(actionOpts.showPrevButton) ? actionOpts.showPrevButton : itemList.some(item => item.showAction);
+      const showNextButton = _xeUtils.default.isBoolean(actionOpts.showNextButton) ? actionOpts.showNextButton : direction === 'next' && itemList.some(item => item.showAction);
+      const resizeOpts = computeResizeOpts.value;
+      const {
+        immediate
+      } = resizeOpts;
       return (0, _vue.h)('div', {
-        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
+        }]
       }, [(0, _vue.h)('div', {
         class: 'vxe-split-pane-handle-bar',
         style: barStyle,
         onMousedown: dragEvent
-      }), showAction ? (0, _vue.h)('span', {
+      }), itemList.length === 2 ? (0, _vue.h)('div', {
+        class: 'vxe-split-pane-action-btn-wrapper'
+      }, [showPrevButton && nextItem.isExpand ? (0, _vue.h)('div', {
+        class: 'vxe-split-pane-action-btn',
+        onDblclick: handlePrevActionDblclickEvent,
+        onClick: handlePrevActionClickEvent
+      }, [(0, _vue.h)('i', {
+        class: getActionIcon(prevItem, nextItem, false)
+      })]) : (0, _ui.renderEmptyElement)($xeSplit), showNextButton && prevItem.isExpand ? (0, _vue.h)('div', {
         class: 'vxe-split-pane-action-btn',
-        onDblclick: handleActionDblclickEvent,
-        onClick: handleActionClickEvent
+        onDblclick: handleNextActionDblclickEvent,
+        onClick: handleNextActionClickEvent
       }, [(0, _vue.h)('i', {
-        class: (isExpand ? actionOpts.openIcon : actionOpts.closeIcon) || getDefaultActionIcon(item)
-      })]) : (0, _ui.renderEmptyElement)($xeSplit)]);
+        class: getActionIcon(prevItem, nextItem, true)
+      })]) : (0, _ui.renderEmptyElement)($xeSplit)]) : (0, _ui.renderEmptyElement)($xeSplit)]);
     };
     const renderItems = () => {
       const {
@@ -698,9 +767,8 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
       const {
         autoItems
       } = computeAutoItems.value;
-      const isFoldNext = computeIsFoldNext.value;
       const itemVNs = [];
-      itemList.forEach((item, index) => {
+      itemList.forEach((prevItem, index) => {
         const {
           id,
           name,
@@ -711,33 +779,35 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
           renderWidth,
           resizeWidth,
           foldWidth,
-          isVisible,
           isExpand
-        } = item;
+        } = 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%' : (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((0, _vue.h)('div', {
@@ -748,22 +818,23 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
             '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 ? renderHandleBar(item) : (0, _ui.renderEmptyElement)($xeSplit), (0, _vue.h)('div', {
+        }, [(0, _vue.h)('div', {
           itemid: id,
           class: 'vxe-split-pane--wrapper'
         }, [(0, _vue.h)('div', {
           class: 'vxe-split-pane--inner'
         }, defaultSlot ? callSlot(defaultSlot, {
           name,
-          isVisible,
           isExpand
-        }) : [])]), isFoldNext && index < itemList.length - 1 ? renderHandleBar(item) : (0, _ui.renderEmptyElement)($xeSplit)]));
+        }) : [])])]));
+        if (nextItem) {
+          itemVNs.push(renderHandleBar(prevItem, nextItem));
+        }
       });
       return (0, _vue.h)('div', {
         class: 'vxe-split-wrapper'
@@ -803,7 +874,12 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
         class: 'vxe-split--resizable-split-number-prev'
       }), (0, _vue.h)('div', {
         class: 'vxe-split--resizable-split-number-next'
-      })])] : [])]);
+      })])] : []), (0, _vue.h)('div', {
+        class: 'vxe-split--render-vars'
+      }, [(0, _vue.h)('div', {
+        ref: refBarInfoElem,
+        class: 'vxe-split--handle-bar-info'
+      })])]);
     };
     const itemFlag = (0, _vue.ref)(0);
     (0, _vue.watch)(() => props.items ? props.items.length : -1, () => {
@@ -816,10 +892,23 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
       loadItem(props.items || []);
     });
     (0, _vue.watch)(() => reactData.staticItems, val => {
+      const actionOpts = computeActionOpts.value;
+      const {
+        showPrevButton,
+        showNextButton
+      } = actionOpts;
       if (props.items && props.items.length) {
         (0, _log.errLog)('vxe.error.errConflicts', ['<vxe-split-pane ...>', 'items']);
       }
-      reactData.itemList = val;
+      reactData.itemList = val || [];
+      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(item => {
+        if (item.showAction) {
+          (0, _log.warnLog)('vxe.error.removeProp', ['showAction']);
+        }
+      });
       recalculate();
     });
     let resizeObserver;
@@ -834,6 +923,10 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
         });
         resizeObserver.observe(el);
       }
+      const actionOpts = computeActionOpts.value;
+      if (actionOpts.direction) {
+        (0, _log.errLog)('vxe.error.delProp', ['action-config.direction', 'action-config.showPrevButton | action-config.showNextButton']);
+      }
       _ui.globalEvents.on($xeSplit, 'resize', handleGlobalResizeEvent);
     });
     (0, _vue.onUnmounted)(() => {