modal 바깥 click event

modal 창에서 바깥쪽을 클릭할 경우 닫히게 만들고 싶었다.

구글신께 물어봤다.

<script setup>
import {OnClickOutside} from '@vueuse/components'

function close()
{
	console.log( "AAA" );
}
</script>

<template>
	<OnClickOutside @trigger="close">
		<div>
			Click Outside of Me
		</div>
	</OnClickOutside>
</template>

코드의 핵심은

import {OnClickOutside} from '@vueuse/components'
<OnClickOutside @trigger="close">

참조

VueUse

Collection of essential Vue Composition Utilities

VueUseAnthony Fu