跳到主要内容

useElementSize

分类
导出大小
897 B
上次更改
8 个月前

HTML 元素的响应式大小。ResizeObserver MDN

演示

调整盒子大小以查看变化

用法

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>

组件用法

此函数还通过 @vueuse/components 包提供了一个无渲染组件版本。了解更多用法

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

指令用法

此函数还通过 @vueuse/components 包提供了一个指令版本。了解更多用法

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>

类型声明

ts
export interface ElementSize {
  
width
: number
height
: number
} /** * Reactive size of an HTML element. * * @see https://vueuse.org.cn/useElementSize */ export declare function
useElementSize
(
target
:
MaybeComputedElementRef
,
initialSize
?: ElementSize,
options
?:
UseResizeObserverOptions
,
): {
width
:
ShallowRef
<number, number>
height
:
ShallowRef
<number, number>
stop
: () => void
} export type
UseElementSizeReturn
=
ReturnType
<typeof
useElementSize
>

来源

源文件演示文档

贡献者

Anthony Fu
Anthony Fu
webfansplz
IlyaL
menghan
Mikhailov Nikita
wheat
青椒肉丝
Robin
James Garbutt
IlyaL
我想静静
siaikin
仿生狮子
ByMykel
jing
vaakian X
Vasily Kuzin
vaakian X
Jelf
Shinigami
Alex Kozack
Sanxiaozhizi

更新日志

8c521 - feat(components)!: 重构组件并使其保持一致 (#4912)
v13.2.0
9889f - 修复:组件类型警告 (#4722)
v12.3.0
021d0 - feat(toArray): 新的实用函数 (#4432)
0a9ed - feat!: 放弃对 Vue 2 的支持,优化打包并清理 (#4349)
d8015 - 修复:使用 getBoundingClientRect 获取 SVG 元素大小 (#3940)
v10.6.0
165c8 - 修复:在 onMounted 钩子中获取值 (#3366)
5f545 - 特性:停止功能 (#3367)
v10.4.0
791f7 - 修复:为组件使用添加 as 属性 (#3274)

根据 MIT 许可证发布。