useWindowSize

Demo

Infinity x Infinity

用法

import { useWindowSize } from '@vueuse/core'

const { width, height } = useWindowSize()

组件使用

vue

<template>
  <UseWindowSize v-slot="{ width, height }">
    Width: {{ width }}
    Height: {{ height }}
  </UseWindowSize>
</template>

类型声明

typescript

export interface UseWindowSizeOptions extends ConfigurableWindow {
  /**
   * 初始宽度
   */
  initialWidth?: number
  /**
   * 初始高度
   */
  initialHeight?: number
  /**
   * 监听窗口 `orientationchange` 事件
   *
   * @default true
   */
  listenOrientation?: boolean
  /**
   * 是否包含滚动条在宽度和高度中
   * 仅当 `type` 为 `'inner'` 时有效
   *
   * @default true
   */
  includeScrollbar?: boolean
  /**
   * 使用 `window.innerWidth` 或 `window.outerWidth`
   *
   * @default 'inner'
   */
  type?: "inner" | "outer"
}
/**
 * 响应式窗口大小。
 *
 * @see https://vueuse.org/useWindowSize
 * @param options
 */
export declare function useWindowSize(options?: UseWindowSizeOptions): {
  width: Ref<number, number>
  height: Ref<number, number>
}
export type UseWindowSizeReturn = ReturnType<typeof useWindowSize>