chore: prefer using useRect (#9637)

packages/vant/src/calendar/CalendarMonth.tsx

@@ -25,7 +25,7 @@ import {
 } from './utils';
 
 // Composables
-import { useToggle } from '@vant/use';
+import { useRect, useToggle } from '@vant/use';
 import { useExpose } from '../composables/use-expose';
 import { useHeight } from '../composables/use-height';
 
@@ -101,11 +101,7 @@ export default defineComponent({
       const el = props.showSubtitle ? daysRef.value : monthRef.value;
 
       if (el) {
-        const scrollTop =
+        const scrollTop = useRect(el).top - useRect(body).top + body.scrollTop;
-          el.getBoundingClientRect().top -
-          body.getBoundingClientRect().top +
-          body.scrollTop;
-
         setScrollTop(body, scrollTop);
       }
     };

packages/vant/src/image-preview/ImagePreview.tsx

@@ -23,7 +23,7 @@ import {
 } from '../utils';
 
 // Composables
-import { useWindowSize } from '@vant/use';
+import { useRect, useWindowSize } from '@vant/use';
 import { useExpose } from '../composables/use-expose';
 
 // Components
@@ -82,7 +82,7 @@ export default defineComponent({
 
     const resize = () => {
       if (swipeRef.value) {
-        const rect = swipeRef.value.$el.getBoundingClientRect();
+        const rect = useRect(swipeRef.value.$el);
         state.rootWidth = rect.width;
         state.rootHeight = rect.height;
         swipeRef.value.resize();

packages/vant/src/rate/Rate.tsx

@@ -12,7 +12,7 @@ import {
 } from '../utils';
 
 // Composables
-import { useCustomFieldValue } from '@vant/use';
+import { useRect, useCustomFieldValue } from '@vant/use';
 import { useRefs } from '../composables/use-refs';
 import { useTouch } from '../composables/use-touch';
 
@@ -101,7 +101,7 @@ export default defineComponent({
     let ranges: Array<{ left: number; score: number }>;
 
     const updateRanges = () => {
-      const rects = itemRefs.value.map((item) => item.getBoundingClientRect());
+      const rects = itemRefs.value.map(useRect);
 
       ranges = [];
       rects.forEach((rect, index) => {

packages/vant/src/tabs/Tabs.tsx

@@ -24,13 +24,11 @@ import {
   truthProp,
   numericProp,
   Interceptor,
-  getVisibleTop,
   getElementTop,
   makeStringProp,
   callInterceptor,
   createNamespace,
   makeNumericProp,
-  getVisibleHeight,
   setRootScrollTop,
   ComponentInstance,
   BORDER_TOP_BOTTOM,
@@ -39,6 +37,7 @@ import { scrollLeftTo, scrollTopTo } from './utils';
 
 // Composables
 import {
+  useRect,
   useChildren,
   useWindowSize,
   useScrollParent,
@@ -342,7 +341,7 @@ export default defineComponent({
 
     const getCurrentIndexOnScroll = () => {
       for (let index = 0; index < children.length; index++) {
-        const top = getVisibleTop(children[index].$el);
+        const { top } = useRect(children[index].$el);
 
         if (top > scrollOffset.value) {
           return index === 0 ? 0 : index - 1;
@@ -455,7 +454,9 @@ export default defineComponent({
       setCurrentIndexByName(props.active);
       nextTick(() => {
         state.inited = true;
-        tabHeight = getVisibleHeight(wrapRef.value!);
+        if (wrapRef.value) {
+          tabHeight = useRect(wrapRef.value).height;
+        }
         scrollIntoView(true);
       });
     };

packages/vant/src/utils/dom.ts

@@ -1,10 +1,9 @@
+import { useRect } from '@vant/use';
 import { unref, Ref } from 'vue';
 import { isIOS as checkIsIOS } from './validate';
 
 export type ScrollElement = Element | Window;
 
-const isWindow = (val: unknown): val is Window => val === window;
-
 export function getScrollTop(el: ScrollElement): number {
   const top = 'scrollTop' in el ? el.scrollTop : el.pageYOffset;
 
@@ -36,26 +35,12 @@ export function setRootScrollTop(value: number) {
 
 // get distance from element top to page top or scroller top
 export function getElementTop(el: ScrollElement, scroller?: ScrollElement) {
-  if (isWindow(el)) {
+  if (el === window) {
     return 0;
   }
 
   const scrollTop = scroller ? getScrollTop(scroller) : getRootScrollTop();
-  return el.getBoundingClientRect().top + scrollTop;
+  return useRect(el).top + scrollTop;
-}
-
-export function getVisibleHeight(el: ScrollElement) {
-  if (isWindow(el)) {
-    return el.innerHeight;
-  }
-  return el.getBoundingClientRect().height;
-}
-
-export function getVisibleTop(el: ScrollElement) {
-  if (isWindow(el)) {
-    return 0;
-  }
-  return el.getBoundingClientRect().top;
 }
 
 const isIOS = checkIsIOS();