vxe-pc-ui 3.20.8 → 3.20.10

package/packages/list/src/list.ts

@@ -11,11 +11,9 @@ import { moveRowAnimateToTb, clearRowAnimate } from '../../ui/src/anime'
 import { getItemCacheObj } from './util'
 import VxeLoadingComponent from '../../loading'
 
-import type { VxeListPropTypes, VxeListEmits, VxeComponentSizeType, ListReactData, VxeListDefines, ValueOf, ListInternalData, VxeListConstructor, VxeListPrivateMethods, VxeComponentStyleType, VxeScrollbarPropTypes } from '../../../types'
+import type { VxeListPropTypes, VxeListEmits, ListReactData, VxeListDefines, ValueOf, ListInternalData, VxeListConstructor, VxeListPrivateMethods, VxeComponentStyleType, VxeScrollbarPropTypes, VxeUseSizeComputed, VxeUseVScrollbarComputed, VxeUseInitVScrollbarComputed } from '../../../types'
 
-const { getConfig, getIcon, getI18n, domUtils, scrollbarUtils, menus, globalEvents, globalResize } = VxeUI
-
-const { getThumbOffsetSize, getThumbSize, getScrollFromClick, getScrollFromDrag } = scrollbarUtils
+const { getConfig, getIcon, getI18n, domUtils, menus, globalEvents, globalResize } = VxeUI
 
 const { warnLog, errLog } = createComponentLog('tree')
 
