Skip to content

useElementSize

HTML 元素的反应式大小。调整大小观察者 MDN

¥Reactive size of an HTML element. ResizeObserver MDN

示例

Resize the box to see changes

用法

¥Usage

vue
<script setup lang="ts">
import { 
useElementSize
} from '@vueuse/core'
import {
useTemplateRef
} from 'vue'
const
el
=
useTemplateRef
('el')
const {
width
,
height
} =
useElementSize
(
el
)
</script> <template> <
div
ref
="
el
">
Height: {{
height
}}
Width: {{
width
}}
</
div
>
</template>

组件用法

¥Component Usage

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

指令用法

¥Directive Usage

vue
<script setup lang="ts">
import { 
vElementSize
} from '@vueuse/components'
function
onResize
({
width
,
height
}: {
width
: number,
height
: number }) {
console
.
log
(
width
,
height
)
} </script> <template> <
textarea
v-element-si
ze="
onResize
" />
<!-- with options --> <
textarea
v-element-si
ze="
[
onResize
, {
width
: 100,
height
: 100 }, {
box
: 'content-box' }]
" />
</template>