vxe-pc-ui 3.20.9 → 3.20.11

package/packages/tree/src/tree.ts

@@ -7,18 +7,17 @@ import { createComponentLog } from '../../ui/src/log'
 import { getSlotVNs } from '../../ui/src/vn'
 import { crossTreeDragNodeGlobal, getCrossTreeDragNodeInfo } from './store'
 import { toCssUnit, isScale, getPaddingTopBottomSize, addClass, removeClass, getTpImg, hasControlKey, getEventTargetNode, hasClass } from '../../ui/src/dom'
-import { isEnableConf, enModelValue, deModelValue, getText, getDefaultConfig } from '../../ui/src/utils'
+import { isEnableConf, enModelValue, deModelValue, getText } from '../../ui/src/utils'
 import { moveRowAnimateToTb, clearRowAnimate } from '../../ui/src/anime'
 import VxeLoadingComponent from '../../loading'
 import VxeTooltipComponent from '../../tooltip'
 
-import type { TreeReactData, VxeTreeEmits, VxeTreeConstructor, VxeTreePropTypes, TreeInternalData, VxeTreeDefines, VxeTreePrivateMethods, VxeComponentSizeType, VxeComponentIsVScrollbar, ValueOf, VxeTooltipInstance, VxeComponentStyleType, VxeScrollbarPropTypes } from '../../../types'
+import type { TreeReactData, VxeTreeEmits, VxeTreeConstructor, VxeTreePropTypes, TreeInternalData, VxeTreeDefines, VxeTreePrivateMethods, ValueOf, VxeTooltipInstance, VxeComponentStyleType, VxeScrollbarPropTypes, VxeUseSizeComputed, VxeUseVScrollbarComputed, VxeUseInitVScrollbarComputed } from '../../../types'
 
 const { warnLog, errLog } = createComponentLog('tree')
 
