@bernardo_nolan
Для создания модального окна на Vue.js можно использовать следующие шаги:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
<template> <div class="modal"> <div class="modal-content"> <slot></slot> <button @click="$emit('close')">Закрыть</button> </div> </div> </template> <style> .modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); display: flex; justify-content: center; align-items: center; } .modal-content { background-color: white; padding: 20px; border-radius: 4px; } </style> |
В этом компоненте определены два слота: один для содержимого модального окна, а другой для кнопки закрытия. Также определены стили для модального окна.
1 2 3 4 5 |
data() { return { showModal: false }; } |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<template> <div> <button @click="showModal = true">Открыть модальное окно</button> <Modal v-if="showModal" @close="showModal = false"> <h2>Заголовок модального окна</h2> <p>Содержимое модального окна</p> </Modal> </div> </template> <script> import Modal from './Modal.vue'; export default { components: { Modal }, data() { return { showModal: false }; } }; </script> |
Здесь мы импортируем компонент модального окна и определяем его в качестве дочернего компонента. Мы также связываем событие закрытия модального окна с обновлением переменной showModal
.
Готово! Теперь при нажатии на кнопку "Открыть модальное окно" появится модальное окно с заголовком и содержимым, а при нажатии на кнопку "Закрыть" окно закроется.