tdesign-mobile-vue
Version:
tdesign-mobile-vue
1 lines • 8.14 kB
Source Map (JSON)
{"version":3,"file":"useElementRect.mjs","sources":["../../src/hooks/useElementRect.ts"],"sourcesContent":["import { ref, shallowRef, Ref, ShallowRef, unref, watch, onMounted, onUnmounted } from 'vue';\n\nexport type ElementOrRef = string | Element | null | undefined;\n\nexport interface UseElementRectOptions {\n /** 是否立即计算边界 */\n immediate?: boolean;\n /** 是否监听元素尺寸变化 */\n resizeObserver?: boolean;\n}\n\nexport interface ElementRect {\n top: number;\n bottom: number;\n left: number;\n right: number;\n width: number;\n height: number;\n}\n\n/**\n * 解析元素，支持：字符串选择器、Element 对象\n * @param element 元素或选择器\n * @returns HTMLElement\n */\nfunction resolveElement(element: ElementOrRef): HTMLElement | null {\n if (!element) return null;\n\n if (typeof element === 'string') {\n // 字符串选择器\n return document.querySelector(element);\n }\n\n if (element instanceof HTMLElement) {\n // 直接传入的 HTMLElement\n return element;\n }\n\n return null;\n}\n\n/**\n * 获取元素的边界信息\n * @param element HTMLElement\n * @returns ElementRect\n */\nfunction getElementRect(element: HTMLElement): ElementRect {\n const rect = element.getBoundingClientRect();\n return {\n top: rect.top,\n bottom: rect.bottom,\n left: rect.left,\n right: rect.right,\n width: rect.width,\n height: rect.height,\n };\n}\n\n/**\n * 用于获取和监听元素边界信息的 hook\n * @param element 元素或选择器，支持 Ref<...> 类型\n * @param options 配置选项\n * @returns 返回元素引用和边界信息\n *\n * @example\n * // 基础用法\n * const { element, rect } = useElementRect(myRef);\n *\n * @example\n * // 只需要高度（兼容 useElementHeight）\n * const { rect: { height } } = useElementRect(myRef);\n *\n * @example\n * // 监听元素尺寸变化\n * const { element, rect } = useElementRect(myRef, { resizeObserver: true });\n *\n * @example\n * // 延迟计算\n * const { element, rect, updateElement } = useElementRect(myRef, { immediate: false });\n */\nexport default function useElementRect(\n element: Ref<ElementOrRef> | ElementOrRef,\n options: UseElementRectOptions = {},\n): {\n element: ShallowRef<HTMLElement | null>;\n rect: Ref<ElementRect>;\n updateElement: () => void;\n} {\n const { immediate = true, resizeObserver = false } = options;\n const elementRef = shallowRef<HTMLElement | null>(null);\n const rect = ref<ElementRect>({\n top: 0,\n bottom: 0,\n left: 0,\n right: 0,\n width: 0,\n height: 0,\n });\n let resizeObserverInstance: ResizeObserver | null = null;\n\n const updateElement = () => {\n // 使用 unref 统一处理 Ref 和非 Ref 类型\n const elementValue = unref(element);\n const el = resolveElement(elementValue);\n elementRef.value = el;\n\n if (el) {\n rect.value = getElementRect(el);\n }\n };\n\n const setupResizeObserver = () => {\n if (!resizeObserver) return;\n\n if (elementRef.value && window.ResizeObserver) {\n resizeObserverInstance = new ResizeObserver(() => {\n rect.value = getElementRect(elementRef.value);\n });\n resizeObserverInstance.observe(elementRef.value);\n }\n };\n\n const cleanupResizeObserver = () => {\n if (resizeObserverInstance) {\n resizeObserverInstance.disconnect();\n resizeObserverInstance = null;\n }\n };\n\n // 监听 element 参数变化\n watch(\n () => unref(element),\n () => {\n cleanupResizeObserver();\n updateElement();\n setupResizeObserver();\n },\n { flush: 'post' },\n );\n\n onMounted(() => {\n if (immediate) {\n updateElement();\n setupResizeObserver();\n }\n });\n\n onUnmounted(() => {\n cleanupResizeObserver();\n });\n\n return {\n element: elementRef,\n rect,\n updateElement,\n };\n}\n\n/**\n * @deprecated 使用 useElementRect 替代\n * 用于计算元素高度的 hook\n * @param target 元素 ref\n * @param options 配置选项\n * @returns 返回高度和重新计算的方法\n */\nexport function useElementHeight(target: Ref<HTMLElement | undefined>, options: UseElementRectOptions = {}) {\n const { rect } = useElementRect(target, options);\n\n return {\n height: ref(() => rect.value.height),\n calculateHeight: () => {\n // useElementRect 内部会自动更新，这里保持兼容性\n },\n };\n}\n\nexport { resolveElement, getElementRect };\n"],"names":["resolveElement","element","document","querySelector","HTMLElement","getElementRect","rect","getBoundingClientRect","top","bottom","left","right","width","height","useElementRect","options","arguments","length","undefined","_options$immediate","immediate","_options$resizeObserv","resizeObserver","elementRef","shallowRef","ref","resizeObserverInstance","updateElement","elementValue","unref","el","value","setupResizeObserver","window","ResizeObserver","observe","cleanupResizeObserver","disconnect","watch","flush","onMounted","onUnmounted","useElementHeight","target","_useElementRect","calculateHeight"],"mappings":"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"}