Vue 3获取窗口尺寸——@vueuse/core useWindowSize

Vue 3获取窗口尺寸——@vueuse/core useWindowSize

@vueuse/core 是一个 Vue 3 的常用工具集，提供了许多有用的 Vue Composition API 函数。其中 useWindowSize 就是其中之一，用于在 Vue 3 组件中获取窗口尺寸的 Hook。

使用 useWindowSize 可以轻松地获取窗口的宽度和高度，并且当窗口大小发生变化时会自动更新。

例子：

<template>
  <div>
    <p>窗口宽度: {{ windowSize.width }}</p>
    <p>窗口高度: {{ windowSize.height }}</p>
  </div>
</template>

<script>
import { useWindowSize } from '@vueuse/core';

export default {
  setup() {
    const windowSize = useWindowSize();

    return { windowSize };
  }
};
</script>

在上面的示例中，我们通过 useWindowSize 获取了窗口的尺寸信息，并将其绑定到组件的数据中，以便在模板中显示窗口的宽度和高度。