-const { menus, scrollbarUtils, getConfig, getI18n, getIcon } = VxeUI
-
-const { getThumbOffsetSize, getThumbSize, getScrollFromClick, getScrollFromDrag } = scrollbarUtils
+const { menus, getConfig, getI18n, getIcon, baseUtils } = VxeUI
+const { getDefVal } = baseUtils
 
 let crossTreeDragNodeObj: {
   $oldTree: VxeTreeConstructor & VxeTreePrivateMethods
@@ -620,7 +619,8 @@ export default /* define-vxe-component start */ defineVxeComponent({
   name: 'VxeTree',
   mixins: [
     globalMixins.sizeMixin,
-    globalMixins.vScrollbarMixin
+    globalMixins.vScrollbarMixin,
+    globalMixins.initVScrollbarMixin
   ],
   props: {
     data: Array as PropType<VxeTreePropTypes.Data>,
@@ -752,7 +752,7 @@ export default /* define-vxe-component start */ defineVxeComponent({
     virtualYConfig: Object as PropType<VxeTreePropTypes.VirtualYConfig>,
     useScrollbar: {
       type: Boolean as PropType<VxeTreePropTypes.UseScrollbar>,
-      default: () => getDefaultConfig(getConfig().tree.useScrollbar, getConfig().useScrollbar)
+      default: () => getDefVal(getConfig().tree.useScrollbar, getConfig().useScrollbar)
     },
     scrollbarConfig: Object as PropType<VxeTreePropTypes.ScrollbarConfig>
   },
@@ -779,10 +779,7 @@ export default /* define-vxe-component start */ defineVxeComponent({
     }
   },
   computed: {
-    ...({} as {
-      computeSize(): VxeComponentSizeType,
-      computeIsVScrollbar(): VxeComponentIsVScrollbar
-    }),
+    ...({} as VxeUseSizeComputed & VxeUseVScrollbarComputed & VxeUseInitVScrollbarComputed),
     computeTitleField () {
       const $xeTree = this
       const props = $xeTree
@@ -972,42 +969,42 @@ export default /* define-vxe-component start */ defineVxeComponent({
 
       const scrollbarOpts = $xeTree.computeScrollbarOpts as VxeTreePropTypes.ScrollbarConfig
       const scrollbarXOpts = $xeTree.computeScrollbarXOpts as VxeScrollbarPropTypes.XConfig
-      return getDefaultConfig(getDefaultConfig(scrollbarXOpts.height, scrollbarOpts.height), getConfig().scrollbar.height)
+      return getDefVal(getDefVal(scrollbarXOpts.height, scrollbarOpts.height), getConfig().scrollbar.height)
     },
     computeScrollYWidth () {
       const $xeTree = this
 
       const scrollbarOpts = $xeTree.computeScrollbarOpts as VxeTreePropTypes.ScrollbarConfig
       const scrollbarYOpts = $xeTree.computeScrollbarYOpts as VxeScrollbarPropTypes.YConfig
-      return getDefaultConfig(getDefaultConfig(scrollbarYOpts.width, scrollbarOpts.width), getConfig().scrollbar.width)
+      return getDefVal(getDefVal(scrollbarYOpts.width, scrollbarOpts.width), getConfig().scrollbar.width)
     },
     computeScrollXVisible () {
       const $xeTree = this
 
       const scrollbarOpts = $xeTree.computeScrollbarOpts as VxeTreePropTypes.ScrollbarConfig
       const scrollbarXOpts = $xeTree.computeScrollbarXOpts as VxeScrollbarPropTypes.XConfig
-      return getDefaultConfig(scrollbarXOpts.visible, scrollbarOpts.visible)
+      return getDefVal(scrollbarXOpts.visible, scrollbarOpts.visible)
     },
     computeScrollYVisible () {
       const $xeTree = this
 
       const scrollbarOpts = $xeTree.computeScrollbarOpts as VxeTreePropTypes.ScrollbarConfig
       const scrollbarYOpts = $xeTree.computeScrollbarYOpts as VxeScrollbarPropTypes.YConfig
-      return getDefaultConfig(scrollbarYOpts.visible, scrollbarOpts.visible)
+      return getDefVal(scrollbarYOpts.visible, scrollbarOpts.visible)
     },
     computeScrollXAutoHide () {
       const $xeTree = this
 
       const scrollbarOpts = $xeTree.computeScrollbarOpts as VxeTreePropTypes.ScrollbarConfig
       const scrollbarXOpts = $xeTree.computeScrollbarXOpts as VxeScrollbarPropTypes.XConfig
-      return getDefaultConfig(getDefaultConfig(scrollbarXOpts.autoHide, scrollbarOpts.autoHide), getConfig().scrollbar.autoHide)
+      return getDefVal(getDefVal(scrollbarXOpts.autoHide, scrollbarOpts.autoHide), getConfig().scrollbar.autoHide)
     },
     computeScrollYAutoHide () {
       const $xeTree = this
 
       const scrollbarOpts = $xeTree.computeScrollbarOpts as VxeTreePropTypes.ScrollbarConfig
       const scrollbarYOpts = $xeTree.computeScrollbarYOpts as VxeScrollbarPropTypes.YConfig
-      return getDefaultConfig(getDefaultConfig(scrollbarYOpts.autoHide, scrollbarOpts.autoHide), getConfig().scrollbar.autoHide)
+      return getDefVal(getDefVal(scrollbarYOpts.autoHide, scrollbarOpts.autoHide), getConfig().scrollbar.autoHide)
     },
     computeScrollbarWrapperClss () {
       const $xeTree = this
@@ -1050,6 +1047,12 @@ export default /* define-vxe-component start */ defineVxeComponent({
       const $xeTree = this
       $xeTree.$emit(type, createEvent(evnt, { $tree: $xeTree }, params))
     },
+    getScrollViewElem () {
+      const $xeTree = this
+
+      const viewEl = $xeTree.$refs.refVirtualWrapper as HTMLDivElement
+      return viewEl || null
+    },
     getNodeId (node: any) {
       const $xeTree = this
 
@@ -1777,7 +1780,10 @@ export default /* define-vxe-component start */ defineVxeComponent({
       const scrollLeft = scrollBodyElem.scrollLeft
       const isX = scrollLeft !== internalData.lastScrollLeft
       const isY = scrollTop !== internalData.lastScrollTop
-      $xeTree.updateThumbOffset()
+      const isVScrollbar = $xeTree.computeIsVScrollbar
+      if (isVScrollbar) {
+        $xeTree.updateThumbOffset()
+      }
       internalData.lastScrollTop = scrollTop
       internalData.lastScrollLeft = scrollLeft
       if (reactData.scrollYLoad) {
@@ -3459,7 +3465,6 @@ export default /* define-vxe-component start */ defineVxeComponent({
         }, evnt)
       }
     },
-
     // 滚动条
     bindScrollbarResize () {
       const $xeTree = this
@@ -3484,199 +3489,6 @@ export default /* define-vxe-component start */ defineVxeComponent({
         }
       }
     },
-    updateThumbSize () {
-      const $xeTree = this
-      const reactData = $xeTree.reactData
-
-      const viewEl = $xeTree.$refs.refVirtualWrapper as HTMLDivElement
-      if (!viewEl) {
-        return
-      }
-      if (!viewEl.clientHeight || !viewEl.clientHeight) {
-        return
-      }
-      const trackXEl = $xeTree.$refs.refTrackXElem as HTMLDivElement
-      const xThumbWidth = trackXEl ? getThumbSize(viewEl.clientWidth, viewEl.scrollWidth, trackXEl.clientWidth) : 0
-      const thumbXElem = $xeTree.$refs.refThumbXElem as HTMLDivElement
-      if (thumbXElem) {
-        thumbXElem.style.width = xThumbWidth + 'px'
-      }
-      reactData.xThumbWidth = xThumbWidth
-
-      const trackYEl = $xeTree.$refs.refTrackYElem as HTMLDivElement
-
-      const yThumbHeight = trackYEl ? getThumbSize(viewEl.clientHeight, viewEl.scrollHeight, trackYEl.clientHeight) : 0
-      const thumbYElem = $xeTree.$refs.refThumbYElem as HTMLDivElement
-      if (thumbYElem) {
-        thumbYElem.style.height = yThumbHeight + 'px'
-      }
-      reactData.yThumbHeight = yThumbHeight
-    },
-    updateThumbOffset () {
-      const $xeTree = this
-      const reactData = $xeTree.reactData
-      const internalData = $xeTree.internalData
-
-      const viewEl = $xeTree.$refs.refVirtualWrapper as HTMLDivElement
-      if (!viewEl) {
-        return
-      }
-      if (!viewEl.clientHeight || !viewEl.clientHeight) {
-        return
-      }
-      const { xThumbWidth, yThumbHeight } = reactData
-      const trackXEl = $xeTree.$refs.refTrackXElem as HTMLDivElement
-      const thumbXElem = $xeTree.$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 = $xeTree.$refs.refTrackYElem as HTMLDivElement
-      const thumbYElem = $xeTree.$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 $xeTree = this
-      const reactData = $xeTree.reactData
-
-      const trackEl = evnt.currentTarget as HTMLDivElement
-      if (trackEl !== evnt.target) {
-        return
-      }
-      const viewEl = $xeTree.$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 $xeTree = this
-      const reactData = $xeTree.reactData
-
-      const trackEl = evnt.currentTarget as HTMLDivElement
-      if (trackEl !== evnt.target) {
-        return
-      }
-      const viewEl = $xeTree.$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 $xeTree = this
-      const reactData = $xeTree.reactData
-      const internalData = $xeTree.internalData
-
-      const thumbEl = evnt.currentTarget as HTMLDivElement
-      internalData.isThumbDrag = true
-      thumbEl.setPointerCapture(evnt.pointerId)
-
-      const viewEl = $xeTree.$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 $xeTree = this
-      const reactData = $xeTree.reactData
-      const internalData = $xeTree.internalData
-
-      const thumbEl = evnt.currentTarget as HTMLDivElement
-      if (!thumbEl.hasPointerCapture(evnt.pointerId)) {
-        return
-      }
-      const { isThumbDrag, thumbDragOffset } = internalData
-      if (isThumbDrag) {
-        const viewEl = $xeTree.$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 $xeTree = this
-      const internalData = $xeTree.internalData
-
-      const thumbEl = evnt.currentTarget as HTMLDivElement
-      thumbEl.releasePointerCapture(evnt.pointerId)
-      internalData.isThumbDrag = false
-    },
-    pointerdownThumbYEvent (evnt: PointerEvent) {
-      const $xeTree = this
-      const reactData = $xeTree.reactData
-      const internalData = $xeTree.internalData
-
-      const thumbEl = evnt.currentTarget as HTMLDivElement
-      internalData.isThumbDrag = true
-      thumbEl.setPointerCapture(evnt.pointerId)
-
-      const viewEl = $xeTree.$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 $xeTree = this
-      const reactData = $xeTree.reactData
-      const internalData = $xeTree.internalData
-
-      const thumbEl = evnt.currentTarget as HTMLDivElement
-      if (!thumbEl.hasPointerCapture(evnt.pointerId)) {
-        return
-      }
-      const { isThumbDrag, thumbDragOffset } = internalData
-      if (isThumbDrag) {
-        const viewEl = $xeTree.$refs.refVirtualWrapper as HTMLDivElement
-        if (!viewEl) {
-          return
-        }
-        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)
-      }
-    },
 
     //
     // Render

package/styles/components/date-panel.scss

@@ -434,41 +434,22 @@
   flex-grow: 1;
   border-radius: var(--vxe-ui-base-border-radius);
   user-select: none;
-  & > ul {
+  .vxe-date-panel--time-hour-list,
+  .vxe-date-panel--time-minute-list,
+  .vxe-date-panel--time-second-list {
     height: 100%;
     overflow: hidden;
     margin: 0;
     padding: 0;
-    width: 3.2em;
+    width: 3em;
+  }
+  .vxe-date-panel--time-list-inner {
     &:before,
     &:after {
       content: " ";
       display: block;
       height: 6em;
     }
-    &:hover {
-      overflow-y: auto;
-    }
-    & > li {
-      display: block;
-      height: 2em;
-      line-height: 2em;
-      padding-left: 0.4em;
-      &:not(.is--disabled) {
-        &:hover {
-          background-color: var(--vxe-ui-input-date-picker-hover-background-color);
-          cursor: pointer;
-        }
-      }
-      &.is--selected {
-        font-weight: 700;
-        color: var(--vxe-ui-font-primary-color);
-      }
-      &.is--disabled {
-        color: var(--vxe-ui-font-disabled-color);
-        cursor: no-drop;
-      }
-    }
   }
   .vxe-date-panel--time-minute-list {
     border-left: 1px solid var(--vxe-ui-base-popup-border-color);
@@ -476,16 +457,37 @@
   .vxe-date-panel--time-second-list {
     border-left: 1px solid var(--vxe-ui-base-popup-border-color);
   }
+  .vxe-date-panel--time-item {
+    display: block;
+    height: 2em;
+    line-height: 2em;
+    text-align: center;
+    &:not(.is--disabled) {
+      &:hover {
+        background-color: var(--vxe-ui-input-date-picker-hover-background-color);
+        cursor: pointer;
+      }
+    }
+    &.is--selected {
+      font-weight: 700;
+      color: var(--vxe-ui-font-primary-color);
+    }
+    &.is--disabled {
+      color: var(--vxe-ui-font-disabled-color);
+      cursor: no-drop;
+    }
+  }
 }
 .vxe-date-panel {
   &.type--time {
     .vxe-date-panel--time-body {
-      & > ul {
-        width: 4em;
-        & > li {
+      .vxe-date-panel--time-hour-list,
+      .vxe-date-panel--time-minute-list,
+      .vxe-date-panel--time-second-list {
+        width: 3.6em;
+        .vxe-date-panel--time-item {
           height: 2.2em;
           line-height: 2.2em;
-          padding-left: 0.8em;
         }
       }
     }

package/styles/components/icon-picker.scss

@@ -122,14 +122,20 @@
   }
 }
 
-.vxe-ico-picker--list-wrapper {
+.vxe-ico-picker--list-wrapper,
+.vxe-ico-picker--scrollbar-list-wrapper {
   overflow-x: hidden;
   overflow-y: auto;
   height: var(--vxe-ui-icon-picker-panel-height);
-  max-height: var(--vxe-ui-icon-picker-panel-max-height, var(--vxe-ui-icon-picker-panel-height, 22.3em));
   padding: var(--vxe-ui-layout-padding-qtr);
 }
-.vxe-ico-picker--list {
+.vxe-ico-picker--list-wrapper,
+.vxe-ico-picker--scrollbar-list-wrapper-view {
+  max-height: var(--vxe-ui-icon-picker-panel-max-height, var(--vxe-ui-icon-picker-panel-height, 22.6em));
+}
+
+.vxe-ico-picker--list,
+.vxe-ico-picker--scrollbar-list-wrapper-inner {
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;

package/styles/components/select.scss

@@ -112,6 +112,7 @@
 }
 
 .vxe-select--panel-body {
+  position: relative;
   display: flex;
   flex-direction: row;
   flex-grow: 1;
@@ -259,3 +260,79 @@
 .vxe-select--empty-placeholder {
   line-height: var(--vxe-ui-select-current-option-height);
 }
+
+// 滚动条
+.vxe-select--panel-body {
+  &.ov-padding {
+    &.overflow-x {
+      &.sx-pos--top {
+        padding-top: var(--vxe-ui-scrollbar-x-height);
+      }
+      &.sx-pos--bottom {
+        padding-bottom: var(--vxe-ui-scrollbar-x-height);
+      }
+    }
+    &.overflow-y {
+      &.sy-pos--left {
+        padding-left: var(--vxe-ui-scrollbar-y-width);
+      }
+      &.sy-pos--right {
+        padding-right: var(--vxe-ui-scrollbar-y-width);
+      }
+    }
+  }
+  &.ov-x--hidden {
+    & > .vxe-select-option--wrapper {
+      overflow-x: hidden;
+    }
+  }
+  &.ov-y--hidden {
+    & > .vxe-select-option--wrapper {
+      overflow-y: hidden;
+    }
+  }
+  &.is--virtual-scrollbar {
+    &.ov-x--auto-hide {
+      &:hover {
+        & > .vxe-scrollbar {
+          & > .vxe-scrollbar--track-x {
+            opacity: 1;
+          }
+        }
+      }
+      & > .vxe-scrollbar {
+        & > .vxe-scrollbar--track-x {
+          opacity: 0;
+          @include baseMixin.createAnimationTransition(opacity, 0.8s);
+        }
+      }
+    }
+    &.ov-y--auto-hide {
+      &:hover {
+        & > .vxe-scrollbar {
+          & > .vxe-scrollbar--track-y {
+            opacity: 1;
+          }
+        }
+      }
+      & > .vxe-scrollbar {
+        & > .vxe-scrollbar--track-y {
+          opacity: 0;
+          @include baseMixin.createAnimationTransition(opacity, 0.8s);
+        }
+      }
+    }
+  }
+  & > .vxe-scrollbar {
+    position: unset;
+  }
+  &.is--virtual-scrollbar {
+    & > .vxe-select-option--wrapper {
+      scrollbar-width: none;
+      -ms-overflow-style: none;
+    }
+    & > .vxe-select-option--wrapper::-webkit-scrollbar {
+      display: none;
+    }
+  }
+}

package/styles/components/tooltip.scss

@@ -31,6 +31,7 @@
   .vxe-tooltip--content,
   .vxe-tooltip--scrollbar-content-view {
     padding: 8px 12px;
+    width: max-content;
     max-width: 600px;
     max-height: 800px;
     white-space: pre-line;

package/types/components/gantt-module/gantt-view.d.ts

@@ -1,4 +1,4 @@
-import { DefineVxeComponentInstance } from '@vxe-ui/core'
+import { DefineVxeComponentInstance, VxeUseInitVScrollbarResult, VxeUseInitVScrollbarReactData, VxeUseInitVScrollbarInternalData } from '@vxe-ui/core'
 import { VxeTableConstructor, VxeTableMethods, VxeTablePrivateMethods } from '../table'
 import { VxeGanttDefines, VxeGanttConstructor } from '../gantt'
 import { VxeScrollbarPropTypes } from '../scrollbar'
@@ -17,7 +17,7 @@ export type VxeGanttViewConstructor = VxeGanttViewInstance
 interface VxeGanttViewProps {
 }
 
-export interface GanttViewReactData {
+export interface GanttViewReactData extends VxeUseInitVScrollbarReactData {
   // 是否启用了横向 X 可视渲染方式加载
   scrollXLoad: boolean
   // 是否启用了纵向 Y 可视渲染方式加载
@@ -35,10 +35,6 @@ export interface GanttViewReactData {
   lastScrollTime: number
   lazScrollLoading: boolean
 
-  // 滚动条
-  yThumbHeight: number
-  xThumbWidth: number
-
   scrollVMLoading: boolean
   scrollYHeight: number
   scrollYTop: number
@@ -56,7 +52,7 @@ export interface GanttViewReactData {
   viewCellWidth: number
 }
 
-export interface GanttViewInternalData {
+export interface GanttViewInternalData extends VxeUseInitVScrollbarInternalData {
   xeTable: (VxeTableConstructor & VxeTableMethods & VxeTablePrivateMethods) | null
   // 渲染所有列
   visibleColumn: VxeGanttDefines.ViewColumn[]
@@ -78,15 +74,6 @@ export interface GanttViewInternalData {
     endIndex: number
   }
 
-  // 滚动条
-  scrollObserver?: ResizeObserver
-  isThumbDrag?: boolean
-  thumbDragOffset: number
-  yThumbTop: number
-  xThumbLeft: number
-  lastScrollLeft: number
-  lastScrollTop: number
-
   // 刷新布局
   rceTimeout?: undefined | number
   rceRunTime?: undefined | number
@@ -100,6 +87,9 @@ export interface GanttViewInternalData {
   inBodyScroll?: boolean
   inFooterScroll?: boolean
   scrollRenderType?: '' | 'left' | 'right'
+
+  isSyncTableScrollTop?: boolean
+
   // 同步滚动
   lcsTimeout?: undefined | number
   lcsRunTime?: undefined | number
@@ -145,6 +135,12 @@ export interface VxeGanttViewPrivateMethods {
    * @private
    */
   handleLazyRecalculate(): Promise<void>
+  /**
+   * @private
+   */
+  handleSyncScrollTop(params: {
+    scrollTop: number
+  }): void
   /**
    * @private
    */
@@ -183,7 +179,11 @@ export interface VxeGanttViewPrivateMethods {
   updateScrollbar(): void
 }
 
-export interface VxeGanttViewMethods {
+export interface VxeGanttViewMethods extends VxeUseInitVScrollbarResult {
+  /**
+   * 获取滚动视图元素
+   */
+  getScrollViewElem(): HTMLElement | null | undefined
   refreshData(): Promise<void>
   updateViewData(force?: boolean): Promise<void>
   connectUpdate(params: {

package/types/components/icon-picker.d.ts

@@ -1,5 +1,6 @@
-import { DefineVxeComponentApp, DefineVxeComponentOptions, DefineVxeComponentInstance, VxeComponentEventParams, ValueOf, VxeComponentStyleType, VxeComponentSizeType } from '@vxe-ui/core'
+import { DefineVxeComponentApp, DefineVxeComponentOptions, DefineVxeComponentInstance, VxeComponentEventParams, ValueOf, VxeComponentIsVScrollbar, VxeComponentStyleType, VxeComponentSizeType } from '@vxe-ui/core'
 import { VxeIconPropTypes } from './icon'
+import { VxeScrollbarProps } from './scrollbar'
 
 /* eslint-disable @typescript-eslint/no-empty-interface,no-use-before-define,@typescript-eslint/ban-types */
 
@@ -86,6 +87,17 @@ export namespace VxeIconPickerPropTypes {
     className?: string | ((params: { $iconPicker: VxeIconPickerConstructor }) => string)
   }
   export type Transfer = boolean
+  export type UseScrollbar = VxeComponentIsVScrollbar
+  export interface ScrollbarConfig extends Pick<VxeScrollbarProps, 'xConfig' | 'yConfig' | 'padding' | 'autoHide' | 'visible' | 'className' | 'viewAttrs' | 'viewClassName' | 'viewInnerClassName'> {
+    /**
+     * 滚动条宽度
+     */
+    width?: number | string
+    /**
+     * 滚动条高度
+     */
+    height?: number | string
+  }
 }
 
 export interface VxeIconPickerProps {
@@ -112,6 +124,14 @@ export interface VxeIconPickerProps {
   placement?: VxeIconPickerPropTypes.Placement
   popupConfig?: VxeIconPickerPropTypes.PopupConfig
   transfer?: VxeIconPickerPropTypes.Transfer
+  /**
+   * 使用虚拟滚动条
+   */
+  useScrollbar?: VxeIconPickerPropTypes.UseScrollbar
+  /**
+   * 滚动条配置项
+   */
+  scrollbarConfig?: VxeIconPickerPropTypes.ScrollbarConfig
 }
 
 export interface IconPickerPrivateComputed {

package/types/components/list.d.ts

@@ -351,6 +351,10 @@ export interface ListInternalData {
 
 export interface ListMethods<D = any> {
   dispatchEvent(type: ValueOf<VxeListEmits>, params: Record<string, any>, evnt: Event | null): void
+  /**
+   * 获取滚动视图元素
+   */
+  getScrollViewElem(): HTMLElement | null | undefined
   /**
    * 加载数据
    * @param data 列表数据