useWindowSize

分类

元素

导出大小

1.49 KB

上次更改

3 个月前

响应式窗口大小

演示

源代码在线演示 (beta)

无限 x 无限

用法

vue

<script setup lang="ts">
import { useWindowSize
 } from '@vueuse/core'

const { width
, height
 } = useWindowSize
()
</script>

<template>
  <div
>
    Width: {{ width
 }}
    Height: {{ height
 }}
  </div
>
</template>

组件用法

此函数还通过 @vueuse/components 包提供了一个无渲染组件版本。了解更多用法。

vue

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

类型声明

显示类型声明

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` or `window.visualViewport`
   * visualViewport documentation from MDN(https://mdn.org.cn/zh-CN/docs/Web/API/VisualViewport)
   * @default 'inner'
   */
  type
?: "inner" | "outer" | "visual"
}
/**
 * Reactive window size.
 *
 * @see https://vueuse.org.cn/useWindowSize
 * @param options
 *
 * @__NO_SIDE_EFFECTS__
 */
export declare function useWindowSize
(options
?: UseWindowSizeOptions): {
  width
: ShallowRef
<number, number>
  height
: ShallowRef
<number, number>
}
export type UseWindowSizeReturn
 = ReturnType
<typeof useWindowSize
>