@vxe-ui/core 4.4.34 → 4.4.36

package/lib/src/useFns.js

@@ -3,16 +3,27 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useFns = void 0;
+exports.useInitVScrollbar = exports.useFns = void 0;
 exports.usePermission = usePermission;
 exports.useSize = useSize;
 exports.useVScrollbar = useVScrollbar;
 var _xeUtils = _interopRequireDefault(require("xe-utils"));
 var _vue = require("vue");
 var _permission = require("./permission");
+var _scrollbarUtils = require("./scrollbar-utils");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const {
+  getThumbOffsetSize,
+  getThumbSize,
+  getScrollFromClick,
+  getScrollFromDrag
+} = _scrollbarUtils.scrollbarUtils;
+/**
+ * 组件尺寸上下文
+ * @param props
+ * @returns
+ */
 function useSize(props) {
-  // 组件尺寸上下文
   const xeSizeInfo = (0, _vue.inject)('xeSizeInfo', null);
   const computeSize = (0, _vue.computed)(() => {
     const {
@@ -25,8 +36,25 @@ function useSize(props) {
     computeSize
   };
 }
+/**
+ * 权限码处理
+ * @param props
+ * @returns
+ */
+function usePermission(props) {
+  const computePermissionInfo = (0, _vue.computed)(() => {
+    return (0, _permission.handleCheckInfo)(props.permissionCode, props.permissionMethod);
+  });
+  return {
+    computePermissionInfo
+  };
+}
+/**
+ * 虚拟滚动条是否启用
+ * @param props
+ * @returns
+ */
 function useVScrollbar(props) {
-  // 组件虚拟滚动条
   const xeScrollbarInfo = (0, _vue.inject)('xeScrollbarInfo', null);
   const computeIsVScrollbar = (0, _vue.computed)(() => {
     const {
@@ -34,21 +62,224 @@ function useVScrollbar(props) {
     } = props;
     return _xeUtils.default.isBoolean(useScrollbar) ? useScrollbar : xeScrollbarInfo ? xeScrollbarInfo.value : null;
   });
-  (0, _vue.provide)('xeSizeInfo', computeIsVScrollbar);
+  (0, _vue.provide)('xeScrollbarInfo', computeIsVScrollbar);
   return {
     computeIsVScrollbar
   };
 }
-function usePermission(props) {
-  const computePermissionInfo = (0, _vue.computed)(() => {
-    return (0, _permission.handleCheckInfo)(props.permissionCode, props.permissionMethod);
-  });
+/**
+ * 初始化虚拟滚动条
+ * @param reactData
+ * @param internalData
+ * @param refViewElem
+ * @returns
+ */
+const useInitVScrollbar = $xeVM => {
+  const {
+    reactData,
+    internalData
+  } = $xeVM;
+  const refTrackXElem = (0, _vue.ref)();
+  const refTrackYElem = (0, _vue.ref)();
+  const refThumbXElem = (0, _vue.ref)();
+  const refThumbYElem = (0, _vue.ref)();
+  const updateThumbSize = () => {
+    const viewEl = $xeVM.getScrollViewElem();
+    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 = $xeVM.getScrollViewElem();
+    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 => {
+    const trackEl = evnt.currentTarget;
+    if (trackEl !== evnt.target) {
+      return;
+    }
+    const viewEl = $xeVM.getScrollViewElem();
+    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 => {
+    const trackEl = evnt.currentTarget;
+    if (trackEl !== evnt.target) {
+      return;
+    }
+    const viewEl = $xeVM.getScrollViewElem();
+    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 => {
+    const thumbEl = evnt.currentTarget;
+    internalData.isThumbDrag = true;
+    thumbEl.setPointerCapture(evnt.pointerId);
+    const viewEl = $xeVM.getScrollViewElem();
+    if (!viewEl) {
+      return;
+    }
+    const {
+      xThumbWidth
+    } = reactData;
+    const trackEl = thumbEl.parentElement;
+    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 => {
+    const thumbEl = evnt.currentTarget;
+    if (!thumbEl.hasPointerCapture(evnt.pointerId)) {
+      return;
+    }
+    const {
+      isThumbDrag,
+      thumbDragOffset
+    } = internalData;
+    if (isThumbDrag) {
+      const viewEl = $xeVM.getScrollViewElem();
+      if (!viewEl) {
+        return;
+      }
+      const {
+        xThumbWidth
+      } = reactData;
+      const thumbEl = evnt.currentTarget;
+      const trackEl = thumbEl.parentElement;
+      const trackRect = trackEl.getBoundingClientRect();
+      // 更新偏移
+      viewEl.scrollLeft = getScrollFromDrag(evnt.clientX - trackRect.left, thumbDragOffset, viewEl.clientWidth, viewEl.scrollWidth, trackEl.clientWidth, xThumbWidth);
+    }
+  };
+  const cleatPointerThumbEvent = evnt => {
+    const thumbEl = evnt.currentTarget;
+    thumbEl.releasePointerCapture(evnt.pointerId);
+    internalData.isThumbDrag = false;
+  };
+  const pointerdownThumbYEvent = evnt => {
+    const thumbEl = evnt.currentTarget;
+    internalData.isThumbDrag = true;
+    thumbEl.setPointerCapture(evnt.pointerId);
+    const viewEl = $xeVM.getScrollViewElem();
+    if (!viewEl) {
+      return;
+    }
+    const {
+      yThumbHeight
+    } = reactData;
+    const trackEl = thumbEl.parentElement;
+    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 => {
+    const thumbEl = evnt.currentTarget;
+    if (!thumbEl.hasPointerCapture(evnt.pointerId)) {
+      return;
+    }
+    const {
+      isThumbDrag,
+      thumbDragOffset
+    } = internalData;
+    if (isThumbDrag) {
+      const viewEl = $xeVM.getScrollViewElem();
+      if (!viewEl) {
+        return;
+      }
+      const {
+        yThumbHeight
+      } = reactData;
+      const thumbEl = evnt.currentTarget;
+      const trackEl = thumbEl.parentElement;
+      const trackRect = trackEl.getBoundingClientRect();
+      // 更新偏移
+      viewEl.scrollTop = getScrollFromDrag(evnt.clientY - trackRect.top, thumbDragOffset, viewEl.clientHeight, viewEl.scrollHeight, trackEl.clientHeight, yThumbHeight);
+    }
+  };
   return {
-    computePermissionInfo
+    refTrackXElem,
+    refTrackYElem,
+    refThumbXElem,
+    refThumbYElem,
+    updateThumbSize,
+    updateThumbOffset,
+    clickTrackXEvent,
+    clickTrackYEvent,
+    pointerdownThumbXEvent,
+    pointermoveThumbXEvent,
+    cleatPointerThumbEvent,
+    pointerdownThumbYEvent,
+    pointermoveThumbYEvent
   };
-}
+};
+exports.useInitVScrollbar = useInitVScrollbar;
 const useFns = exports.useFns = {
   useSize,
   useVScrollbar,
-  usePermission
+  usePermission,
+  useInitVScrollbar
 };

package/lib/src/useFns.min.js

@@ -1 +1 @@
-Object.defineProperty(exports,"__esModule",{value:!0}),exports.useFns=void 0,exports.usePermission=usePermission,exports.useSize=useSize,exports.useVScrollbar=useVScrollbar;var _xeUtils=_interopRequireDefault(require("xe-utils")),_vue=require("vue"),_permission=require("./permission");function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}function useSize(r){let u=(0,_vue.inject)("xeSizeInfo",null);var e=(0,_vue.computed)(()=>{var e=r.size;return e||(u?u.value:null)});return(0,_vue.provide)("xeSizeInfo",e),{computeSize:e}}function useVScrollbar(r){let u=(0,_vue.inject)("xeScrollbarInfo",null);var e=(0,_vue.computed)(()=>{var e=r.useScrollbar;return _xeUtils.default.isBoolean(e)?e:u?u.value:null});return(0,_vue.provide)("xeSizeInfo",e),{computeIsVScrollbar:e}}function usePermission(e){return{computePermissionInfo:(0,_vue.computed)(()=>(0,_permission.handleCheckInfo)(e.permissionCode,e.permissionMethod))}}let useFns=exports.useFns={useSize:useSize,useVScrollbar:useVScrollbar,usePermission:usePermission};
+Object.defineProperty(exports,"__esModule",{value:!0}),exports.useInitVScrollbar=exports.useFns=void 0,exports.usePermission=usePermission,exports.useSize=useSize,exports.useVScrollbar=useVScrollbar;var _xeUtils=_interopRequireDefault(require("xe-utils")),_vue=require("vue"),_permission=require("./permission"),_scrollbarUtils=require("./scrollbar-utils");function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}let{getThumbOffsetSize,getThumbSize,getScrollFromClick,getScrollFromDrag}=_scrollbarUtils.scrollbarUtils;function useSize(t){let r=(0,_vue.inject)("xeSizeInfo",null);var e=(0,_vue.computed)(()=>{var e=t.size;return e||(r?r.value:null)});return(0,_vue.provide)("xeSizeInfo",e),{computeSize:e}}function usePermission(e){return{computePermissionInfo:(0,_vue.computed)(()=>(0,_permission.handleCheckInfo)(e.permissionCode,e.permissionMethod))}}function useVScrollbar(t){let r=(0,_vue.inject)("xeScrollbarInfo",null);var e=(0,_vue.computed)(()=>{var e=t.useScrollbar;return _xeUtils.default.isBoolean(e)?e:r?r.value:null});return(0,_vue.provide)("xeScrollbarInfo",e),{computeIsVScrollbar:e}}let useInitVScrollbar=o=>{let{reactData:s,internalData:c}=o,u=(0,_vue.ref)(),n=(0,_vue.ref)(),a=(0,_vue.ref)(),h=(0,_vue.ref)();return{refTrackXElem:u,refTrackYElem:n,refThumbXElem:a,refThumbYElem:h,updateThumbSize:()=>{var e,t,r=o.getScrollViewElem();r&&r.clientHeight&&(t=(t=u.value)?getThumbSize(r.clientWidth,r.scrollWidth,t.clientWidth):0,(e=a.value)&&(e.style.width=t+"px"),s.xThumbWidth=t,t=(e=n.value)?getThumbSize(r.clientHeight,r.scrollHeight,e.clientHeight):0,(r=h.value)&&(r.style.height=t+"px"),s.yThumbHeight=t)},updateThumbOffset:()=>{var e,t,r,l,i=o.getScrollViewElem();i&&i.clientHeight&&({xThumbWidth:t,yThumbHeight:e}=s,l=u.value,r=a.value,l=l&&t?getThumbOffsetSize(i.scrollLeft,i.clientWidth,i.scrollWidth,l.clientWidth,t):0,c.xThumbLeft=l,r&&t&&(r.style.width=t+"px",r.style.transform=`translateX(${l}px)`),t=n.value,r=h.value,l=t&&e?getThumbOffsetSize(i.scrollTop,i.clientHeight,i.scrollHeight,t.clientHeight,e):0,c.yThumbTop=l,r)&&e&&(r.style.height=e+"px",r.style.transform=`translateY(${l}px)`)},clickTrackXEvent:e=>{var t,r,l,i=e.currentTarget;i===e.target&&(t=o.getScrollViewElem())&&(r=s.xThumbWidth,l=i.getBoundingClientRect(),t.scrollTo({left:getScrollFromClick(e.clientX-l.left,t.clientWidth,t.scrollWidth,i.clientWidth,r),behavior:"auto"}))},clickTrackYEvent:e=>{var t,r,l,i=e.currentTarget;i===e.target&&(t=o.getScrollViewElem())&&(r=s.yThumbHeight,l=i.getBoundingClientRect(),t.scrollTo({top:getScrollFromClick(e.clientY-l.top,t.clientHeight,t.scrollHeight,i.clientHeight,r),behavior:"auto"}))},pointerdownThumbXEvent:e=>{var t,r,l=e.currentTarget,i=(c.isThumbDrag=!0,l.setPointerCapture(e.pointerId),o.getScrollViewElem());i&&(t=s.xThumbWidth,r=(l=l.parentElement).getBoundingClientRect(),e=e.clientX-r.left,r=getThumbOffsetSize(i.scrollLeft,i.clientWidth,i.scrollWidth,l.clientWidth,t),c.thumbDragOffset=e-r)},pointermoveThumbXEvent:t=>{let e=t.currentTarget;if(e.hasPointerCapture(t.pointerId)){var{isThumbDrag:r,thumbDragOffset:l}=c;if(r){r=o.getScrollViewElem();if(r){var i=s.xThumbWidth;let e=t.currentTarget;var u=e.parentElement,n=u.getBoundingClientRect();r.scrollLeft=getScrollFromDrag(t.clientX-n.left,l,r.clientWidth,r.scrollWidth,u.clientWidth,i)}}}},cleatPointerThumbEvent:e=>{e.currentTarget.releasePointerCapture(e.pointerId),c.isThumbDrag=!1},pointerdownThumbYEvent:e=>{var t,r,l=e.currentTarget,i=(c.isThumbDrag=!0,l.setPointerCapture(e.pointerId),o.getScrollViewElem());i&&(t=s.yThumbHeight,r=(l=l.parentElement).getBoundingClientRect(),e=e.clientY-r.top,r=getThumbOffsetSize(i.scrollTop,i.clientHeight,i.scrollHeight,l.clientHeight,t),c.thumbDragOffset=e-r)},pointermoveThumbYEvent:t=>{let e=t.currentTarget;if(e.hasPointerCapture(t.pointerId)){var{isThumbDrag:r,thumbDragOffset:l}=c;if(r){r=o.getScrollViewElem();if(r){var i=s.yThumbHeight;let e=t.currentTarget;var u=e.parentElement,n=u.getBoundingClientRect();r.scrollTop=getScrollFromDrag(t.clientY-n.top,l,r.clientHeight,r.scrollHeight,u.clientHeight,i)}}}}}},useFns=(exports.useInitVScrollbar=useInitVScrollbar,exports.useFns={useSize:useSize,useVScrollbar:useVScrollbar,usePermission:usePermission,useInitVScrollbar:useInitVScrollbar});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vxe-ui/core",
-  "version": "4.4.34",
+  "version": "4.4.36",
   "description": "Vxe UI core library",
   "scripts": {
     "update": "npm install --legacy-peer-deps",

package/packages/src/useFns.ts

@@ -1,13 +1,20 @@
 import XEUtils from 'xe-utils'
-import { computed, inject, provide, ComputedRef } from 'vue'
+import { computed, ref, Ref, inject, provide, ComputedRef } from 'vue'
 import { handleCheckInfo } from './permission'
+import { scrollbarUtils } from './scrollbar-utils'
 
-import type { VxeComponentSizeType, VxeComponentIsVScrollbar, VxeComponentPermissionCodeType, VxeComponentPermissionMethod } from '../../types'
+import type { VxeComponentSizeType, VxeComponentIsVScrollbar, VxeUseInitVScrollbar, VxeComponentPermissionCodeType, VxeComponentPermissionMethod, VxeUseInitVScrollbarResult, VxeUseSizeResult, VxeUsePermissionResult, VxeUseVScrollbarResult } from '../../types'
 
+const { getThumbOffsetSize, getThumbSize, getScrollFromClick, getScrollFromDrag } = scrollbarUtils
+
+/**
+ * 组件尺寸上下文
+ * @param props
+ * @returns
+ */
 export function useSize (props: {
   size?: VxeComponentSizeType
-}) {
-  // 组件尺寸上下文
+}): VxeUseSizeResult {
   const xeSizeInfo = inject('xeSizeInfo', null as ComputedRef<VxeComponentSizeType> | null)
   const computeSize = computed(() => {
     const { size } = props
@@ -18,34 +25,251 @@ export function useSize (props: {
   return { computeSize }
 }
 
+/**
+ * 权限码处理
+ * @param props
+ * @returns
+ */
+export function usePermission (props: {
+  permissionCode?: VxeComponentPermissionCodeType
+  permissionMethod?: VxeComponentPermissionMethod
+}): VxeUsePermissionResult {
+  const computePermissionInfo = computed(() => {
+    return handleCheckInfo(props.permissionCode, props.permissionMethod)
+  })
+  return {
+    computePermissionInfo
+  }
+}
+
+/**
+ * 虚拟滚动条是否启用
+ * @param props
+ * @returns
+ */
 export function useVScrollbar (props: {
   useScrollbar?: VxeComponentIsVScrollbar
-}) {
-  // 组件虚拟滚动条
+}): VxeUseVScrollbarResult {
   const xeScrollbarInfo = inject('xeScrollbarInfo', null as ComputedRef<VxeComponentIsVScrollbar> | null)
   const computeIsVScrollbar = computed(() => {
     const { useScrollbar } = props
     return XEUtils.isBoolean(useScrollbar) ? useScrollbar : (xeScrollbarInfo ? xeScrollbarInfo.value : null)
   })
-  provide('xeSizeInfo', computeIsVScrollbar)
+  provide('xeScrollbarInfo', computeIsVScrollbar)
 
   return { computeIsVScrollbar }
 }
 
-export function usePermission (props: {
-  permissionCode?: VxeComponentPermissionCodeType
-  permissionMethod?: VxeComponentPermissionMethod
-}) {
-  const computePermissionInfo = computed(() => {
-    return handleCheckInfo(props.permissionCode, props.permissionMethod)
-  })
+/**
+ * 初始化虚拟滚动条
+ * @param reactData
+ * @param internalData
+ * @param refViewElem
+ * @returns
+ */
+export const useInitVScrollbar: VxeUseInitVScrollbar = ($xeVM): VxeUseInitVScrollbarResult & {
+  refTrackXElem: Ref<HTMLDivElement | undefined>
+  refTrackYElem: Ref<HTMLDivElement | undefined>
+  refThumbXElem: Ref<HTMLDivElement | undefined>
+  refThumbYElem: Ref<HTMLDivElement | undefined>
+} => {
+  const { reactData, internalData } = $xeVM
+
+  const refTrackXElem = ref<HTMLDivElement>()
+  const refTrackYElem = ref<HTMLDivElement>()
+  const refThumbXElem = ref<HTMLDivElement>()
+  const refThumbYElem = ref<HTMLDivElement>()
+
+  const updateThumbSize = () => {
+    const viewEl = $xeVM.getScrollViewElem()
+    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 = $xeVM.getScrollViewElem()
+    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 = $xeVM.getScrollViewElem()
+    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 = $xeVM.getScrollViewElem()
+    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 = $xeVM.getScrollViewElem()
+    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 = $xeVM.getScrollViewElem()
+      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 = $xeVM.getScrollViewElem()
+    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 = $xeVM.getScrollViewElem()
+      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)
+    }
+  }
+
   return {
-    computePermissionInfo
+    refTrackXElem,
+    refTrackYElem,
+    refThumbXElem,
+    refThumbYElem,
+    updateThumbSize,
+    updateThumbOffset,
+    clickTrackXEvent,
+    clickTrackYEvent,
+    pointerdownThumbXEvent,
+    pointermoveThumbXEvent,
+    cleatPointerThumbEvent,
+    pointerdownThumbYEvent,
+    pointermoveThumbYEvent
   }
 }
 
 export const useFns = {
   useSize,
   useVScrollbar,
-  usePermission
+  usePermission,
+  useInitVScrollbar
 }