useElementBounding

类别

Elements

导出体积

1.31 kB

上次更改

7 months ago

获取 HTML 元素的响应式边界框

示例

源码 playground (beta)

调整框大小以查看更改

height: 0
bottom: 0
left: 0
right: 0
top: 0
width: 0
x: 0
y: 0

用法

vue

<script setup lang="ts">
import { useElementBounding
 } from '@vueuse/core'
import { useTemplateRef
 } from 'vue'

const el
 = useTemplateRef
('el')
const { x
, y
, top
, right
, bottom
, left
, width
, height
 } = useElementBounding
(el
)
</script>

<template>
  <div
 ref
="el
" />
</template>

组件用法

vue

<template>
  <UseElementBounding v-slot="{ width
, height
 }">
    Width: {{ width
 }} Height: {{ height
 }}
  </UseElementBounding>
</template>

指令使用

vue

<script setup lang="ts">
import { vElementBounding
 } from '@vueuse/components'

interface BoundingType {
  height
: number
  bottom
: number
  left
: number
  right
: number
  top
: number
  width
: number
  x
: number
  y
: number
}

function onBounding
({ height
, bottom
, left
, right
, top
, width
, x
, y
 }: BoundingType) {
  console
.log
(height
, bottom
, left
, right
, top
, width
, x
, y
)
}

const options
 = {
  reset
: true,
  windowResize
: true,
  windowScroll
: true,
  immediate
: true,
  updateTiming
: 'sync',
}
</script>

<template>
  <textarea
 v-element-boundi
ng="onBounding
" />
  <!-- with options -->
  <textarea
 v-element-boundi
ng="[
onBounding
, 
options
]
" />
</template>

类型声明

显示类型声明

export interface UseElementBoundingOptions {
  /**
   * 在组件卸载时将值重置为 0
   *
   * @default true
   */
  reset
?: boolean
  /**
   * 监听窗口大小调整事件
   *
   * @default true
   */
  windowResize
?: boolean
  /**
   * 监听窗口滚动事件
   *
   * @default true
   */
  windowScroll
?: boolean
  /**
   * 组件挂载时立即调用更新
   *
   * @default true
   */
  immediate
?: boolean
  /**
   * Timing to recalculate the bounding box
   *
   * Setting to `next-frame` can be useful when using this together with something like {@link useBreakpoints}
   * and therefore the layout (which influences the bounding box of the observed element) is not updated on the current tick.
   *
   * @default 'sync'
   */
  updateTiming
?: "sync" | "next-frame"
}
/**
 * HTML 元素的响应式边界框。
 *
 * @see https://vueuse.org/useElementBounding
 * @param target
 */
export declare function useElementBounding
(
  target
: MaybeComputedElementRef
,
  options
?: UseElementBoundingOptions,
): {
  height
: ShallowRef
<number, number>
  bottom
: ShallowRef
<number, number>
  left
: ShallowRef
<number, number>
  right
: ShallowRef
<number, number>
  top
: ShallowRef
<number, number>
  width
: ShallowRef
<number, number>
  x
: ShallowRef
<number, number>
  y
: ShallowRef
<number, number>
  update
: () => void
}
export type UseElementBoundingReturn
 = ReturnType
<typeof useElementBounding
>