You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
36 lines
725 B
36 lines
725 B
3 years ago
|
import { tryOnMounted, tryOnUnmounted, useDebounceFn } from '@vueuse/core'
|
||
|
|
|
||
|
|
interface WindowSizeOptions {
|
||
|
|
once?: boolean
|
||
|
|
immediate?: boolean
|
||
|
|
listenerOptions?: AddEventListenerOptions | boolean
|
||
|
|
}
|
||
|
|
|
||
|
|
export function useWindowSizeFn<T>(fn: Fn<T>, wait = 150, options?: WindowSizeOptions) {
|
||
|
|
let handler = () => {
|
||
|
|
fn()
|
||
|
|
}
|
||
|
|
const handleSize = useDebounceFn(handler, wait)
|
||
|
|
handler = handleSize
|
||
|
|
|
||
|
|
const start = () => {
|
||
|
|
if (options && options.immediate) {
|
||
|
|
handler()
|
||
|
|
}
|
||
|
|
window.addEventListener('resize', handler)
|
||
|
|
}
|
||
|
|
|
||
|
|
const stop = () => {
|
||
|
|
window.removeEventListener('resize', handler)
|
||
|
|
}
|
||
|
|
|
||
|
|
tryOnMounted(() => {
|
||
|
|
start()
|
||
|
|
})
|
||
|
|
|
||
|
|
tryOnUnmounted(() => {
|
||
|
|
stop()
|
||
|
|
})
|
||
|
|
return [start, stop]
|
||
|
|
}
|