disaptchEvent(new Event('resize'))로 리플로우 발생시키기 (vue, element-ui)

element-ui, vue를 조합해서 컴포넌트를 사용하고 있는데

element-ui의 el-popover는 클릭 or 호버시에 popup창이 해당 클릭 버튼 근처에 뜨는 형식이다.

근데 조금 신기한 형식인게, 해당 컴포넌트가 만들어질 때, 원래 있던 dom의 내부가 아닌 외부에 popup을 위한 dom이 생성된다.

그래서 기존의 버튼 위치가 이동하거나 할 때 감지하지 못했다.

그래도 window의 리사이즈에는 반응을 하고있었기 때문에,

버튼이 이동하거나, dom의 사이즈가 변경되서 위치를 조정해줘야할때,

window.dispatchEvent(new Event('resize')) 를 주었다.

근데 해당 이동이 transition이 걸려있어서,

	const clickEvent = () => {
		const _interval = setInterval(() => {
		  window.dispatchEvent(new Event('resize'))
		}, 16)
		setTimeout(() => {
		  clearInterval(_interval)
		}, 1000)
	}

같은 형식으로 이벤트를 강제적으로 주었습니다.

첨언을 하자면, window의 resize 이벤트는 브라우저 창의 크기가 변경할때 발생하는 이벤트이다.

그래서 dom사이즈 변경에는 반응하지 않는다.

dom사이즈 변경을 감지해서 사용하려면

https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver/ResizeObserver
참조하셔서 사용하시길 추천드린다.

필자는 window.resize이벤트를 발생시킬 때, 페이지의 레이아웃을 다시 계산하는 과정을 사용하고

이를 통해 리플로우를 발생시키기 위해 사용한 것 입니다.