useElResize.ts 656 B

123456789101112131415161718192021222324252627282930
  1. import { useDebounce } from '/@/hooks/core/useDebounce';
  2. import { addResizeListener, removeResizeListener } from '/@/utils/event/resizeEvent';
  3. interface WindowSizeOptions {
  4. once?: boolean;
  5. immediate?: boolean;
  6. }
  7. export function useElResize<T>(
  8. el: Element | typeof window,
  9. fn: Fn<T>,
  10. wait = 100,
  11. options?: WindowSizeOptions
  12. ) {
  13. let handler = () => {
  14. fn();
  15. };
  16. const [handleSize, cancel] = useDebounce(handler, wait, options);
  17. handler = wait ? handleSize : handler;
  18. function start() {
  19. addResizeListener(el, handler);
  20. }
  21. function stop() {
  22. removeResizeListener(el, handler);
  23. cancel();
  24. }
  25. return [start, stop];
  26. }