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

Question

[Руслан Абсалямов]

У меня вопрос, по кнопке все понятно что срабатывает @click и событие, но как его закрывать, когда за рамки модального окна, не пойму куда сувать событие и как понимаю это событие должно быть типо @click="$emit('close')" в модальном окне?
Вот мой пример модального окна https://codesandbox.io/s/pyvjxxnnvj
Находитсья в src/components/ModalComponent.vue
Но он по аналогии сделан как этот https://jsfiddle.net/yyx990803/mwLbw11k/?utm_sourc...

Answer 1

[Влад Токарев]

Обычно это делают по клику на оверлее, у вас в примере это <div class="modal-mask">

Comments

[Руслан Абсалямов]

Влад Токарев Если туда поместить, то происходит что даже в самом модальном окне нажимаешь он все равно закрывается https://jsfiddle.net/mwLbw11k/17586/

[Руслан Абсалямов]

Наверное так надо

<div class="modal-wrapper" @click.self="$emit('close')">

[Roman Alekseiev]

<div class="modal-mask" @click="$emit('close')">
    <div class="modal-wrapper">
      <div class="modal-container" @click.stop="">

[Руслан Абсалямов]

Roman Alekseiev, Ну в принципе разницы никакой как понимаю, как реализовывать первый вариант или второй вариант

[Влад Токарев]

Руслан Абсалямов, сразу не обратил внимания. Подложку обычно делают внутри компонента отдельным пустым блоком (без дочерних элементов). У вас же модалка находится внутри нее.
Если делать быстро, но некрасиво, то в модалке все @click заменяем на @click.stop, но корректней структуру

<template>...
    <div class="modal-mask">
        <div class="modal-wrapper">...</div>
    </div>
</template>

заменить на

<template>
    <div>
        <div class="modal-mask"></div>
        <div class="modal-wrapper">...</div>
    </div>
</template>