Skip to content

useElementBounding

HTML 元素的响应式 边界框

¥Reactive bounding box of an HTML element

示例

Resize the box to see changes

用法

¥Usage

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>

组件用法

¥Component Usage

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

指令用法

¥Directive Usage

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>

类型声明

显示类型声明
ts
export interface UseElementBoundingOptions {
  /**
   * Reset values to 0 on component unmounted
   *
   * @default true
   */
  
reset
?: boolean
/** * Listen to window resize event * * @default true */
windowResize
?: boolean
/** * Listen to window scroll event * * @default true */
windowScroll
?: boolean
/** * Immediately call update on component mounted * * @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"
} /** * Reactive bounding box of an HTML element. * * @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
>

源代码

源代码示例文档

变更日志

最近没有更改