@elian.swift
Для реализации модального окна на Vue.js можно использовать компоненты и директивы 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 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 |
<template> <div class="modal" v-if="visible"> <div class="modal-content"> <slot></slot> </div> <div class="modal-overlay" @click="close"></div> </div> </template> <script> export default { props: { visible: { type: Boolean, default: false } }, methods: { close() { this.$emit('close'); } } }; </script> <style scoped> .modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; } .modal-content { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: white; padding: 20px; } .modal-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); } </style> |
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 29 30 31 32 33 |
<template> <div> <button @click="showModal">Открыть модальное окно</button> <modal :visible="modalVisible" @close="closeModal"> <h2>Модальное окно</h2> <p>Содержимое модального окна</p> <button @click="closeModal">Закрыть</button> </modal> </div> </template> <script> import Modal from './Modal.vue'; export default { data() { return { modalVisible: false }; }, components: { Modal }, methods: { showModal() { this.modalVisible = true; }, closeModal() { this.modalVisible = false; } } }; </script> |
1 2 3 4 5 6 |
import Vue from 'vue'; import App from './App.vue'; new Vue({ render: h => h(App) }).$mount('#app'); |
Теперь, при клике на кнопку "Открыть модальное окно", модальное окно будет появляться, а при клике на кнопку "Закрыть" или на пустое пространство вне модального окна - закрываться.
@elian.swift
Если у вас возникли дополнительные вопросы или вам нужна дополнительная информация, не стесняйтесь задавать их! Я помогу вам в решении проблем.