vxe-table 4.23.0-beta.0 → 4.23.0-beta.2

package/packages/table/src/props.ts

@@ -1,5 +1,6 @@
 import { PropType } from 'vue'
 import { VxeUI } from '../../ui'
+import { getDefaultConfig } from '../../ui/src/utils'
 
 import type { VxeTablePropTypes } from '../../../types'
 
@@ -81,7 +82,10 @@ export const tableProps = {
     type: Boolean as PropType<VxeTablePropTypes.HighlightCurrentRow>,
     default: () => getConfig().table.highlightCurrentRow
   },
-  // （即将废弃）鼠标移到行是否要高亮显示
+  /**
+   * （即将废弃）鼠标移到行是否要高亮显示
+   * @deprecated
+   */
   highlightHoverRow: {
     type: Boolean as PropType<VxeTablePropTypes.HighlightHoverRow>,
     default: () => getConfig().table.highlightHoverRow
@@ -305,6 +309,10 @@ export const tableProps = {
   virtualXConfig: Object as PropType<VxeTablePropTypes.VirtualXConfig>,
   // 纵向虚拟滚动配置项
   virtualYConfig: Object as PropType<VxeTablePropTypes.VirtualYConfig>,
+  useScrollbar: {
+    type: Boolean as PropType<VxeTablePropTypes.UseScrollbar>,
+    default: () => getDefaultConfig(getConfig().table.useScrollbar, getConfig().useScrollbar)
+  },
   // 滚动条配置项
   scrollbarConfig: Object as PropType<VxeTablePropTypes.ScrollbarConfig>,
   // 撤销/恢复历史配置项

package/packages/table/src/scrollbar.ts

@@ -0,0 +1,57 @@
+/**
+ * 计算滚动条滑块的长度
+ */
+export function getThumbSize (viewportSize: number, contentSize: number, trackSize: number) {
+  if (contentSize <= viewportSize) {
+    return 0
+  }
+  const ratio = viewportSize / contentSize
+  const ideal = trackSize * ratio
+  return Math.max(20, Math.min(ideal, trackSize))
+}
+
+/**
+ * 计算滚动条滑块的偏移位置
+ */
+export function getThumbOffsetSize (offsetSize: number, viewportSize: number, contentSize: number, trackSize: number, thumbSize: number) {
+  const maxScroll = contentSize - viewportSize
+  if (maxScroll <= 0) {
+    return 0
+  }
+  const maxThumbOffset = trackSize - thumbSize
+  if (maxThumbOffset <= 0) {
+    return 0
+  }
+  const clamped = Math.min(Math.max(offsetSize, 0), maxScroll)
+  const ratio = clamped / maxScroll
+  return ratio * maxThumbOffset
+}
+
+/**
+ * 根据点击轨道的位置，计算滑块的偏移位置
+ */
+export function getScrollFromClick (clickPosition: number, viewportSize: number, contentSize: number, trackSize: number, thumbSize: number) {
+  const maxThumbOffset = trackSize - thumbSize
+  const maxScroll = contentSize - viewportSize
+  if (maxScroll <= 0 || maxThumbOffset <= 0) {
+    return 0
+  }
+  let thumbOffset = clickPosition - thumbSize / 2
+  thumbOffset = Math.min(Math.max(thumbOffset, 0), maxThumbOffset)
+  const scrollOffset = (thumbOffset / maxThumbOffset) * maxScroll
+  return scrollOffset
+}
+
+/**
+ * 拖拽 thumb 时，根据鼠标位置计算滑块的偏移位置
+ */
+export function getScrollFromDrag (pointerPosition: number, dragOffset: number, viewportSize: number, contentSize: number, trackSize: number, thumbSize: number) {
+  const maxScroll = contentSize - viewportSize
+  const maxThumbOffset = trackSize - thumbSize
+  if (maxScroll <= 0 || maxThumbOffset <= 0) {
+    return 0
+  }
+  let thumbOffset = pointerPosition - dragOffset
+  thumbOffset = Math.min(Math.max(thumbOffset, 0), maxThumbOffset)
+  return (thumbOffset / maxThumbOffset) * maxScroll
+}