Componente Modal y Componente Principal en Vue.js

Contenido del curso

Introducción

Rendering Declarativo y Manipulación de DOM

Sistema de Componentes

Ambiente de Desarrollo

Platzi Exchange

¡A producción!

38
Publicación de Aplicaciones con Git y Netlify
05:37 min

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

Armar un componente modal que se muestre al hacer click en un boton del componente padre (root) y que pueda ocultarse/cerrarse con otro boton dentro del componente modal

Hace fork de este CodePen para obtener la estructura básica del proyecto:

Consideraciones:

El componente modal debe:
- Usar una propiedad title para poder establecer el titulo del modal.
- Definir un slot para poder establecer el body del modal.
- Tener un boton con una directiva v-on a un metodo que emita un evento llamado close.
El componente root (Componente Principal) debe:
- Utilizar el component modal y mostrarlo solo cuando la propiedad showModal sea true.
- Definir una propiedad boolean llamada showModal que permite ocultar y mostrar el modal.
- Definir un método toggleModal que permita cambiar el valor de la propiedad showModal a su valor contrario (este metodo debe usarse con el boton "Show Modal").
- Escuchar el evento close del modal y ejecutar el metodo toggleModal cuando este se emite.
- Establecer el contenido de title del modal usando una propiedad y el contenido del bodyusando slots.

Solución

Componente Modal y Componente Principal en Vue.js

Curso Básico de Vue.js 2

Clase 22 de 38

Clase 22 / 38

Mario Adair Abarca de Jesús

Hace 5 años

Bueno, mi ejercicio quedó así, Esta es la pantalla principal, lo que más trabajo me costo fue intentar centrar el botón de forma vertical, pero más o menos lo logré

Y así que la notifación

Este mi código: HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="estilos.css">
    <title>Proyecto 2</title>
</head>
<body>
    <div id="app">
        <button
        v-on:click="toggleModal">
        No me piques</button>
        
        <modal
        v-show="showModal"
        v-bind:titulo="modalData"
        v-on:change-valor="toggleModal">
            <template v-slot:body>
                <body>
                    <img src="lisa.jpg" alt="lisa rara">
                </body>
            </template>
        </modal>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <script src="app.js"></script>
</body>
</html>

CSS

*{
  box-sizing: border-box;
  -moz-box-sizing: border-box;
}

body{
    display: flex;
    align-items: center;
    height: 90vh;
}

#app {
    width: 100%;
    padding: 20px;
    text-align: center;
  }

