useWindowSize

介绍

获取浏览器窗口的视口宽度和高度,并在窗口大小变化时自动更新。

代码演示

基本用法

  1. import { watch } from 'vue';
  2. import { useWindowSize } from '@vant/use';
  3. export default {
  4. setup() {
  5. const { width, height } = useWindowSize();
  6. console.log(width.value); // -> 窗口宽度
  7. console.log(height.value); // -> 窗口高度
  8. watch([width, height], () => {
  9. console.log('window resized');
  10. });
  11. },
  12. };

API

类型定义

  1. function useWindowSize(): {
  2. width: Ref<number>;
  3. height: Ref<number>;
  4. };

返回值

参数说明类型
width浏览器窗口宽度Ref<number>
height浏览器窗口高度Ref<number>

useWindowSize - 图1