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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vxe-table",
-  "version": "4.23.0-beta.1",
+  "version": "4.23.0-beta.2",
   "description": "A PC-end table component based on Vxe UI, supporting copy-paste, data pivot table, and high-performance virtual list table solution.",
   "scripts": {
     "update": "npm install --legacy-peer-deps",
@@ -66,7 +66,7 @@
     "typescript": "~5.9.3",
     "vue": "3.4.27",
     "vue-router": "~4.5.1",
-    "vxe-pc-ui": "4.20.1"
+    "vxe-pc-ui": "4.20.2"
   },
   "vetur": {
     "tags": "helper/vetur/tags.json",

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
@@ -307,7 +311,7 @@ export const tableProps = {
   virtualYConfig: Object as PropType<VxeTablePropTypes.VirtualYConfig>,
   useScrollbar: {
     type: Boolean as PropType<VxeTablePropTypes.UseScrollbar>,
-    default: () => getConfig().table.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
+}