vxe-pc-ui 4.20.8 → 4.20.10

package/packages/list/src/list.ts

@@ -1,7 +1,7 @@
 import { h, PropType, ref, Ref, computed, onBeforeUnmount, watch, reactive, nextTick, onActivated, onMounted, VNode } from 'vue'
 import { defineVxeComponent } from '../../ui/src/comp'
 import XEUtils from 'xe-utils'
-import { VxeUI, useSize, createEvent, renderEmptyElement } from '../../ui'
+import { VxeUI, createEvent, renderEmptyElement } from '../../ui'
 import { getCrossListDragRowInfo } from './store'
 import { isScale, removeClass, addClass, getTpImg, toCssUnit, hasClass } from '../../ui/src/dom'
 import { isEnableConf, getText, enModelValue, deModelValue, getDefaultConfig } from '../../ui/src/utils'
@@ -12,9 +12,7 @@ import VxeLoadingComponent from '../../loading'
 
 import type { VxeListConstructor, VxeListPropTypes, VxeListEmits, ListReactData, VxeListPrivateMethods, ListInternalData, VxeListDefines, ValueOf, ListMethods, ListPrivateMethods, ListPrivateRef, VxeComponentStyleType } from '../../../types'
 
-const { getConfig, getIcon, getI18n, domUtils, scrollbarUtils, menus, globalEvents, globalResize } = VxeUI
-
-const { getThumbOffsetSize, getThumbSize, getScrollFromClick, getScrollFromDrag } = scrollbarUtils
+const { getConfig, getIcon, getI18n, domUtils, useFns, menus, globalEvents, globalResize } = VxeUI
 
 const { warnLog, errLog } = createComponentLog('tree')
 
