跳到主要内容

useWindowSize

分类
导出大小
1.49 KB
上次更改
3 个月前

响应式窗口大小

演示

用法

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>

类型声明

显示类型声明
ts
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
>

来源

源代码演示文档

贡献者

Anthony Fu
Anthony Fu
Jelf
Antério Vieira
IlyaL
SerKo
青椒肉丝
IlyaL
Robin
Fernando Fernández
huiliangShen
Al-Khawarizmi
Indrek Ardel
Zhousg
vaakian X
vaakian X
Shinigami
wheat
Alex Kozack
Roman Pavlov

更新日志

8c521 - feat(components)!: 重构组件并使其保持一致 (#4912)
v13.6.0
d32f8 - refactor: 为所有纯函数添加 @__NO_SIDE_EFFECTS__ 注释 (#4907)
v12.4.0
dd316 - feat: 尽可能在所有地方使用被动事件处理程序 (#4477)
v12.1.0
e78ef - feat: 添加 type: visual 选项,利用 visualViewport (#4395)
0a9ed - feat!: 放弃对 Vue 2 的支持,优化打包并清理 (#4349)
bfba3 - feat: 添加获取窗口外部尺寸的功能 (#3999)

根据 MIT 许可证发布。