tdesign-mobile-vue/es/hooks/useElementRect.mjs.map

tdesign-mobile-vue

{"version":3,"file":"useElementRect.mjs","sources":["../../src/hooks/useElementRect.ts"],"sourcesContent":["import { ref, shallowRef, Ref, ShallowRef, unref, watch, onMounted, onUnmounted } from 'vue';\nimport { useResizeObserver } from './useResizeObserver';\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: enableResizeObserver = 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\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  // 使用统一的 ResizeObserver hook\n  const { stop: stopResizeObserver, start: startResizeObserver } = useResizeObserver(\n    elementRef,\n    () => {\n      if (elementRef.value) {\n        rect.value = getElementRect(elementRef.value);\n      }\n    },\n    { immediate: false, onResize: true, onVisibilityChange: false },\n  );\n\n  // 监听 element 参数变化\n  watch(\n    () => unref(element),\n    () => {\n      stopResizeObserver();\n      updateElement();\n      if (enableResizeObserver) {\n        startResizeObserver();\n      }\n    },\n    { flush: 'post' },\n  );\n\n  onMounted(() => {\n    if (immediate) {\n      updateElement();\n      if (enableResizeObserver) {\n        startResizeObserver();\n      }\n    }\n  });\n\n  onUnmounted(() => {\n    stopResizeObserver();\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","enableResizeObserver","elementRef","shallowRef","ref","updateElement","elementValue","unref","el","value","_useResizeObserver","useResizeObserver","onResize","onVisibilityChange","stopResizeObserver","stop","startResizeObserver","start","watch","flush","onMounted","onUnmounted","useElementHeight","target","_useElementRect","calculateHeight"],"mappings":"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"}