Skip to content

useResizeObserver

报告元素内容或边框尺寸的更改

¥Reports changes to the dimensions of an Element's content or the border-box

示例

Resize the box to see changes

用法

¥Usage

vue
<script setup lang="ts">
import { 
useResizeObserver
} from '@vueuse/core'
import {
ref
,
useTemplateRef
} from 'vue'
const
el
=
useTemplateRef
('el')
const
text
=
ref
('')
useResizeObserver
(
el
, (
entries
) => {
const
entry
=
entries
[0]
const {
width
,
height
} =
entry
.
contentRect
text
.
value
= `width: ${
width
}, height: ${
height
}`
}) </script> <template> <
div
ref
="
el
">
{{
text
}}
</
div
>
</template>

指令用法

¥Directive Usage

vue
<script setup lang="ts">
import { 
vResizeObserver
} from '@vueuse/components'
const
text
=
ref
('')
function
onResizeObserver
(
entries
) {
const [
entry
] =
entries
const {
width
,
height
} =
entry
.contentRect
text
.
value
= `width: ${
width
}, height: ${
height
}`
} </script> <template> <
div
v-resize-observ
er="
onResizeObserver
">
{{
text
}}
</
div
>
</template>

调整大小观察者 MDN

¥ResizeObserver MDN