Как отследить клик по тени в модальном окне используя VUE?

Question

[Максим Золотой]

Есть модальное окно, крестик для его закрытия и тень. Если повесить обработчик на корневой элемент модального окна то оно будет закрываться при клике на самом окне, что не нужно. Как быть?

<template>
	<transition name="modal">
		<div v-if="status" class="modal-wrap">
			<div class="inner-wrap">
				<div class="modal-window">
					<div class="close-cross" @click="closeModal">
						<i class="fas fa-times"></i>
					</div>
					<slot></slot>
				</div>
			</div>
		</div>
	</transition>
</template>

Answer 1

[0xD34F]

Во-первых - погуглите, что такое всплытие событий.

Во-вторых - про модификаторы событий слышали? Надо бы self прикрутить - это если на "тень". Или stop - на окно.

Answer 2

[Дима Паутов]

https://www.npmjs.com/package/vue-click-outside