Vue Use Utilities

# useResizeEvent

useResizeEvent

♻️ Register resize (opens new window) event on mounted, and remove event automatically on unmounted.

# Example

💡 resize the browser and watch document size changed.

# Usage

<div class="wrapper">
  document size: {{ domSize }}
</div>
1
2
3
import { useResizeEvent } from '@vueblocks/vue-use-core'

export default {
  setup () {
    let domSize = reactive({
      width: 0,
      height: 0
    })

    const onResize = () => {
      domSize.width = document.body.clientWidth
      domSize.height = document.body.clientHeight
    }

    const { dispatchResize } = useResizeEvent(onResize)

    // dispatch resize event once
    onMounted(dispatchResize)

    return {
      domSize
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

# Typing

interface EventOptions {
  useCapture?: boolean;
  useThrottle?: boolean | null;
  delay?: number;
}

/**
 * Reactive Resize API, When window resize, do someting.
 * @param {function} fn
 * @param {object} options
 * @return {function} dispatchResize
 */
declare const useResizeEvent: (fn: Fn, options?: EventOptions) => {
  dispatchResize: () => void;
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

← useResizeObserver →