@@ -167,8 +165,6 @@ export default defineVxeComponent({
 
     const browseObj = XEUtils.browse()
 
-    const { computeSize } = useSize(props)
-
     const reactData = reactive(createReactData())
 
     const internalData = createInternalData()
@@ -179,16 +175,15 @@ export default defineVxeComponent({
     const refHeaderElem = ref() as Ref<HTMLDivElement>
     const refFooterElem = ref() as Ref<HTMLDivElement>
     const refVirtualWrapper = ref() as Ref<HTMLDivElement>
+    const refVirtualSpaceElem = ref() as Ref<HTMLDivElement>
     const refVirtualBody = ref() as Ref<HTMLDivElement>
 
-    const refTrackXElem = ref<HTMLDivElement>()
-    const refTrackYElem = ref<HTMLDivElement>()
-    const refThumbXElem = ref<HTMLDivElement>()
-    const refThumbYElem = ref<HTMLDivElement>()
-
     const refDragRowLineElem = ref<HTMLDivElement>()
     const refDragTipElem = ref<HTMLDivElement>()
 
+    const { computeSize } = useFns.useSize(props)
+    const { computeIsVScrollbar } = useFns.useVScrollbar(props)
+
     const refMaps: ListPrivateRef = {
       refElem
     }
@@ -202,6 +197,22 @@ export default defineVxeComponent({
       getRefMaps: () => refMaps
     } as unknown as VxeListConstructor & VxeListPrivateMethods
 
+    const {
+      refTrackXElem,
+      refTrackYElem,
+      refThumbXElem,
+      refThumbYElem,
+      updateThumbSize,
+      updateThumbOffset,
+      clickTrackXEvent,
+      clickTrackYEvent,
+      pointerdownThumbXEvent,
+      pointermoveThumbXEvent,
+      cleatPointerThumbEvent,
+      pointerdownThumbYEvent,
+      pointermoveThumbYEvent
+    } = useFns.useInitVScrollbar($xeList)
+
     const computeRowOpts = computed(() => {
       return Object.assign({}, getConfig().list.rowConfig, props.rowConfig)
     })
@@ -521,7 +532,6 @@ export default defineVxeComponent({
      */
     const refreshScroll = () => {
       const { lastScrollLeft, lastScrollTop } = internalData
-      updateScrollbar()
       return clearScroll().then(() => {
         if (lastScrollLeft || lastScrollTop) {
           internalData.lastScrollLeft = 0
@@ -532,8 +542,14 @@ export default defineVxeComponent({
     }
 
     const updateScrollbar = () => {
-      updateThumbSize()
-      updateThumbOffset()
+      const isVScrollbar = computeIsVScrollbar.value
+      if (isVScrollbar) {
+        return nextTick().then(() => {
+          updateThumbSize()
+          updateThumbOffset()
+        })
+      }
+      return Promise.resolve()
     }
 
     /**
@@ -553,10 +569,11 @@ export default defineVxeComponent({
           parentHeight = parentEl.clientHeight - Math.ceil(XEUtils.toNumber(parentStyle.paddingLeft) + XEUtils.toNumber(parentStyle.paddingRight))
         }
         reactData.parentHeight = parentHeight
-        updateScrollbar()
         updateHeight()
         if (el.clientWidth && el.clientHeight) {
-          return computeScrollLoad()
+          return computeScrollLoad().then(() => {
+            updateScrollbar()
+          })
         }
       }
       return nextTick()
@@ -565,7 +582,7 @@ export default defineVxeComponent({
     const loadYData = (evnt: Event) => {
       const { scrollYStore } = internalData
       const { startIndex, endIndex, visibleSize, offsetSize, rowHeight } = scrollYStore
-      const scrollBodyElem = evnt.target as HTMLDivElement
+      const scrollBodyElem = evnt.currentTarget as HTMLDivElement
       const scrollTop = scrollBodyElem.scrollTop
       const toVisibleIndex = Math.floor(scrollTop / rowHeight)
       const offsetStartIndex = Math.max(0, toVisibleIndex - 1 - offsetSize)
@@ -580,7 +597,7 @@ export default defineVxeComponent({
     }
 
     const scrollEvent = (evnt: Event) => {
-      const scrollBodyElem = evnt.target as HTMLDivElement
+      const scrollBodyElem = evnt.currentTarget as HTMLDivElement
       const scrollTop = scrollBodyElem.scrollTop
       const scrollLeft = scrollBodyElem.scrollLeft
       const isX = scrollLeft !== internalData.lastScrollLeft
@@ -1610,6 +1627,10 @@ export default defineVxeComponent({
 
     const listMethods: ListMethods = {
       dispatchEvent,
+      getScrollViewElem () {
+        const viewEl = refVirtualWrapper.value
+        return viewEl || null
+      },
       loadData,
       /**
        * 重新加载数据
@@ -1940,173 +1961,24 @@ export default defineVxeComponent({
       }
     }
 
-    const updateThumbSize = () => {
-      const viewEl = refVirtualWrapper.value
-      if (!viewEl) {
-        return
-      }
-      if (!viewEl.clientHeight || !viewEl.clientHeight) {
-        return
-      }
-      const trackXEl = refTrackXElem.value
-      const xThumbWidth = trackXEl ? getThumbSize(viewEl.clientWidth, viewEl.scrollWidth, trackXEl.clientWidth) : 0
-      const thumbXElem = refThumbXElem.value
-      if (thumbXElem) {
-        thumbXElem.style.width = xThumbWidth + 'px'
-      }
-      reactData.xThumbWidth = xThumbWidth
-
-      const trackYEl = refTrackYElem.value
-
-      const yThumbHeight = trackYEl ? getThumbSize(viewEl.clientHeight, viewEl.scrollHeight, trackYEl.clientHeight) : 0
-      const thumbYElem = refThumbYElem.value
-      if (thumbYElem) {
-        thumbYElem.style.height = yThumbHeight + 'px'
-      }
-      reactData.yThumbHeight = yThumbHeight
-    }
-
-    const updateThumbOffset = () => {
-      const viewEl = refVirtualWrapper.value
-      if (!viewEl) {
-        return
-      }
-      if (!viewEl.clientHeight || !viewEl.clientHeight) {
-        return
-      }
-      const { xThumbWidth, yThumbHeight } = reactData
-      const trackXEl = refTrackXElem.value
-      const thumbXElem = refThumbXElem.value
-      const xThumbLeft = trackXEl && xThumbWidth ? getThumbOffsetSize(viewEl.scrollLeft, viewEl.clientWidth, viewEl.scrollWidth, trackXEl.clientWidth, xThumbWidth) : 0
-      internalData.xThumbLeft = xThumbLeft
-      if (thumbXElem && xThumbWidth) {
-        thumbXElem.style.width = xThumbWidth + 'px'
-        thumbXElem.style.transform = `translateX(${xThumbLeft}px)`
-      }
-
-      const trackYEl = refTrackYElem.value
-      const thumbYElem = refThumbYElem.value
-      const yThumbTop = trackYEl && yThumbHeight ? getThumbOffsetSize(viewEl.scrollTop, viewEl.clientHeight, viewEl.scrollHeight, trackYEl.clientHeight, yThumbHeight) : 0
-      internalData.yThumbTop = yThumbTop
-      if (thumbYElem && yThumbHeight) {
-        thumbYElem.style.height = yThumbHeight + 'px'
-        thumbYElem.style.transform = `translateY(${yThumbTop}px)`
-      }
-    }
-
-    const clickTrackXEvent = (evnt: MouseEvent) => {
-      const trackEl = evnt.currentTarget as HTMLDivElement
-      if (trackEl !== evnt.target) {
-        return
-      }
-      const viewEl = refVirtualWrapper.value
-      if (!viewEl) {
-        return
-      }
-      const { xThumbWidth } = reactData
-      const trackRect = trackEl.getBoundingClientRect()
-      viewEl.scrollTo({
-        left: getScrollFromClick(evnt.clientX - trackRect.left, viewEl.clientWidth, viewEl.scrollWidth, trackEl.clientWidth, xThumbWidth),
-        behavior: 'auto'
-      })
-    }
-
-    const clickTrackYEvent = (evnt: MouseEvent) => {
-      const trackEl = evnt.currentTarget as HTMLDivElement
-      if (trackEl !== evnt.target) {
-        return
-      }
-      const viewEl = refVirtualWrapper.value
-      if (!viewEl) {
-        return
-      }
-      const { yThumbHeight } = reactData
-      const trackRect = trackEl.getBoundingClientRect()
-      viewEl.scrollTo({
-        top: getScrollFromClick(evnt.clientY - trackRect.top, viewEl.clientHeight, viewEl.scrollHeight, trackEl.clientHeight, yThumbHeight),
-        behavior: 'auto'
-      })
-    }
-
-    const pointerdownThumbXEvent = (evnt: PointerEvent) => {
-      const thumbEl = evnt.currentTarget as HTMLDivElement
-      internalData.isThumbDrag = true
-      thumbEl.setPointerCapture(evnt.pointerId)
-
-      const viewEl = refVirtualWrapper.value
-      if (!viewEl) {
-        return
-      }
-      const { xThumbWidth } = reactData
-      const trackEl = thumbEl.parentElement as HTMLDivElement
-      const trackRect = trackEl.getBoundingClientRect()
-      const pointerPosition = evnt.clientX - trackRect.left
-      // 记录 thumb 的偏移
-      const thumbOffset = getThumbOffsetSize(viewEl.scrollLeft, viewEl.clientWidth, viewEl.scrollWidth, trackEl.clientWidth, xThumbWidth)
-      internalData.thumbDragOffset = pointerPosition - thumbOffset
-    }
-
-    const pointermoveThumbXEvent = (evnt: PointerEvent) => {
-      const thumbEl = evnt.currentTarget as HTMLDivElement
-      if (!thumbEl.hasPointerCapture(evnt.pointerId)) {
-        return
-      }
-      const { isThumbDrag, thumbDragOffset } = internalData
-      if (isThumbDrag) {
-        const viewEl = refVirtualWrapper.value
-        if (!viewEl) {
-          return
-        }
-        const { xThumbWidth } = reactData
-        const thumbEl = evnt.currentTarget as HTMLDivElement
-        const trackEl = thumbEl.parentElement as HTMLDivElement
-        const trackRect = trackEl.getBoundingClientRect()
-        // 更新偏移
-        viewEl.scrollLeft = getScrollFromDrag(evnt.clientX - trackRect.left, thumbDragOffset, viewEl.clientWidth, viewEl.scrollWidth, trackEl.clientWidth, xThumbWidth)
-      }
-    }
-
-    const cleatPointerThumbEvent = (evnt: PointerEvent) => {
-      const thumbEl = evnt.currentTarget as HTMLDivElement
-      thumbEl.releasePointerCapture(evnt.pointerId)
-      internalData.isThumbDrag = false
-    }
-
-    const pointerdownThumbYEvent = (evnt: PointerEvent) => {
-      const thumbEl = evnt.currentTarget as HTMLDivElement
-      internalData.isThumbDrag = true
-      thumbEl.setPointerCapture(evnt.pointerId)
-
-      const viewEl = refVirtualWrapper.value
-      if (!viewEl) {
-        return
-      }
-      const { yThumbHeight } = reactData
-      const trackEl = thumbEl.parentElement as HTMLDivElement
-      const trackRect = trackEl.getBoundingClientRect()
-      const pointerPosition = evnt.clientY - trackRect.top
-      // 记录 thumb 的偏移
-      const thumbOffset = getThumbOffsetSize(viewEl.scrollTop, viewEl.clientHeight, viewEl.scrollHeight, trackEl.clientHeight, yThumbHeight)
-      internalData.thumbDragOffset = pointerPosition - thumbOffset
-    }
-
-    const pointermoveThumbYEvent = (evnt: PointerEvent) => {
-      const thumbEl = evnt.currentTarget as HTMLDivElement
-      if (!thumbEl.hasPointerCapture(evnt.pointerId)) {
-        return
-      }
-      const { isThumbDrag, thumbDragOffset } = internalData
-      if (isThumbDrag) {
-        const viewEl = refVirtualWrapper.value
-        if (!viewEl) {
-          return
+    const bindScrollbarResize = () => {
+      const { scrollObserver } = internalData
+      const isVScrollbar = computeIsVScrollbar.value
+      if (isVScrollbar) {
+        if (!scrollObserver) {
+          const el = refElem.value
+          const viewInnerEl = refVirtualSpaceElem.value
+          const scrollObserver = globalResize.create(() => {
+            reScrollFlag.value++
+          })
+          if (el) {
+            scrollObserver.observe(el)
+          }
+          if (viewInnerEl) {
+            scrollObserver.observe(viewInnerEl)
+          }
+          internalData.scrollObserver = scrollObserver
         }
-        const { yThumbHeight } = reactData
-        const thumbEl = evnt.currentTarget as HTMLDivElement
-        const trackEl = thumbEl.parentElement as HTMLDivElement
-        const trackRect = trackEl.getBoundingClientRect()
-        // 更新偏移
-        viewEl.scrollTop = getScrollFromDrag(evnt.clientY - trackRect.top, thumbDragOffset, viewEl.clientHeight, viewEl.scrollHeight, trackEl.clientHeight, yThumbHeight)
       }
     }
 
@@ -2348,12 +2220,13 @@ export default defineVxeComponent({
     }
 
     const renderVN = () => {
-      const { showCheckbox, className, loading, useScrollbar } = props
+      const { showCheckbox, className, loading } = props
       const { bodyHeight, topSpaceHeight, rowList, isAllChecked, isAllIndeterminate, xThumbWidth, yThumbHeight } = reactData
       const defaultSlot = slots.default
       const headerSlot = slots.header
       const footerSlot = slots.footer
       const vSize = computeSize.value
+      const isVScrollbar = computeIsVScrollbar.value
       const wrapperStyles = computeWrapperStyles.value
       const virtualStyles = computeVirtualStyles.value
       const radioOpts = computeRadioOpts.value
@@ -2384,17 +2257,17 @@ export default defineVxeComponent({
         ref: refElem,
         class: [
           'vxe-list',
-          useScrollbar ? `ov-x--${scrollXVisible === false ? 'hidden' : 'visible'}` : '',
-          useScrollbar ? `ov-y--${scrollYVisible === false ? 'hidden' : 'visible'}` : '',
-          useScrollbar ? `sx-pos--${scrollbarXToTop ? 'top' : 'bottom'}` : '',
-          useScrollbar ? `sy-pos--${scrollbarYToLeft ? 'left' : 'right'}` : '',
+          isVScrollbar ? `ov-x--${scrollXVisible === false ? 'hidden' : 'visible'}` : '',
+          isVScrollbar ? `ov-y--${scrollYVisible === false ? 'hidden' : 'visible'}` : '',
+          isVScrollbar ? `sx-pos--${scrollbarXToTop ? 'top' : 'bottom'}` : '',
+          isVScrollbar ? `sy-pos--${scrollbarYToLeft ? 'left' : 'right'}` : '',
           className ? (XEUtils.isFunction(className) ? className({ $list: $xeList }) : className) : '',
           {
             [`size--${vSize}`]: vSize,
-            'is--virtual-scrollbar': useScrollbar,
-            'ov-padding': useScrollbar && scrollbarOpts.padding,
-            'ov-x--auto-hide': useScrollbar && scrollXAutoHide,
-            'ov-y--auto-hide': useScrollbar && scrollYAutoHide,
+            'is--virtual-scrollbar': isVScrollbar,
+            'ov-padding': isVScrollbar && scrollbarOpts.padding,
+            'ov-x--auto-hide': isVScrollbar && scrollXAutoHide,
+            'ov-y--auto-hide': isVScrollbar && scrollYAutoHide,
             'overflow-y': yThumbHeight,
             'overflow-x': xThumbWidth,
             'is--drag': isDrag,
@@ -2443,6 +2316,7 @@ export default defineVxeComponent({
           onScroll: scrollEvent
         }, [
           h('div', {
+            ref: refVirtualSpaceElem,
             class: 'vxe-list--y-space',
             style: {
               height: bodyHeight ? `${bodyHeight}px` : ''
@@ -2471,7 +2345,7 @@ export default defineVxeComponent({
         /**
          * 滚动条
          */
-        useScrollbar
+        isVScrollbar
           ? h('div', {
             class: scrollbarWrapperClss
           }, [
@@ -2536,44 +2410,56 @@ export default defineVxeComponent({
       loadData(props.data || [])
     })
 
-    const reFlag = ref(0)
+    const reScrollFlag = ref(0)
+    const reLayoutFlag = ref(0)
     watch(() => props.height, () => {
-      reFlag.value++
+      reLayoutFlag.value++
     })
     watch(() => props.maxHeight, () => {
-      reFlag.value++
+      reLayoutFlag.value++
     })
     watch(() => props.syncResize, () => {
-      reFlag.value++
+      reLayoutFlag.value++
     })
-    watch(() => props.useScrollbar, () => {
-      reFlag.value++
+    watch(computeIsVScrollbar, () => {
+      nextTick(() => {
+        bindScrollbarResize()
+        nextTick(() => {
+          reLayoutFlag.value++
+        })
+      })
     })
     watch(computeRowHeight, () => {
-      reFlag.value++
+      reLayoutFlag.value++
     })
     watch(computeScrollYWidth, () => {
-      reFlag.value++
+      reLayoutFlag.value++
     })
     watch(computeScrollXHeight, () => {
-      reFlag.value++
+      reLayoutFlag.value++
     })
     watch(computeScrollXVisible, () => {
       nextTick(() => {
-        reFlag.value++
+        reLayoutFlag.value++
       })
     })
     watch(computeScrollYVisible, () => {
       nextTick(() => {
-        reFlag.value++
+        reLayoutFlag.value++
       })
     })
-    watch(reFlag, () => {
+    watch(reLayoutFlag, () => {
       recalculate().then(() => {
         recalculate()
       })
     })
 
+    watch(reScrollFlag, () => {
+      updateScrollbar().then(() => {
+        updateScrollbar()
+      })
+    })
+
     watch(() => props.checkRowKey, () => {
       updateRadioModeValue()
     })
@@ -2600,7 +2486,7 @@ export default defineVxeComponent({
     })
 
     onMounted(() => {
-      const { showSeq, showRadio, showCheckbox, autoResize, useScrollbar } = props
+      const { showSeq, showRadio, showCheckbox, autoResize } = props
       const rowOpts = computeRowOpts.value
       const { useKey } = rowOpts
 
@@ -2623,25 +2509,12 @@ export default defineVxeComponent({
       if (useKey && !keyField) {
         errLog('vxe.error.reqSupportProp', ['row-config.useKey', 'row-config.keyField'])
       }
-      const el = refElem.value
-      if (useScrollbar) {
-        const viewInnerEl = refVirtualBody.value
-        const scrollObserver = globalResize.create(() => {
-          reFlag.value++
-        })
-        if (el) {
-          scrollObserver.observe(el)
-        }
-        if (viewInnerEl) {
-          scrollObserver.observe(viewInnerEl)
-        }
-        internalData.scrollObserver = scrollObserver
-      }
       if (autoResize) {
+        const el = refElem.value
         const parentEl = getParentElem()
         const resizeObserver = globalResize.create(() => {
           if (props.autoResize) {
-            reFlag.value++
+            reLayoutFlag.value++
           }
         })
         if (el) {
@@ -2652,9 +2525,10 @@ export default defineVxeComponent({
         }
         internalData.resizeObserver = resizeObserver
       }
-      reFlag.value++
+      reLayoutFlag.value++
+      bindScrollbarResize()
       globalEvents.on($xeList, 'resize', () => {
-        reFlag.value++
+        reLayoutFlag.value++
       })
     })
 

package/packages/menu/src/menu.ts

@@ -1,7 +1,7 @@
 import { ref, h, reactive, Teleport, PropType, inject, resolveComponent, watch, VNode, computed, nextTick, onBeforeUnmount, onMounted } from 'vue'
 import { defineVxeComponent } from '../../ui/src/comp'
 import XEUtils from 'xe-utils'
-import { VxeUI, createEvent, permission, useSize, globalEvents, renderEmptyElement } from '../../ui'
+import { VxeUI, createEvent, permission, globalEvents, renderEmptyElement } from '../../ui'
 import { getPopupContainer, scrollToView, toCssUnit } from '../../ui/src/dom'
 import { getLastZIndex, nextZIndex, isEnableConf, getDefaultConfig } from '../../ui/src/utils'
 import { getSlotVNs } from '../../ui/src/vn'
@@ -13,7 +13,7 @@ import type { VxeMenuDefines, VxeMenuPropTypes, MenuInternalData, MenuReactData,
 
 const { errLog } = createComponentLog('menu')
 
-const { menus, getConfig, getIcon } = VxeUI
+const { menus, useFns, getConfig, getIcon } = VxeUI
 
 function createInternalData (): MenuInternalData {
   return {
@@ -100,7 +100,8 @@ export default defineVxeComponent({
     const refCollapseBodyElem = ref<HTMLDivElement>()
     const refCollapseBodyScrollbar = ref<VxeScrollbarInstance>()
 
-    const { computeSize } = useSize(props)
+    const { computeSize } = useFns.useSize(props)
+    const { computeIsVScrollbar } = useFns.useVScrollbar(props)
 
     const reactData = reactive(createReactData())
     const internalData = createInternalData()
@@ -701,9 +702,10 @@ export default defineVxeComponent({
     }
 
     const renderVN = () => {
-      const { loading, collapseFixed, appendTo, useScrollbar } = props
+      const { loading, collapseFixed, appendTo } = props
       const { initialized, menuList, collapseStyle, isEnterCollapse } = reactData
       const vSize = computeSize.value
+      const isVScrollbar = computeIsVScrollbar.value
       const isCollapsed = computeIsCollapsed.value
       const currBorder = computeCurrBorder.value
       const varStyle = computeVarStyle.value
@@ -762,7 +764,7 @@ export default defineVxeComponent({
                     class: 'vxe-menu--header'
                   }, headerSlot(stParams))
                   : renderEmptyElement($xeMenu),
-                useScrollbar && isEnterCollapse
+                isVScrollbar && isEnterCollapse
                   ? h(VxeScrollbarComponent, {
                     ref: refCollapseBodyScrollbar,
                     class: 'vxe-menu--scrollbar-body',

package/packages/modal/src/modal.ts

@@ -3,7 +3,7 @@ import { defineVxeComponent } from '../../ui/src/comp'
 import XEUtils from 'xe-utils'
 import { getEventTargetNode, getPopupContainer, getPopupWrapperElement, isScale, toCssUnit } from '../../ui/src/dom'
 import { getLastZIndex, nextZIndex, getSubLastZIndex, nextSubZIndex, getFuncText, handleBooleanDefaultValue, getDefaultConfig } from '../../ui/src/utils'
-import { VxeUI, getConfig, getIcon, getI18n, globalEvents, GLOBAL_EVENT_KEYS, createEvent, useSize, renderEmptyElement } from '../../ui'
+import { VxeUI, getConfig, getIcon, getI18n, globalEvents, GLOBAL_EVENT_KEYS, createEvent, useFns, renderEmptyElement } from '../../ui'
 import { getSlotVNs } from '../../ui/src/vn'
 import { createComponentLog } from '../../ui/src/log'
 import { allActiveModals } from './store'
@@ -266,7 +266,8 @@ export default defineVxeComponent({
     const $xeTable = inject<(VxeTableConstructor & VxeTablePrivateMethods) | null>('$xeTable', null)
     const $xeForm = inject<(VxeFormConstructor & VxeFormPrivateMethods)| null>('$xeForm', null)
 
-    const { computeSize } = useSize(props)
+    const { computeSize } = useFns.useSize(props)
+    const { computeIsVScrollbar } = useFns.useVScrollbar(props)
 
     const reactData = reactive(createReactData())
     const internalData = createInternalData()
@@ -1398,8 +1399,9 @@ export default defineVxeComponent({
     }
 
     const renderBody = () => {
-      const { slots: propSlots = {}, status, message, iconStatus, useScrollbar, useHtml } = props
+      const { slots: propSlots = {}, status, message, iconStatus, useHtml } = props
       const content = props.content || message
+      const isVScrollbar = computeIsVScrollbar.value
       const isMsg = computeIsMsg.value
       const scrollbarProps = computeScrollbarProps.value
       const defaultSlot = slots.default || propSlots.default
@@ -1420,7 +1422,7 @@ export default defineVxeComponent({
 
       if (useHtml && !defaultSlot) {
         contVNs.push(
-          useScrollbar
+          isVScrollbar
             ? h(VxeScrollbarComponent, {
               key: 'shc',
               class: 'vxe-modal--scrollbar-content',
@@ -1443,7 +1445,7 @@ export default defineVxeComponent({
         )
       } else {
         contVNs.push(
-          useScrollbar
+          isVScrollbar
             ? h(VxeScrollbarComponent, {
               key: 'sdc',
               class: 'vxe-modal--scrollbar-content',