Buen ejercicio para poner en práctica lo aprendido.
Me quedo asi:
Mi código:
- HTML
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Modal With Vue || JCode</title>
<link rel="stylesheet" href="main.css">
</head>
<body>
<div id="app">
<button v-on:click="toggleModal">Show Modal</button>
<!-- primero: para mostrar el modal, segundo: para enviar el titulo al hijo, tercero: el hijo envia el evento al padre, cuarto: el template envia html al hijo -->
<modal
v-show="showModal"
v-bind:modal="modalData"
v-on:change-valor="toggleModal">
<template v-slot:body-modal>
<p>Este es el grandioso modal que hicimos con Vue.js, aqui deberias de poner el contenido.</p>
<img src="undraw.svg" alt="Image modal"/>
</template>
</modal>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="app.js"></script>
</body>
</html>
- CSS
#app {
padding: 20px;
text-align: center;
}
.modal-mask {
position: fixed;
z-index: 9999;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, .5);
display: flex;
justify-content: center;
align-items: center;
transition: opacity .3s ease;
}
.modal-container {
width: 300px;
padding: 20px 30px;
text-align: left;
background-color: #fff;
border-radius: 2px;
box-shadow: 0 2px 8px rgba(0, 0, 0, .35);
transition: all .5s ease;
}
.modal-container h3 {
text-transform: uppercase;
color: teal;
}
.modal-container .body {
margin: 20px 0;
color: dimgrey;
}
.body img {
width: 100%;
}
.modal-container footer {
text-align: right;
}
button {
outline: none;
cursor: pointer;
padding: 10px 20px;
font-weight: bold;
background-color: dodgerblue;
border:none;
border-radius: 5px;
color: floralwhite;
transition: transform .3s ease;
}
button:hover {
background-color: rgb(20, 107, 194);
transform: scale(1.1);
}
- JS
Vue.component('modal', {
props: ['modal'],
data() {
return {
}
},
// emitimos el evento al padre
methods: {
close() {
this.$emit('change-valor')
},
},
template: `
<div class="modal-mask">
<div class="modal-wrapper">
<div class="modal-container">
<h3>{{ modal.title }}</h3>
<div class="body">
<slot name="body-modal"></slot>
</div>
<footer>
<button v-on:click="close">Cerrar</button>
</footer>
</div>
</div>
</div>
`
})
new Vue({
el: '#app',
data() {
return {
modalData: {
title: 'Un Modal Increible',
},
showModal: false,
}
},
methods: {
toggleModal() {
this.showModal = !this.showModal
}
}
})
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?