mirror of
https://github.com/directus/directus.git
synced 2026-02-11 09:15:01 -05:00
12a3b22aa1
* Fix v-table interalItems type * Fix useGroupable return type * Fix useCollection return type * Fix useCustomSelection return type * Fix useElementSize return type * Fix useFormFields return type * Fix useItem return type * Fix useItems return type * Prepend composable return type name with "Usable" * Fix usePreset return type * Fix useScrollDistance return type * Fix useTitle return type * Fix useWindowSize return type * Fix usePermissions return type * Fix useTemplateData return type * Fix a few type issues in field store * Fix extension getter return types * Fix hydrate store type issue and double-hydrating users store * Fix code interface type issue * Fix m2m composables return types * Fix html editor composables return types * Fix collections module composables return types * Fix files module composable return type * Fix settings module composable return type * Fix settings module roles composables return types * Fix settings module users composable return type * Fix return type issues in utils and a nasty parameter overwrite * Fix modelValue casing in template
useElementSize
function useElementSize(element: Element): { width: Ref<number>; height: Ref<number> };
Allows you to reactively watch an elements width and height.
Usage
<template>
<div ref="el">My size is: {{ width }} x {{ height }}</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import { useElementSize } from '@/composables/use-element-size';
export default defineComponent({
setup(props) {
const el = ref<Element>(null);
const { width, height } = useElementSize(el);
return { el, width, height };
},
});
</script>