useWindowSize

カテゴリ

要素

エクスポートサイズ

964 B

最終更新

先週

リアクティブなウィンドウサイズ

デモ

ソース

無限 x 無限

使用法

import { useWindowSize } from '@vueuse/core'

const { width, height } = useWindowSize()

コンポーネントの使用法

この関数は、@vueuse/components パッケージを介してレンダーレスコンポーネントバージョンも提供します。使用法について詳しくはこちらをご覧ください。

vue

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

型宣言

typescript

export interface UseWindowSizeOptions extends ConfigurableWindow {
  initialWidth?: number
  initialHeight?: number
  /**
   * Listen to window `orientationchange` event
   *
   * @default true
   */
  listenOrientation?: boolean
  /**
   * Whether the scrollbar should be included in the width and height
   * Only effective when `type` is `'inner'`
   *
   * @default true
   */
  includeScrollbar?: boolean
  /**
   * Use `window.innerWidth` or `window.outerWidth`
   *
   * @default 'inner'
   */
  type?: "inner" | "outer"
}
/**
 * Reactive window size.
 *
 * @see https://vueuse.dokyumento.jp/useWindowSize
 * @param options
 */
export declare function useWindowSize(options?: UseWindowSizeOptions): {
  width: Ref<number, number>
  height: Ref<number, number>
}
export type UseWindowSizeReturn = ReturnType<typeof useWindowSize>