useElementSize

useElementSize 可以用于获取DOM元素的尺寸信息

基础用法

<template>
   <div ref="target">
      Size: {{size.width}} x {{size.height}}
    </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { useElementSize } from "hooks-vue3";

const target = ref(null);
const size = useElementSize(target);
</script>

API

const size = useElementSize(target);

参数

interface Size {
  width: number;
  height: number;
}

type Target<T> = T | (() => T) | Ref<T>;

function useElementSize(target: Target<Element | null>): Ref<Size>