diff --git a/packages/vant/src/calendar/CalendarMonth.tsx b/packages/vant/src/calendar/CalendarMonth.tsx index 70c56fbf7..4249df7a3 100644 --- a/packages/vant/src/calendar/CalendarMonth.tsx +++ b/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 = - el.getBoundingClientRect().top - - body.getBoundingClientRect().top + - body.scrollTop; - + const scrollTop = useRect(el).top - useRect(body).top + body.scrollTop; setScrollTop(body, scrollTop); } }; diff --git a/packages/vant/src/image-preview/ImagePreview.tsx b/packages/vant/src/image-preview/ImagePreview.tsx index 14dab6393..d57fd8bcf 100644 --- a/packages/vant/src/image-preview/ImagePreview.tsx +++ b/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(); diff --git a/packages/vant/src/rate/Rate.tsx b/packages/vant/src/rate/Rate.tsx index 5e7454c6e..ec02ab22a 100644 --- a/packages/vant/src/rate/Rate.tsx +++ b/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) => { diff --git a/packages/vant/src/tabs/Tabs.tsx b/packages/vant/src/tabs/Tabs.tsx index cd4e9826b..1687e4db5 100644 --- a/packages/vant/src/tabs/Tabs.tsx +++ b/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); }); }; diff --git a/packages/vant/src/utils/dom.ts b/packages/vant/src/utils/dom.ts index 71ae48d93..7791d791c 100644 --- a/packages/vant/src/utils/dom.ts +++ b/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; -} - -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; + return useRect(el).top + scrollTop; } const isIOS = checkIsIOS();