useElementBounding
Reactive bounding box of an HTML element
Demo
Resize the box to see changes
Usage
<template>
<div ref="el" />
</template>
<script>
import { ref } from 'vue'
import { useElementBounding } from '@vueuse/core'
export default {
setup() {
const el = ref(null)
const { x, y, top, right, bottom, left, width, height } = useElementBounding(el)
return {
el,
/* ... */
}
}
}
</script>
<template>
<div ref="el" />
</template>
<script>
import { ref } from 'vue'
import { useElementBounding } from '@vueuse/core'
export default {
setup() {
const el = ref(null)
const { x, y, top, right, bottom, left, width, height } = useElementBounding(el)
return {
el,
/* ... */
}
}
}
</script>
Component Usage
This function also provides a renderless component version via the
@vueuse/componentspackage. Learn more about the usage.
<UseElementBounding v-slot="{ width, height }">
Width: {{ width }}
Height: {{ height }}
</UseElementBounding>
<UseElementBounding v-slot="{ width, height }">
Width: {{ width }}
Height: {{ height }}
</UseElementBounding>
Type Declarations
export interface UseElementBoundingOptions {
/**
* Reset values to 0 on component unmounted
*
* @default true
*/
reset?: boolean
/**
* Listen to window resize event
*
* @default true
*/
windowResize?: boolean
/**
* Listen to window scroll event
*
* @default true
*/
windowScroll?: boolean
/**
* Immediately call update on component mounted
*
* @default true
*/
immediate?: boolean
}
/**
* Reactive bounding box of an HTML element.
*
* @see https://vueuse.org/useElementBounding
* @param target
*/
export declare function useElementBounding(
target: MaybeElementRef,
options?: UseElementBoundingOptions
): {
height: Ref<number>
bottom: Ref<number>
left: Ref<number>
right: Ref<number>
top: Ref<number>
width: Ref<number>
x: Ref<number>
y: Ref<number>
update: () => void
}
export declare type UseElementBoundingReturn = ReturnType<
typeof useElementBounding
>
export interface UseElementBoundingOptions {
/**
* Reset values to 0 on component unmounted
*
* @default true
*/
reset?: boolean
/**
* Listen to window resize event
*
* @default true
*/
windowResize?: boolean
/**
* Listen to window scroll event
*
* @default true
*/
windowScroll?: boolean
/**
* Immediately call update on component mounted
*
* @default true
*/
immediate?: boolean
}
/**
* Reactive bounding box of an HTML element.
*
* @see https://vueuse.org/useElementBounding
* @param target
*/
export declare function useElementBounding(
target: MaybeElementRef,
options?: UseElementBoundingOptions
): {
height: Ref<number>
bottom: Ref<number>
left: Ref<number>
right: Ref<number>
top: Ref<number>
width: Ref<number>
x: Ref<number>
y: Ref<number>
update: () => void
}
export declare type UseElementBoundingReturn = ReturnType<
typeof useElementBounding
>
Source
Contributors
Anthony Fu
Jelf
wheat
hsyq
Hebilicious
webfansplz
Ciro Lo Sapio
Shinigami
Alex Kozack