fargo
1a822493ba
963 markdown files reformatted with the repository's pinned prettier so pnpm format:check covers the folded tree like every other repo file. The formatter's embedded-language pass also normalized code fences (TS semicolons, closed HTML tags in examples, lowercased CSS hex colors, one renumbered list that skipped an index). Alphanumeric token deltas vs the fold commit were audited file-by-file; all are formatter-equivalent markup normalizations plus the four sanitized skills.
2.8 KiB
2.8 KiB
category
| category |
|---|
| Elements |
useElementBounding
Reactive bounding box of an HTML element
Usage
<script setup lang="ts">
import { useElementBounding } from '@vueuse/core';
import { useTemplateRef } from 'vue';
const el = useTemplateRef('el');
const { x, y, top, right, bottom, left, width, height } = useElementBounding(el);
</script>
<template>
<div ref="el" />
</template>
Component Usage
<template>
<UseElementBounding v-slot="{ width, height }">
Width: {{ width }} Height: {{ height }}
</UseElementBounding>
</template>
Directive Usage
<script setup lang="ts">
import { vElementBounding } from '@vueuse/components';
interface BoundingType {
height: number;
bottom: number;
left: number;
right: number;
top: number;
width: number;
x: number;
y: number;
}
function onBounding({ height, bottom, left, right, top, width, x, y }: BoundingType) {
console.log(height, bottom, left, right, top, width, x, y);
}
const options = {
reset: true,
windowResize: true,
windowScroll: true,
immediate: true,
updateTiming: 'sync',
};
</script>
<template>
<textarea v-element-bounding="onBounding" />
<!-- with options -->
<textarea v-element-bounding="[onBounding, options]" />
</template>
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;
/**
* Timing to recalculate the bounding box
*
* Setting to `next-frame` can be useful when using this together with something like {@link useBreakpoints}
* and therefore the layout (which influences the bounding box of the observed element) is not updated on the current tick.
*
* @default 'sync'
*/
updateTiming?: 'sync' | 'next-frame';
}
/**
* Reactive bounding box of an HTML element.
*
* @see https://vueuse.org/useElementBounding
* @param target
*/
export declare function useElementBounding(
target: MaybeComputedElementRef,
options?: UseElementBoundingOptions,
): {
height: ShallowRef<number, number>;
bottom: ShallowRef<number, number>;
left: ShallowRef<number, number>;
right: ShallowRef<number, number>;
top: ShallowRef<number, number>;
width: ShallowRef<number, number>;
x: ShallowRef<number, number>;
y: ShallowRef<number, number>;
update: () => void;
};
export type UseElementBoundingReturn = ReturnType<typeof useElementBounding>;