forked from vitest-dev/vitest
/
index.ts
45 lines (42 loc) · 1.11 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
import { ref, watch } from 'vue-demi'
import type { MaybeElementRef } from '../unrefElement'
import type { ResizeObserverOptions } from '../useResizeObserver'
import { useResizeObserver } from '../useResizeObserver'
import { unrefElement } from '../unrefElement'
export interface ElementSize {
width: number
height: number
}
/**
* Reactive size of an HTML element.
*
* @see https://vueuse.org/useElementSize
* @param target
* @param callback
* @param options
*/
export function useElementSize(
target: MaybeElementRef,
initialSize: ElementSize = { width: 0, height: 0 },
options: ResizeObserverOptions = {},
) {
const width = ref(initialSize.width)
const height = ref(initialSize.height)
useResizeObserver(
target,
([entry]) => {
width.value = entry.contentRect.width
height.value = entry.contentRect.height
},
options,
)
watch(() => unrefElement(target), (ele) => {
width.value = ele ? initialSize.width : 0
height.value = ele ? initialSize.height : 0
})
return {
width,
height,
}
}
export type UseElementSizeReturn = ReturnType<typeof useElementSize>