Модальное окно

Модальное окно
UI MyDialog.vue

src\components\UI\MyDialog.vue

Объявим пропс
Этот пропс будет отвечать за то:

• видимо модальное окно или нет (это какой то буллен флаг)
• по умолчанию модальное окно будет не видимым.

В шаблоне контента

На корневой блок div мы будем растягивать на всю ширину экрана

• навешиваем класс dialog
• делаем проверку v-if

Внутри корневого блока создадим ещё один блок, в котором будет располагаться контентная часть как класс dialog_content
блок-контент располагается по середине экрана.

В середине контента мы помещаем слот, для того чтобы модальное окно было динамически изменяемым.

@click=»hideDialog«
При нажатии в не контентной части диалоговое окно закрывалось, поэтому на корневой блок div вешаем слушатель события нажатие на выполнение функции hideDialog. В функции мы emit-им событие update:show и второй параметр закрывает диалоговое окно значением false

Stop

Окно закрывается если нажать даже на контентную часть. Это связано как раз со вспытием событий JavaScript.
Для того чтобы предотвратить вспытие событий добавим модификатор stop. Это надо делать и на контентной части

<template>
<div class="dialog" v-if="show === true" @click.stop="hideDialog">
 <div @click.stop class="dialog_content">
 <slot></slot>
 </div>
</div>
</template>

<script>
export default{
 name: 'my-dialog',
 props: {
  show: {
   type:Boolean,
   default: false,
  }
 },
 methods: {
  hideDialogs() {
   this.$emit('update:show',false);
  }
 } 
}
</script>

<style scoped>
растянуть окно на всю ширину экрана
.dialog {
 top: 0;
 bottom: 0;
 right: 0;
 left: 0;
 background: rgba(0,0,0, 0.5); задний фон экрана теёмный но прозрачный
 position: fixed;
 display:flex; для центрировки контентной части по середине
}

.dialog_content {
 margin: auto; центрировка блока
 baground: white;
 border-radius: 12px; закруглить края
 min-height: 50px; минимальная высота
 main-width: 300px; минимальная ширина
 padding: 20px; отступ по краям
}
</style>