html{
    background-image: url(fondo.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
}

button{
  background-image: -webkit-linear-gradient(top, #4a074a, #ef0fda);
  background-image: -moz-linear-gradient(top, #4a074a, #ef0fda);
  background-image: -ms-linear-gradient(top, #4a074a, #ef0fda);
  background-image: -o-linear-gradient(top, #4a074a, #ef0fda);
  background-image: linear-gradient(to bottom, #4a074a, #ef0fda);

  -webkit-border-radius: 28;
  -moz-border-radius: 28;
  border-radius: 28px;
  text-shadow: 3px 2px 1px #1859ba;
  -webkit-box-shadow: 6px 5px 24px #f9f1f9;
  -moz-box-shadow: 6px 5px 24px #f9f1f9;
  box-shadow: 6px 5px 24px #f9f1f9;
  font-family: Arial;
  color: #fafafa;
  font-size: 30px;
  padding: 19px;
  text-decoration: none;
}

button:hover {
  cursor: pointer;
  background: #2079b0;
  background-image: -webkit-linear-gradient(top, #ef0fda, #4a074a);
  background-image: -moz-linear-gradient(top, #ef0fda, #4a074a);
  background-image: -ms-linear-gradient(top, #ef0fda, #4a074a);
  background-image: -o-linear-gradient(top, #ef0fda, #4a074a);
  background-image: linear-gradient(to bottom, #ef0fda, #4a074a);
  text-decoration: none;
}

.chiquito{
  font-size: 12px;
  margin-top: 15px;
}
  
  .modal-mask {
    position: fixed;
    z-index: 9998;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .5);
    display: table;
    transition: opacity .3s ease;
  }
  
  .modal-wrapper {
    display: table-cell;
    vertical-align: middle;
  }
  
  .modal-container {
    width: 300px;
    margin: 0px auto;
    padding: 20px 30px;
    text-align: left;
    background-color: #4a074a;
    border-radius: 2px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .33);
    transition: all .3s ease;
  }
  
  footer {
    text-align: right;
  }

Javascript

Vue.component('modal', {
    props: ['titulo'],

    methods: {
        close(){
            this.$emit('change-valor')
        },
    },

    template: `
      <div class="modal-mask">
        <div class="modal-wrapper">
          <div class="modal-container">
            <h4> {{titulo.title}} </h4>
            <div>Te dije que no me abrieras</div>
            <slot name="body"></slot>
            <footer>
              <button class="chiquito"
              v-on:click="close">Cerrar</button>
            </footer>
          </div>
        </div>
      </div>`
  })
  
  new Vue({
    el: '#app',

    data(){
        return{
            modalData: {
                title: '>:v',
            },

            showModal: false,
            
        }
    },

    methods: {
        toggleModal(){
            this.showModal = !this.showModal
        }
    }
  })

Comentarios (223)223 comentarios

Jhonny Lincol Quispe Navarro

Hace 6 años

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>

#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);
}

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
        }
    }
})

Jimmy Buriticá Londoño

Muy bien presentado

Johnny José Barrantes De la O

¡Listo! 😁 Aquí mi codepen

Cesar Antonio

Una cosa de locos.

Guillermo Ramirez

jsjs que lindo!>3

Abril Darynka Tapia Sosa

Hace 7 años

Hola, tengo una pregunta, Si yo quisiera que this.$emit('close') se ejecutara con dblclick o algún otro evento de javascrip que no sea clock, como se definiría? he investigado pero no he logrado encontrarlo Aquí mi código del proyecto

Isabella Susana

Santiago Rios Olaya

https://github.com/Sr-santi/exercises_with_vue

Manuel Ojeda

Lo del Slot es algo totalmente nuevo para mí, vaya utilidad que he dejado ir por bastante tiempo. Aquí el resultado: https://codepen.io/darkjeda/pen/QWWoqKv

Albert Eduardo Hidalgo Tavera

Listo! https://codepen.io/itsalb3rt/pen/LYbOBKB?editors=1111

Joseph Paucar

Este curso esta genial! Slots, emit, template... cuantas cosas nuevas para mi.

https://codepen.io/joseph_paucar/pen/NWWJXox

Usuario anónimo

User

Fernando Rodriguez Davila

Hace 4 años

Johanna Apure Canónico

🎊 https://codepen.io/japurecanonico/pen/zYJEBXe

Sofi Caselli

https://codepen.io/sofi-caselli/pen/YzGrXMG

Albert K. Camargo Barreda

Arturo Rojas Enei

Excelente ejercicio. Aquí mi solución

Cesar Murillo

Me gusto realizar este ejercicio, refresca y aplicas lo aprendido .

https://codepen.io/zesaru/pen/pooXoXx

Daniel Hita Martínez

He jugado un poquito con el CSS para darle algo de alegría... https://codepen.io/2raederdev/pen/rNaQOjZ

Cristopher Gonzalez

https://codepen.io/cristophergonzalez/pen/LYVpBoX

Moisés Cedeño

https://codepen.io/modavidc/pen/KKpweNP

Juan Jiménez

Introducción

Fundamentos de Vue: Componentes y Desarrollo de Aplicaciones Web

Vue.js: Desarrollo de Aplicaciones Web Profesionales

Creación de aplicaciones reactivas con Vue.js y HTML

Rendering Declarativo y Manipulación de DOM

Renderizado Declarativo en JavaScript: Estado y Vista Sincronizados

Uso de Expresiones JavaScript en Plantillas de Vue.js

Directivas para Atributos Dinámicos en HTML con Vue.js

Directivas de Renderizado Condicional en HTML con Vue.js

Uso de la Directiva v-for en Vue.js para Renderizar Listas

Manejo de Eventos en Vue.js: Click y Mouseover

Condiciones y Clases Dinámicas en Vue.js

Estilos Dinámicos en JavaScript: Cambios de Color Interactivos

Propiedades Computadas y Watchers en Vue.js

Interacción dinámica con formularios y directivas en Vue.js

"Crear un Tracker de Cursos con Vue.js"

Sistema de Componentes

Sistema de Componentes en Fren Word: Modularización y Reutilización

Creación de Componentes Personalizados en Vue.js

Comunicación entre Componentes en Vue.js: Props y Data Binding

Comunicación entre Componentes en Vue: Emisión y Manejo de Eventos

Uso de Slots para Inyectar HTML en Componentes Hijos

Ciclo de Vida de Componentes en Vue.js

Componentes de Vue: Creación y Gestión Eficiente

Componente Modal y Componente Principal en Vue.js

Ambiente de Desarrollo

Configuración Profesional de Vue.js con Visual Studio Code

Creación de Aplicaciones con Dios CLI y su Configuración Básica

Componentes de Archivo Único en Vue.js

Comandos esenciales para proyectos con Vue CLI y configuración de entorno

Platzi Exchange

Instalación y configuración de Tailwind CSS en proyectos HTML

Creación y Gestión de Componentes VUE en Proyectos Web

Creación de Aplicaciones SPA con Vue Router

Uso de Fetch API para Interactuar con Servidores HTTP

Filtros y Directivas para Mejorar Interfaces en JavaScript

Creación de Rutas Dinámicas en Vue.js para Criptomonedas

Navegación Dinámica y Programática en Vue.js

Integración de Componentes de Terceros en Proyectos Vue.js

Manejo de Problemas de Reactividad en Vue.js

Filtros y Ordenamiento en Tablas de Datos con JavaScript

Implementación de Rutas Dinámicas y Conversor de Criptomonedas en Vue.js

¡A producción!

Publicación de Aplicaciones con Git y Netlify

Componente Modal y Componente Principal en Vue.js