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>