|
|
|
@ -4,7 +4,6 @@ import { tryOnMounted, tryOnUnmounted } from '/@/utils/helper/vueHelper'; |
|
|
|
import { ref } from 'vue'; |
|
|
|
|
|
|
|
import { useDebounce } from '/@/hooks/core/useDebounce'; |
|
|
|
import { CancelFn } from '../core/types'; |
|
|
|
|
|
|
|
interface WindowSizeOptions { |
|
|
|
once?: boolean; |
|
|
|
@ -12,25 +11,33 @@ interface WindowSizeOptions { |
|
|
|
listenerOptions?: AddEventListenerOptions | boolean; |
|
|
|
} |
|
|
|
|
|
|
|
export function useWindowSizeFn<T>(fn: Fn<T>, wait = 150, options?: WindowSizeOptions): CancelFn { |
|
|
|
export function useWindowSizeFn<T>(fn: Fn<T>, wait = 150, options?: WindowSizeOptions) { |
|
|
|
let handler = () => { |
|
|
|
fn(); |
|
|
|
}; |
|
|
|
const [handleSize, cancel] = useDebounce(handler, wait, options); |
|
|
|
handler = handleSize; |
|
|
|
|
|
|
|
tryOnMounted(() => { |
|
|
|
const start = () => { |
|
|
|
if (options && options.immediate) { |
|
|
|
handler(); |
|
|
|
} |
|
|
|
window.addEventListener('resize', handler); |
|
|
|
}); |
|
|
|
}; |
|
|
|
|
|
|
|
tryOnUnmounted(() => { |
|
|
|
const stop = () => { |
|
|
|
window.removeEventListener('resize', handler); |
|
|
|
cancel(); |
|
|
|
}; |
|
|
|
|
|
|
|
tryOnMounted(() => { |
|
|
|
start(); |
|
|
|
}); |
|
|
|
|
|
|
|
tryOnUnmounted(() => { |
|
|
|
stop(); |
|
|
|
}); |
|
|
|
return cancel; |
|
|
|
return [start, stop]; |
|
|
|
} |
|
|
|
|
|
|
|
export const useWindowSize = (wait = 150, options?: WindowSizeOptions) => { |
|
|
|
|