vxe-pc-ui 3.9.0 → 3.9.2

package/packages/split/src/split.ts

@@ -5,7 +5,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'
 
 import type { SplitReactData, VxeSplitPropTypes, VxeComponentSizeType, SplitInternalData, VxeSplitEmits, ValueOf, VxeSplitPaneProps, VxeSplitDefines } from '../../../types'
 
@@ -43,7 +43,9 @@ export default /* define-vxe-component start */ defineVxeComponent({
     const xID = XEUtils.uniqueId()
     const reactData: SplitReactData = {
       staticItems: [],
-      itemList: []
+      itemList: [],
+      barWidth: 0,
+      barHeight: 0
     }
     const internalData: SplitInternalData = {
       wrapperWidth: 0,
@@ -100,7 +102,7 @@ export default /* define-vxe-component start */ defineVxeComponent({
       const $xeSplit = this
       const reactData = $xeSplit.reactData as SplitReactData
 
-      return reactData.itemList.filter(item => item.isVisible)
+      return reactData.itemList.filter(item => item.isExpand)
     },
     computeAutoItems () {
       const $xeSplit = this
@@ -156,10 +158,20 @@ export default /* define-vxe-component start */ defineVxeComponent({
       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()
     }
   },
@@ -192,7 +204,6 @@ export default /* define-vxe-component start */ defineVxeComponent({
       const { itemList } = reactData
       itemList.forEach(item => {
         item.isExpand = true
-        item.isVisible = true
         item.foldHeight = 0
         item.foldWidth = 0
         item.resizeHeight = 0
@@ -207,7 +218,6 @@ export default /* define-vxe-component start */ defineVxeComponent({
 
       const { staticItems } = reactData
       const itemDef = {
-        isVisible: true,
         isExpand: true,
         renderWidth: 0,
         resizeWidth: 0,
@@ -255,6 +265,7 @@ export default /* define-vxe-component start */ defineVxeComponent({
         const { vertical } = props
         const { itemList } = reactData
         const el = $xeSplit.$refs.refElem as HTMLDivElement
+        const barInfoElem = $xeSplit.$refs.refBarInfoElem as HTMLDivElement
         if (!el) {
           return
         }
@@ -263,6 +274,12 @@ export default /* define-vxe-component start */ 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 = $xeSplit.computeItemOpts
         const allMinWidth = XEUtils.toNumber(itemOpts.minWidth)
         const allMinHeight = XEUtils.toNumber(itemOpts.minHeight)
@@ -274,7 +291,7 @@ export default /* define-vxe-component start */ defineVxeComponent({
             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)
               }
@@ -285,7 +302,7 @@ export default /* define-vxe-component start */ 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.toNumber(getGlobalDefaultConfig(item.minHeight, allMinHeight)), reMeanHeight)
             })
@@ -297,7 +314,7 @@ export default /* define-vxe-component start */ defineVxeComponent({
             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)
               }
@@ -308,14 +325,14 @@ export default /* define-vxe-component start */ 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.toNumber(getGlobalDefaultConfig(item.minWidth, allMinWidth)), reMeanWidth)
             })
           }
         }
-        internalData.wrapperWidth = wWidth
-        internalData.wrapperHeight = wHeight
+        internalData.wrapperWidth = contentWidth
+        internalData.wrapperHeight = contentHeight
       })
     },
     dragEvent (evnt: MouseEvent) {
@@ -335,36 +352,28 @@ export default /* define-vxe-component start */ defineVxeComponent({
       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 as HTMLDivElement
+      const nextEl = handleEl.nextElementSibling as HTMLDivElement
+      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 as HTMLDivElement
       const rsSplitTipEl = rsSplitLineEl ? rsSplitLineEl.children[0] as HTMLDivElement : 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<HTMLDivElement>(`.vxe-split-pane[itemid="${prevItem.id}"]`) : null
-      const nextEl = item ? el.querySelector<HTMLDivElement>(`.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)
 
@@ -505,7 +514,7 @@ export default /* define-vxe-component start */ defineVxeComponent({
         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) => {
@@ -520,7 +529,7 @@ export default /* define-vxe-component start */ defineVxeComponent({
         }
         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()
       }
 
@@ -530,148 +539,197 @@ export default /* define-vxe-component start */ defineVxeComponent({
       }
       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: MouseEvent) {
+    handleItemActionEvent (evnt: MouseEvent, prevItem: VxeSplitDefines.PaneConfig, nextItem: VxeSplitDefines.PaneConfig, isNext: boolean) {
       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: MouseEvent) {
+      const $xeSplit = this
       const reactData = $xeSplit.reactData
 
-      const el = $xeSplit.$refs.refElem as HTMLDivElement
-      if (!el) {
-        return
+      const { itemList } = reactData
+      const actionOpts = $xeSplit.computeActionOpts
+      const btnEl = evnt.currentTarget as HTMLDivElement
+      const btnWrapperEl = btnEl.parentElement as HTMLDivElement
+      const handleEl = btnWrapperEl.parentElement as HTMLDivElement
+      const prevEl = handleEl.previousElementSibling as HTMLDivElement
+      const prevId = prevEl.getAttribute('itemid')
+      const prevItem = itemList.find(item => item.id === prevId)
+      const nextEl = handleEl.nextElementSibling as HTMLDivElement
+      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: MouseEvent) {
+      const $xeSplit = this
+      const reactData = $xeSplit.reactData
+
       const { itemList } = reactData
-      const isFoldNext = $xeSplit.computeIsFoldNext
+      const actionOpts = $xeSplit.computeActionOpts
       const btnEl = evnt.currentTarget as HTMLDivElement
-      const handleEl = btnEl.parentElement as HTMLDivElement
-      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 as HTMLDivElement
+      const handleEl = btnWrapperEl.parentElement as HTMLDivElement
+      const prevEl = handleEl.previousElementSibling as HTMLDivElement
+      const prevId = prevEl.getAttribute('itemid')
+      const prevItem = itemList.find(item => item.id === prevId)
+      const nextEl = handleEl.nextElementSibling as HTMLDivElement
+      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: MouseEvent) {
+    handleNextActionDblclickEvent (evnt: MouseEvent) {
       const $xeSplit = this
       const reactData = $xeSplit.reactData
 
       const { itemList } = reactData
       const actionOpts = $xeSplit.computeActionOpts
       const btnEl = evnt.currentTarget as HTMLDivElement
-      const handleEl = btnEl.parentElement as HTMLDivElement
-      const itemId = handleEl.getAttribute('itemid')
-      const itemIndex = XEUtils.findIndexOf(itemList, item => item.id === itemId)
-      const item = itemList[itemIndex]
+      const btnWrapperEl = btnEl.parentElement as HTMLDivElement
+      const handleEl = btnWrapperEl.parentElement as HTMLDivElement
+      const prevEl = handleEl.previousElementSibling as HTMLDivElement
+      const prevId = prevEl.getAttribute('itemid')
+      const prevItem = itemList.find(item => item.id === prevId)
+      const nextEl = handleEl.nextElementSibling as HTMLDivElement
+      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: MouseEvent) {
+    handleNextActionClickEvent (evnt: MouseEvent) {
       const $xeSplit = this
       const reactData = $xeSplit.reactData
 
       const { itemList } = reactData
       const actionOpts = $xeSplit.computeActionOpts
       const btnEl = evnt.currentTarget as HTMLDivElement
-      const handleEl = btnEl.parentElement as HTMLDivElement
-      const itemId = handleEl.getAttribute('itemid')
-      const itemIndex = XEUtils.findIndexOf(itemList, item => item.id === itemId)
-      const item = itemList[itemIndex]
+      const btnWrapperEl = btnEl.parentElement as HTMLDivElement
+      const handleEl = btnWrapperEl.parentElement as HTMLDivElement
+      const prevEl = handleEl.previousElementSibling as HTMLDivElement
+      const prevId = prevEl.getAttribute('itemid')
+      const prevItem = itemList.find(item => item.id === prevId)
+      const nextEl = handleEl.nextElementSibling as HTMLDivElement
+      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: VxeSplitDefines.PaneConfig) {
+    getActionIcon (prevItem: VxeSplitDefines.PaneConfig, nextItem: VxeSplitDefines.PaneConfig, isNext: boolean) {
       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: 'SPLIT_TOP_ACTION' | 'SPLIT_BOTTOM_ACTION' | 'SPLIT_LEFT_ACTION' | 'SPLIT_RIGHT_ACTION' | '' = ''
-        if (isFoldNext) {
-          if (vertical) {
-            iconName = isExpand ? bottomIcon : topIcon
-          } else {
-            iconName = isExpand ? rightIcon : leftIcon
-          }
+      let iconName: 'SPLIT_TOP_ACTION' | 'SPLIT_BOTTOM_ACTION' | 'SPLIT_LEFT_ACTION' | 'SPLIT_RIGHT_ACTION' | '' = ''
+      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 getIcon()[iconName]
+      } else {
+        if (isNext) {
+          iconName = nextItem.isExpand ? rightIcon : leftIcon
+        } else {
+          iconName = prevItem.isExpand ? leftIcon : rightIcon
         }
       }
+      if (iconName) {
+        return getIcon()[iconName]
+      }
       return ''
     },
 
     //
     // Render
     //
-    renderHandleBar (h: CreateElement, item: VxeSplitDefines.PaneConfig) {
+    renderHandleBar (h: CreateElement, prevItem: VxeSplitDefines.PaneConfig, nextItem: VxeSplitDefines.PaneConfig) {
       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: {
-        click?: (evnt: MouseEvent) => void
-        dblclick?: (evnt: MouseEvent) => void
-      } = {}
-      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',
@@ -680,14 +738,36 @@ export default /* define-vxe-component start */ defineVxeComponent({
             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)
       ])
@@ -703,34 +783,36 @@ export default /* define-vxe-component start */ defineVxeComponent({
       const { immediate } = resizeOpts
       const visibleItems = $xeSplit.computeVisibleItems
       const { autoItems } = $xeSplit.computeAutoItems
-      const isFoldNext = $xeSplit.computeIsFoldNext
       const itemVNs: VNode[] = []
-      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: Record<string, string | number> = {}
-        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)
           }
         }
 
@@ -745,14 +827,12 @@ export default /* define-vxe-component start */ 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 ? $xeSplit.renderHandleBar(h, item) : renderEmptyElement($xeSplit),
             h('div', {
               attrs: {
                 itemid: id
@@ -761,11 +841,14 @@ export default /* define-vxe-component start */ defineVxeComponent({
             }, [
               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'
@@ -812,7 +895,15 @@ export default /* define-vxe-component start */ defineVxeComponent({
                 })
               ])
             ]
-          : [])
+          : []),
+        h('div', {
+          class: 'vxe-split--render-vars'
+        }, [
+          h('div', {
+            ref: 'refBarInfoElem',
+            class: 'vxe-split--handle-bar-info'
+          })
+        ])
       ])
     }
   },
@@ -836,6 +927,10 @@ export default /* define-vxe-component start */ defineVxeComponent({
     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()
     })

package/packages/upload/src/upload.ts

@@ -603,7 +603,9 @@ export default /* define-vxe-component start */ defineVxeComponent({
           if (url) {
             const urlObj = XEUtils.parseUrl(url)
             if (!urlObj.searchQuery[nameProp]) {
-              return `${url}${url.indexOf('?') === -1 ? '?' : '&'}${encodeURIComponent(item[nameProp] || '')}`
+              if (url.indexOf('blob:') === -1) {
+                return `${url}${url.indexOf('?') === -1 ? '?' : '&'}${encodeURIComponent(item[nameProp] || '')}`
+              }
             }
           }
           return url