-
-
Notifications
You must be signed in to change notification settings - Fork 2.4k
/
index.ts
52 lines (44 loc) · 1.23 KB
/
index.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
import { ref } from 'vue-demi'
import { tryOnMounted } from '@vueuse/shared'
import { useEventListener } from '../useEventListener'
import type { ConfigurableWindow } from '../_configurable'
import { defaultWindow } from '../_configurable'
export interface WindowSizeOptions extends ConfigurableWindow {
initialWidth?: number
initialHeight?: number
/**
* Listen to window `orientationchange` event
*
* @default true
*/
listenOrientation?: boolean
}
/**
* Reactive window size.
*
* @see https://vueuse.org/useWindowSize
* @param options
*/
export function useWindowSize(options: WindowSizeOptions = {}) {
const {
window = defaultWindow,
initialWidth = Infinity,
initialHeight = Infinity,
listenOrientation = true,
} = options
const width = ref(initialWidth)
const height = ref(initialHeight)
const update = () => {
if (window) {
width.value = window.innerWidth
height.value = window.innerHeight
}
}
update()
tryOnMounted(update)
useEventListener('resize', update, { passive: true })
if (listenOrientation)
useEventListener('orientationchange', update, { passive: true })
return { width, height }
}
export type UseWindowSizeReturn = ReturnType<typeof useWindowSize>