diff --git a/packages/core/useWindowSize/index.test.ts b/packages/core/useWindowSize/index.test.ts index 6565fa79572..0f3bcd1a3d2 100644 --- a/packages/core/useWindowSize/index.test.ts +++ b/packages/core/useWindowSize/index.test.ts @@ -34,4 +34,16 @@ describe('useWindowSize', () => { expect(call[0]).toEqual('resize') expect(call[2]).toEqual({ passive: true }) }) + + it('sets handler for window "orientationchange" event', async () => { + useWindowSize({ initialWidth: 100, initialHeight: 200, listenOrientation: true }) + + await nextTick() + + expect(addEventListenerSpy).toHaveBeenCalledTimes(2) + + const call = addEventListenerSpy.mock.calls[1] as any + expect(call[0]).toEqual('orientationchange') + expect(call[2]).toEqual({ passive: true }) + }) }) diff --git a/packages/core/useWindowSize/index.ts b/packages/core/useWindowSize/index.ts index 20e9e09f267..ccaaa7cf251 100644 --- a/packages/core/useWindowSize/index.ts +++ b/packages/core/useWindowSize/index.ts @@ -7,6 +7,12 @@ import { defaultWindow } from '../_configurable' export interface WindowSizeOptions extends ConfigurableWindow { initialWidth?: number initialHeight?: number + /** + * Listen to window `orientationchange` event + * + * @default true + */ + listenOrientation?: boolean } /** @@ -15,7 +21,14 @@ export interface WindowSizeOptions extends ConfigurableWindow { * @see https://vueuse.org/useWindowSize * @param options */ -export function useWindowSize({ window = defaultWindow, initialWidth = Infinity, initialHeight = Infinity }: WindowSizeOptions = {}) { +export function useWindowSize(options: WindowSizeOptions = {}) { + const { + window = defaultWindow, + initialWidth = Infinity, + initialHeight = Infinity, + listenOrientation = true, + } = options + const width = ref(initialWidth) const height = ref(initialHeight) @@ -30,6 +43,9 @@ export function useWindowSize({ window = defaultWindow, initialWidth = Infinity, tryOnMounted(update) useEventListener('resize', update, { passive: true }) + if (listenOrientation) + useEventListener('orientationchange', update, { passive: true }) + return { width, height } }