@@ -106,7 +104,9 @@ function createInternalData (): ListInternalData {
 export default /* define-vxe-component start */ defineVxeComponent({
   name: 'VxeList',
   mixins: [
-    globalMixins.sizeMixin
+    globalMixins.sizeMixin,
+    globalMixins.vScrollbarMixin,
+    globalMixins.initVScrollbarMixin
   ],
   props: {
     data: Array as PropType<VxeListPropTypes.Data>,
@@ -162,13 +162,12 @@ export default /* define-vxe-component start */ defineVxeComponent({
       reactData,
       crossListDragRowInfo: crossListDragRowGlobal,
 
-      reFlag: 0
+      reLayoutFlag: 0,
+      reScrollFlag: 0
     }
   },
   computed: {
-    ...({} as {
-      computeSize(): VxeComponentSizeType
-    }),
+    ...({} as VxeUseSizeComputed & VxeUseVScrollbarComputed & VxeUseInitVScrollbarComputed),
     computeRowOpts () {
       const $xeList = this
       const props = $xeList
@@ -384,6 +383,12 @@ export default /* define-vxe-component start */ defineVxeComponent({
       }
       return []
     },
+    getScrollViewElem () {
+      const $xeList = this
+
+      const viewEl = $xeList.$refs.refVirtualWrapper as HTMLDivElement
+      return viewEl || null
+    },
     getRowId (row: any) {
       const $xeList = this
 
@@ -702,8 +707,14 @@ export default /* define-vxe-component start */ defineVxeComponent({
     updateScrollbar () {
       const $xeList = this
 
-      $xeList.updateThumbSize()
-      $xeList.updateThumbOffset()
+      const isVScrollbar = $xeList.computeIsVScrollbar
+      if (isVScrollbar) {
+        return $xeList.$nextTick().then(() => {
+          $xeList.updateThumbSize()
+          $xeList.updateThumbOffset()
+        })
+      }
+      return Promise.resolve()
     },
     /**
      * 重新计算列表
@@ -725,10 +736,11 @@ export default /* define-vxe-component start */ defineVxeComponent({
           parentHeight = parentEl.clientHeight - Math.ceil(XEUtils.toNumber(parentStyle.paddingLeft) + XEUtils.toNumber(parentStyle.paddingRight))
         }
         reactData.parentHeight = parentHeight
-        $xeList.updateScrollbar()
         $xeList.updateHeight()
         if (el.clientWidth && el.clientHeight) {
-          return $xeList.computeScrollLoad()
+          return $xeList.computeScrollLoad().then(() => {
+            $xeList.updateScrollbar()
+          })
         }
       }
       return $xeList.$nextTick()
@@ -739,7 +751,7 @@ export default /* define-vxe-component start */ defineVxeComponent({
 
       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)
@@ -757,7 +769,7 @@ export default /* define-vxe-component start */ defineVxeComponent({
       const reactData = $xeList.reactData
       const internalData = $xeList.internalData
 
-      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
@@ -2086,197 +2098,27 @@ export default /* define-vxe-component start */ defineVxeComponent({
       $xeList.dispatchEvent('row-menu', { row }, evnt)
     },
     // 滚动条
-    updateThumbSize () {
-      const $xeList = this
-      const reactData = $xeList.reactData
-
-      const viewEl = $xeList.$refs.refVirtualWrapper as HTMLDivElement
-      if (!viewEl) {
-        return
-      }
-      if (!viewEl.clientHeight || !viewEl.clientHeight) {
-        return
-      }
-      const trackXEl = $xeList.$refs.refTrackXElem as HTMLDivElement
-      const xThumbWidth = trackXEl ? getThumbSize(viewEl.clientWidth, viewEl.scrollWidth, trackXEl.clientWidth) : 0
-      const thumbXElem = $xeList.$refs.refThumbXElem as HTMLDivElement
-      if (thumbXElem) {
-        thumbXElem.style.width = xThumbWidth + 'px'
-      }
-      reactData.xThumbWidth = xThumbWidth
-
-      const trackYEl = $xeList.$refs.refTrackYElem as HTMLDivElement
-
-      const yThumbHeight = trackYEl ? getThumbSize(viewEl.clientHeight, viewEl.scrollHeight, trackYEl.clientHeight) : 0
-      const thumbYElem = $xeList.$refs.refThumbYElem as HTMLDivElement
-      if (thumbYElem) {
-        thumbYElem.style.height = yThumbHeight + 'px'
-      }
-      reactData.yThumbHeight = yThumbHeight
-    },
-    updateThumbOffset () {
+    bindScrollbarResize () {
       const $xeList = this
-      const reactData = $xeList.reactData
       const internalData = $xeList.internalData
 
-      const viewEl = $xeList.$refs.refVirtualWrapper as HTMLDivElement
-      if (!viewEl) {
-        return
-      }
-      if (!viewEl.clientHeight || !viewEl.clientHeight) {
-        return
-      }
-      const { xThumbWidth, yThumbHeight } = reactData
-      const trackXEl = $xeList.$refs.refTrackXElem as HTMLDivElement
-      const thumbXElem = $xeList.$refs.refThumbXElem as HTMLDivElement
-      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 = $xeList.$refs.refTrackYElem as HTMLDivElement
-      const thumbYElem = $xeList.$refs.refThumbYElem as HTMLDivElement
-      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)`
-      }
-    },
-    clickTrackXEvent (evnt: MouseEvent) {
-      const $xeList = this
-      const reactData = $xeList.reactData
-
-      const trackEl = evnt.currentTarget as HTMLDivElement
-      if (trackEl !== evnt.target) {
-        return
-      }
-      const viewEl = $xeList.$refs.refVirtualWrapper as HTMLDivElement
-      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'
-      })
-    },
-    clickTrackYEvent (evnt: MouseEvent) {
-      const $xeList = this
-      const reactData = $xeList.reactData
-
-      const trackEl = evnt.currentTarget as HTMLDivElement
-      if (trackEl !== evnt.target) {
-        return
-      }
-      const viewEl = $xeList.$refs.refVirtualWrapper as HTMLDivElement
-      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'
-      })
-    },
-    pointerdownThumbXEvent (evnt: PointerEvent) {
-      const $xeList = this
-      const reactData = $xeList.reactData
-      const internalData = $xeList.internalData
-
-      const thumbEl = evnt.currentTarget as HTMLDivElement
-      internalData.isThumbDrag = true
-      thumbEl.setPointerCapture(evnt.pointerId)
-
-      const viewEl = $xeList.$refs.refVirtualWrapper as HTMLDivElement
-      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
-    },
-    pointermoveThumbXEvent (evnt: PointerEvent) {
-      const $xeList = this
-      const reactData = $xeList.reactData
-      const internalData = $xeList.internalData
-
-      const thumbEl = evnt.currentTarget as HTMLDivElement
-      if (!thumbEl.hasPointerCapture(evnt.pointerId)) {
-        return
-      }
-      const { isThumbDrag, thumbDragOffset } = internalData
-      if (isThumbDrag) {
-        const viewEl = $xeList.$refs.refVirtualWrapper as HTMLDivElement
-        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)
-      }
-    },
-    cleatPointerThumbEvent (evnt: PointerEvent) {
-      const $xeList = this
-      const internalData = $xeList.internalData
-
-      const thumbEl = evnt.currentTarget as HTMLDivElement
-      thumbEl.releasePointerCapture(evnt.pointerId)
-      internalData.isThumbDrag = false
-    },
-    pointerdownThumbYEvent (evnt: PointerEvent) {
-      const $xeList = this
-      const reactData = $xeList.reactData
-      const internalData = $xeList.internalData
-
-      const thumbEl = evnt.currentTarget as HTMLDivElement
-      internalData.isThumbDrag = true
-      thumbEl.setPointerCapture(evnt.pointerId)
-
-      const viewEl = $xeList.$refs.refVirtualWrapper as HTMLDivElement
-      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
-    },
-    pointermoveThumbYEvent (evnt: PointerEvent) {
-      const $xeList = this
-      const reactData = $xeList.reactData
-      const internalData = $xeList.internalData
-
-      const thumbEl = evnt.currentTarget as HTMLDivElement
-      if (!thumbEl.hasPointerCapture(evnt.pointerId)) {
-        return
-      }
-      const { isThumbDrag, thumbDragOffset } = internalData
-      if (isThumbDrag) {
-        const viewEl = $xeList.$refs.refVirtualWrapper as HTMLDivElement
-        if (!viewEl) {
-          return
+      const { scrollObserver } = internalData
+      const isVScrollbar = $xeList.computeIsVScrollbar
+      if (isVScrollbar) {
+        if (!scrollObserver) {
+          const el = $xeList.$refs.refElem as HTMLDivElement
+          const viewInnerEl = $xeList.$refs.refVirtualSpaceElem as HTMLDivElement
+          const scrollObserver = globalResize.create(() => {
+            $xeList.reScrollFlag++
+          })
+          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)
       }
     },
 
@@ -2543,12 +2385,13 @@ export default /* define-vxe-component start */ defineVxeComponent({
       const reactData = $xeList.reactData
       const slots = $xeList.$scopedSlots
 
-      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 = $xeList.computeSize
+      const isVScrollbar = $xeList.computeIsVScrollbar
       const wrapperStyles = $xeList.computeWrapperStyles
       const virtualStyles = $xeList.computeVirtualStyles
       const radioOpts = $xeList.computeRadioOpts
@@ -2578,17 +2421,17 @@ export default /* define-vxe-component start */ 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,
@@ -2638,6 +2481,7 @@ export default /* define-vxe-component start */ defineVxeComponent({
           }
         }, [
           h('div', {
+            ref: 'refVirtualSpaceElem',
             class: 'vxe-list--y-space',
             style: {
               height: bodyHeight ? `${bodyHeight}px` : ''
@@ -2666,7 +2510,7 @@ export default /* define-vxe-component start */ defineVxeComponent({
         /**
          * 滚动条
          */
-        useScrollbar
+        isVScrollbar
           ? h('div', {
             class: scrollbarWrapperClss
           }, [
@@ -2740,59 +2584,71 @@ export default /* define-vxe-component start */ defineVxeComponent({
     height () {
       const $xeList = this
 
-      $xeList.reFlag++
+      $xeList.reLayoutFlag++
     },
     maxHeight () {
       const $xeList = this
 
-      $xeList.reFlag++
+      $xeList.reLayoutFlag++
     },
     syncResize () {
       const $xeList = this
 
-      $xeList.reFlag++
+      $xeList.reLayoutFlag++
     },
-    useScrollbar () {
+    computeIsVScrollbar () {
       const $xeList = this
 
-      $xeList.reFlag++
+      $xeList.$nextTick(() => {
+        $xeList.bindScrollbarResize()
+        $xeList.$nextTick(() => {
+          $xeList.reLayoutFlag++
+        })
+      })
     },
     computeRowHeight () {
       const $xeList = this
 
-      $xeList.reFlag++
+      $xeList.reLayoutFlag++
     },
     computeScrollYWidth () {
       const $xeList = this
 
-      $xeList.reFlag++
+      $xeList.reLayoutFlag++
     },
     computeScrollXHeight () {
       const $xeList = this
 
-      $xeList.reFlag++
+      $xeList.reLayoutFlag++
     },
     computeScrollXVisible () {
       const $xeList = this
 
       $xeList.$nextTick(() => {
-        $xeList.reFlag++
+        $xeList.reLayoutFlag++
       })
     },
     computeScrollYVisible () {
       const $xeList = this
 
       $xeList.$nextTick(() => {
-        $xeList.reFlag++
+        $xeList.reLayoutFlag++
       })
     },
-    reFlag () {
+    reLayoutFlag () {
       const $xeList = this
 
       $xeList.recalculate().then(() => {
         $xeList.recalculate()
       })
     },
+    reScrollFlag () {
+      const $xeList = this
+
+      $xeList.updateScrollbar().then(() => {
+        $xeList.updateScrollbar()
+      })
+    },
     checkRowKey () {
       const $xeList = this
 
@@ -2818,7 +2674,7 @@ export default /* define-vxe-component start */ defineVxeComponent({
     const props = $xeList
     const internalData = $xeList.internalData
 
-    const { showSeq, showRadio, showCheckbox, autoResize, useScrollbar } = props
+    const { showSeq, showRadio, showCheckbox, autoResize } = props
     const rowOpts = $xeList.computeRowOpts
     const { useKey, keyField } = rowOpts
     const isDrag = $xeList.computeIsDrag
@@ -2839,25 +2695,12 @@ export default /* define-vxe-component start */ defineVxeComponent({
     if (useKey && !keyField) {
       errLog('vxe.error.reqSupportProp', ['row-config.useKey', 'row-config.keyField'])
     }
-    const el = $xeList.$refs.refElem as HTMLDivElement
-    if (useScrollbar) {
-      const viewInnerEl = $xeList.$refs.refVirtualBody as HTMLDivElement
-      const scrollObserver = globalResize.create(() => {
-        $xeList.reFlag++
-      })
-      if (el) {
-        scrollObserver.observe(el)
-      }
-      if (viewInnerEl) {
-        scrollObserver.observe(viewInnerEl)
-      }
-      internalData.scrollObserver = scrollObserver
-    }
     if (autoResize) {
+      const el = $xeList.$refs.refElem as HTMLDivElement
       const parentEl = $xeList.getParentElem()
       const resizeObserver = globalResize.create(() => {
         if (props.autoResize) {
-          $xeList.reFlag++
+          $xeList.reLayoutFlag++
         }
       })
       if (el) {
@@ -2869,9 +2712,10 @@ export default /* define-vxe-component start */ defineVxeComponent({
       }
       internalData.resizeObserver = resizeObserver
     }
-    $xeList.reFlag++
+    $xeList.reLayoutFlag++
+    $xeList.bindScrollbarResize()
     globalEvents.on($xeList, 'resize', () => {
-      $xeList.reFlag++
+      $xeList.reLayoutFlag++
     })
   },
   activated () {

package/packages/menu/src/menu.ts

@@ -9,7 +9,7 @@ import { createComponentLog } from '../../ui/src/log'
 import VxeLoadingComponent from '../../loading'
 import VxeScrollbarComponent from '../../scrollbar'
 
-import type { VxeMenuDefines, MenuInternalData, MenuReactData, VxeMenuPropTypes, VxeLayoutAsideConstructor, VxeMenuEmits, VxeLayoutAsidePropTypes, VxeComponentPermissionInfo, VxeComponentSizeType, ValueOf, VxeScrollbarInstance } from '../../../types'
+import type { VxeMenuDefines, MenuInternalData, MenuReactData, VxeMenuPropTypes, VxeLayoutAsideConstructor, VxeMenuEmits, VxeLayoutAsidePropTypes, VxeComponentPermissionInfo, VxeComponentSizeType, ValueOf, VxeScrollbarInstance, VxeComponentIsVScrollbar } from '../../../types'
 
 const { errLog } = createComponentLog('menu')
 
@@ -43,6 +43,7 @@ export default /* define-vxe-component start */ defineVxeComponent({
   name: 'VxeMenu',
   mixins: [
     globalMixins.sizeMixin,
+    globalMixins.vScrollbarMixin,
     globalMixins.permissionMixin
   ],
   props: {
@@ -105,6 +106,7 @@ export default /* define-vxe-component start */ defineVxeComponent({
     ...({} as {
       computePermissionInfo(): VxeComponentPermissionInfo
       computeSize(): VxeComponentSizeType
+      computeIsVScrollbar(): VxeComponentIsVScrollbar
       $xeLayoutAside(): VxeLayoutAsideConstructor | null
     }),
     computePropsOpts () {

package/packages/modal/src/modal.ts

@@ -11,7 +11,7 @@ import VxeButtonComponent from '../../button'
 import VxeLoadingComponent from '../../loading'
 import VxeScrollbarComponent from '../../scrollbar'
 
-import type { VxeModalConstructor, VxeModalPropTypes, ModalReactData, ModalInternalData, VxeModalMethods, ModalEventTypes, VxeModalEmits, VxeComponentSizeType, VxeComponentPermissionInfo, ValueOf, VxeButtonConstructor, VxeDrawerConstructor, VxeDrawerMethods, VxeFormConstructor, VxeFormPrivateMethods } from '../../../types'
+import type { VxeModalConstructor, VxeModalPropTypes, ModalReactData, ModalInternalData, VxeModalMethods, ModalEventTypes, VxeModalEmits, VxeComponentSizeType, VxeComponentPermissionInfo, ValueOf, VxeButtonConstructor, VxeDrawerConstructor, VxeDrawerMethods, VxeFormConstructor, VxeFormPrivateMethods, VxeComponentIsVScrollbar } from '../../../types'
 import type { VxeTableConstructor, VxeTablePrivateMethods } from '../../../types/components/table'
 
 const { warnLog, errLog } = createComponentLog('modal')
@@ -49,6 +49,7 @@ export default /* define-vxe-component start */ defineVxeComponent({
   name: 'VxeModal',
   mixins: [
     globalMixins.sizeMixin,
+    globalMixins.vScrollbarMixin,
     globalMixins.permissionMixin
   ],
   props: {
@@ -284,6 +285,7 @@ export default /* define-vxe-component start */ defineVxeComponent({
     ...({} as {
       computePermissionInfo(): VxeComponentPermissionInfo
       computeSize(): VxeComponentSizeType
+      computeIsVScrollbar(): VxeComponentIsVScrollbar
       $xeParentModal(): (VxeModalConstructor & VxeModalMethods) | null
       $xeDrawer(): (VxeDrawerConstructor & VxeDrawerMethods) | null
       $xeTable(): (VxeTableConstructor & VxeTablePrivateMethods) | null