VueUse中文文档useElementSize
元素尺寸大小响应式. ResizeObserver MDN
Reactive size of an HTML element. ResizeObserver MDN
例子
Resize the box to see changes
Usage
html
<template>
<div ref="el">
Height: {{ height }}
Width: {{ width }}
</div>
</template>
<script>
import { ref } from 'vue'
import { useElementSize } from '@vueuse/core'
export default {
setup() {
const el = ref(null)
const { width, height } = useElementSize(el)
return {
el,
width,
height,
}
}
}
</script>
<template>
<div ref="el">
Height: {{ height }}
Width: {{ width }}
</div>
</template>
<script>
import { ref } from 'vue'
import { useElementSize } from '@vueuse/core'
export default {
setup() {
const el = ref(null)
const { width, height } = useElementSize(el)
return {
el,
width,
height,
}
}
}
</script>
Component Usage
该函数还通过
@vueuse/components提供了一个无渲染的组件版本。了解更多.
This function also provides a renderless component version via the
@vueuse/componentspackage. Learn more about the usage.
html
<UseElementSize v-slot="{ width, height }">
Width: {{ width }}
Height: {{ height }}
</UseElementSize>
<UseElementSize v-slot="{ width, height }">
Width: {{ width }}
Height: {{ height }}
</UseElementSize>
Directive Usage
This function also provides a directive version via the
@vueuse/componentspackage. Learn more about the usage.
html
<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-size="onResize" />
<!-- with options -->
<textarea v-element-size="[onResize, {width:100,height:100}, {'box':'content-box'} ]" />
</template>
<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-size="onResize" />
<!-- with options -->
<textarea v-element-size="[onResize, {width:100,height:100}, {'box':'content-box'} ]" />
</template>
Type Declarations
typescript
export interface ElementSize {
width: number
height: number
}
/**
* Reactive size of an HTML element.
*
* @see https://vueuse.org/useElementSize
* @param target
* @param callback
* @param options
*/
export declare function useElementSize(
target: MaybeComputedElementRef,
initialSize?: ElementSize,
options?: UseResizeObserverOptions
): {
width: Ref<number>
height: Ref<number>
}
export type UseElementSizeReturn = ReturnType<typeof useElementSize>
export interface ElementSize {
width: number
height: number
}
/**
* Reactive size of an HTML element.
*
* @see https://vueuse.org/useElementSize
* @param target
* @param callback
* @param options
*/
export declare function useElementSize(
target: MaybeComputedElementRef,
initialSize?: ElementSize,
options?: UseResizeObserverOptions
): {
width: Ref<number>
height: Ref<number>
}
export type UseElementSizeReturn = ReturnType<typeof useElementSize>