[vue3] 오브젝트 밖 클릭 감지

팝업 창 밖을 클릭 시 자동으로 닫히게 하고 싶을 때가 있다.

간단하게 구현가능한 패키지가 있다.

패키지 설치

npm i @vueuse/components

코드

<OnClickOutside @trigger="calendarOn = false" :options="{ ignore: [/* ... */] }">
	<div v-if="calendarOn" style="position: absolute; z-index: 1; top:30px; left:0">
		<DatePicker :value="null" color="yellow" is-dark is-range v-model="dates"/>
	</div>
</OnClickOutside>
<input ref="from" style="border: 0px; text-align: center; width: 40%; height: 30px" type="text" v-model="dueDateFrom" @click="calendarOn = true">

버튼을 누르면 달력이 켜지고( calendarOn = true ) 밖을 클릭하면 달력이 닫힌다.( calendarOn = false )