Adquiere por un a帽o todos los cursos, escuelas y certificados por un precio especial.

Antes: $249

Currency
$219/a帽o

Paga en 4 cuotas sin intereses

Paga en 4 cuotas sin intereses
Comprar ahora

Termina en:

0D
22H
18M
14S

Ejercicios de pr谩ctica

22/38

Lectura

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

...

Reg铆strate o inicia sesi贸n para leer el resto del contenido.

Aportes 220

Preguntas 0

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

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

隆Listo! 馃榿
Aqu铆 mi codepen

**Mi soluci贸n: **

  • HTML
<body>
    <div id="app">
        <button v-on:click="toggleModal">Show Modal</button>
        
        <modal v-show="showModal" v-on:close="toggleModal">
         <template v-slot:body>
             <p>Cuerpo del modal...</p>
         </template>
        </modal>
      </div>
      <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
      <script src="app.js"></script>       
</body>

JS

Vue.component('modal', {
     props:['toggleModal'],
    data:function(){
       
        return{
            title:'title',
        }
    },
    methods:{
      
        closeModal:function(){
            this.$emit('close')
        }
    },
    template: `
      <div class="modal-mask">
        <div class="modal-wrapper">
          <div class="modal-container">
            <h3>{{title}}</h3>

            <slot name="body"></slot>
            <footer>
              <button v-on:click="closeModal">Cerrar</button>
            </footer>
          </div>
        </div>
        
      </div>`
  })
  
  new Vue({
    el: '#app',
    data:function(){
        return{
            showModal:false
        }
    },
    methods:{
        toggleModal:function(){
            this.showModal=!this.showModal
        }
    }
  })

Hola, tengo una pregunta,
Si yo quisiera que this.$emit(鈥榗lose鈥) 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

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

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

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

馃槂



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/[email protected]/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">
            <h3> {{titulo.title}} </h3>
            <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
        }
    }
  })


Excelente ejercicio. Aqu铆 mi soluci贸n

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

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

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

codepen2.js

codepen2.html

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Practica modulo 3</title>
</head>
<body>
    <div id="root">
        <button v-on:click="toggleModal">Show modal</button>
        <modal v-show="showModal"
        :title="title" 
        v-on:close="toggleModal">
            <template v-slot:body>
                    <p> Este es el body del button </p>
            </template>
        </modal>
    </div>

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

Vue

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

    data(){
        return{
            showModal: false
        }
    },

    methods:{
        closeModal(){
            this.$emit('close', this.showModal ? true: false)
        }
    }, 

    template: `
        <div>
            <h1> {{ title }} </h1>
            <slot name="body"></slot>
            <button v-on:click="closeModal"> Close </button>
        </div>
    `

})

new Vue({
    el:'#root',

    data(){
        return{
            title: 'My modal',
            showModal: false
        }
    },

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

Este es mi c贸digo.
No se si esta bien, pero funciona鈥 XD

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="style.css">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <button @click="toggleModal">Show Modal</button>
    <modal v-if="modalProps.showModal" v-on:close="toggleModal" v-bind:modals="modalProps">
      <template v-slot:body>
        <p>This is My modal's body!</p>
      </template>
    </modal>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
  <script src="App.js"></script>
</body>
</html>
Vue.component('modal', {
    props:['modals'],

    methods: {
      closeModal(){
        // this.modals.showModal = !this.showModal
        this.$emit('close', this.showModal ? true : false)
      }
    },

    template: `
      <div class="modal-mask">
        <div class="modal-wrapper">
          <div class="modal-container">
            <h3>{{modals.title}}</h3>
            <div>
              <slot name="body"></slot>
            </div>
            <footer>
              <button @click="closeModal">Cerrar</button>
            </footer>
          </div>
        </div>
      </div>`
  })
  
  new Vue({
    el: '#app',
    data(){
      return{
        modalProps:{
          title:'My Modal',
          showModal: false
        }
      }
    },
    methods: {
      toggleModal(){
        this.modalProps.showModal = !this.modalProps.showModal
      }
    },
  })
#app {
    padding: 20px;
    text-align: center;
  }
  
  .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: #fff;
    border-radius: 2px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .33);
    transition: all .3s ease;
  }
  
  footer {
    text-align: right;
  }

Hola,
Esta es mi soluci贸n en codePen

<div id="app">
  <button v-on:click="toggleModal">Show Modal</button>
  
  <modal v-if="showModal" v-on:close="toggleModal" title="Mi modal">
    <p>lorem ipsum ...</p>
  </modal>
</div>
Vue.component('modal', {
  props: ['title'],
  data() {
    return {}
  },
  methods: {
    close: function() {
      this.$emit('close');
    }
  },
  template: `
    <div class="modal-mask">
      <div class="modal-wrapper">
        <div class="modal-container">
          <h3>{{this.title}}</h3>
          <div>
            <slot></slot>
          </div>
          <footer>
            <button v-on:click="close">Cerrar</button>
          </footer>
        </div>
      </div>
    </div>`
})

new Vue({
  el: '#app',
  data() {
    return {
      showModal:false
    }
  },
  methods: {
    toggleModal: function () {
      this.showModal = ! this.showModal;
    }
  }
})
Vue.component('modal', {
  props: ['title'],

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

  template: `
    <div class="modal-mask">
      <div class="modal-wrapper">
        <div class="modal-container">
          <h3> {{ title }}</h3>
          <div>
            <slot name="body"></slot>
          </div>
          <footer>
            <button v-on:click="close">Cerrar</button>
          </footer>
        </div>
      </div>
    </div>`
})

new Vue({
  el: '#app',
  data() {
    return {
      title: 'Hola Mundo',
      showModal: false,
    }
  },

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

Logre resolverlo as铆:

index.html:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Curso Basico de Vue.js | Platzi</title>
  <link rel="stylesheet" href="./styles.css">
</head>
<body>

    <div id="app">
        <button v-on:click="toggleModal()">Show Modal</button>
  
        <modal 
        v-show="showModal"
        v-on:close-modal="toggleModal()">
            <template v-slot:body>
                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
                <img 
                src="https://picsum.photos/200/300" 
                alt="Imagen del modal" 
                v-bind:style="{ width: '100%'}">
            </template>
        </modal>
    </div>

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

app.js

Vue.component('modal', {

    data () {
        return {
            title: 'El modal',
        }
    },

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

    template: `
      <div class="modal-mask">
        <div class="modal-wrapper">
          <div class="modal-container">
            <h3>{{ title }}</h3>
            <div>
                <slot name="body"></slot>
            </div>
            <footer>
              <button v-on:click="close()">Cerrar</button>
            </footer>
          </div>
        </div>
      </div>`
  })
  
  new Vue({
    el: '#app',

    data () {
        return {
            
            showModal: false

        }
    },

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

  })

Excelente forma de repasar lo ense帽ado profe, Gracias.
Mi evento close lo mande con el valor false para hacer la prueba nada mas. Se que en toggleModal solamente podr铆a invertirlo pero quise practicar el env铆o de datos.

index.html

app.js

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="index.css">
</head>
<body>
    <div id="app">

        <modal v-show="showModal" v-on:close="toggleShowModal">
            <template v-slot:title>
                <h1>
                    {{ title }}
                </h1>
            </template>
    
            <template v-slot:body>
                <p>
                    Lorem ipsum, dolor sit amet consectetur adipisicing elit. Repellendus soluta nemo omnis repellat eius maiores, in ducimus ut minus veniam fuga veritatis ipsam consequuntur quibusdam aliquid fugiat modi ex voluptas.
                </p>
            </template>
        </modal>   

    </div>

    <script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
    <script src="index.js"></script>
</body>
</html>


Vue.component('modal', {

    data () {
      return {
        title: 'T铆tulo del modal'
      }
    },
    
    methods: {
      emitClose() {
          console.log('}close{');
          this.$emit('close');
      }
    },
    
    template:
    `
      <div>
        <h1> {{ title }} </h1>

        <slot name="title"></slot>
        <slot name="body"></slot>

       <button v-on:click="emitClose">Close me!</button>
      </div>
    `

});

const app = new Vue(
    {
        el: '#app',

        data() {
            return {
                showModal: true,
                title: 'T铆tulo del root'
            }
        },

        computed: {

        },

        watch: {
        },

        methods: {
            toggleShowModal() {
                console.log('toggle_modal: ' + this.showModal);
                this.showModal = !this.showModal;
            }
        },

    }
);

Ejercicio Resuelto, Excelente Practica:

adjunto 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
      href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900"
      rel="stylesheet"
    />
    <link
      href="https://cdn.jsdelivr.net/npm/@mdi/[email protected]/css/materialdesignicons.min.css"
      rel="stylesheet"
    />
    <link
      href="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.css"
      rel="stylesheet"
    />
    <title>Modal - Ejercicio 2 - PLatzi VueJs 2</title>
    <link rel="stylesheet" href="./style.css" />
  </head>
  <body>
    <div id="app">
      <v-btn elevation="2" @click="toggleModal"
        >Show Modal</v-btn
      >

      <modal :title="title" v-show="showModal" @close="toggleModal">
        <template v-slot:body>
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Natus
            blanditiis facere praesentium amet beatae, velit, dolorum illo
            cupiditate error perspiciatis voluptatem? Adipisci voluptates
            explicabo magni voluptatem consectetur molestias, odio
            exercitationem.
          </p>
        </template>
      </modal>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.js"></script>
    <script src="./app.js"></script>
  </body>
</html>

CSS

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

.modal-mask {
  position: fixed;
  z-index: 9998;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: table;
  transition: opacity 0.3s ease;
}

.modal-wrapper {
  display: table-cell;
  vertical-align: middle;
}

.modal-container {
  width: 300px;
  margin: 0px auto;
  padding: 20px 30px;
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.33);
  transition: all 0.3s ease;
  line-height: 22px;
  margin-bottom: 10px;
  text-align: justify;
}

footer {
  text-align: right;
}

.v-btn {
  border: none;
  background: #42b983 !important;
  color: #fff !important;
  padding: 12px 20px;
  border-radius: 2px;
  margin: 0 4px;
  cursor: pointer;
  transition: all 0.3s ease;
  border-radius: 5px;
}

.v-btn:hover {
  background: #3da776 !important;
}

h3 {
  margin-top: 5px;
  margin-bottom: 10px;
  color: #42b983;
}

.modal-body {
  margin: 20px 0;
}

JS

Vue.component("modal", {
  props: ["title"],

  template: `
    <div class="modal-mask">
      <div class="modal-wrapper">
        <div class="modal-container">
          <h3>{{title}}</h3>
          <slot name="body"></slot>
          <footer>
            <v-btn elevation="2" @click="toggleModal">Cerrar</v-btn>
          </footer>
        </div>
      </div>
    </div>`,
  methods: {
    toggleModal() {
      this.$emit("close");
    },
  },
});

new Vue({
  el: "#app",

  data() {
    return {
      showModal: false,
      title: "Loca Batalla Campal",
    };
  },

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

he aprendido mucho!!!


<!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 href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    <link rel="stylesheet" href="style.css">
    <title>Componentes modales</title>
</head>
<body>
    <div id="app" class="d-flex justify-content-center" >
     
        <button class=" btn btn-success align-items-center" @click="toggleModal">Show Modal</button>
       
        
        <modal
        @change-state="toggleModal"
        v-show="showModal"
        >
        <template  v-slot:body>
            Este es un modal para todos, nunca pares de aprender.
            Llegar谩 tu momento de triunfar, espera un poquito, sigue asi
            campeon. lo vas a lograr!!!!
        </template>
        <template v-slot:title>
            Un modal para que nunca pares de aprender.
        </template>

        </modal>
      </div>   
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
   <script src="index.js"></script>
   <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
</body>
</html>
Vue.component('modal', {
   
    data(){
        return{
           
        }

    },
    methods:{
        close(){
            this.$emit("change-state")
        },
    },

    template: `
      <div  class="modal-mask">
        <div class="modal-wrapper">
          <div class="modal-container w-50 h-30 p-5">
            <h3>
            <slot name="title"></slot>
            </h3>
            <div class="mb-5">
            
            <slot name="body"></slot>
            
            </div>
            <footer>
              <button class="btn btn-danger" @click="close">Cerrar</button>
            </footer>
          </div>
        </div>
      </div>`
  })

  
  new Vue({
    el: '#app',
    data(){
        return{
            showModal:false
        }
    }
    ,methods:{
        toggleModal(){
            this.showModal=!this.showModal

        },
       
    }

  })

Les comparto mi modal.
Espero que se vea, ya que es la primera vez que comparto im谩genes por aqu铆 XD

Buenas! dejo el ejercicio: https://codepen.io/fedeesti/pen/qBVgwVZ


Trabajo Echo 隆

Super ejercicio para poder reforzar los conceptos que se vieron previamente, comparto mejercicio:

Ejercicio de pr谩ctica resuelto:

https://codepen.io/isjavier77/pen/ZEXgzXJ

Me tarde, quise ver como funcionaba el llamado en el emit no acepta camelCase. Alguien mas vio lo mismo

  • Se crea todo tal cual lo solicitado, y se le agrega un array de objetos que tienen temas de Vue de una pagina web que me gustaron sus im谩genes.

  • El objeto (temas) tiene los campos: titulo, mensaje o explicaci贸n, imagen sobre el tema y el link fuente del tema.

  • Se crea un array de objetos (temas) interno en el padre, y usando una funci贸n o m茅todo se selecciona un tema aleatorio al darle click al bot贸n 鈥淪how Modal鈥 para que sea mostrado en el modal.

Repositorio: git/willywaooo182/component-modal

Este sera otro miniproyecto rapido donde hare uso de tailwind?

Les comparto mi soluci贸n en CodePen

Aqu铆 el resultado del ejercicio

https://codepen.io/terracing/pen/VwMaBZq

Aca mi modal funcional 馃槄

Listo! Me guie un poco de los comentarios con lo del evento jaja

Inclu铆 en el app que hice en el ejercicio pasado lo l贸gica de este y ahora la edici贸n de precio no se realiza con alerts sino con modals, desarrollados como componentes
https://londrack.github.io/Alikar-market-list/

Reto terminado
Codepen aqui

Hola a todos,
Les comarto el resultado de mi ejercicio:

Aqu铆 el link de mi proyecto, espero que les guste!
Modal de gatito:
Link del repositorio: Link
Link del proyecto: Link

Se siente bien, terminar el ejercicio y que te quede bien y como al profesor

Aqu铆 mi versi贸n del reto. 馃挌

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">
    <title>Caja Flotante</title>
</head>
<body>
    <div id="app">
        <button v-on:click= "toggleModal">Show Modal</button>
        
        <modal
           v-show="ShowBox == true"
           v-on:close="toggleModal"
           v-bind:title = "title">
           <template v-slot:content>
             <p>Body del Modal</p>
          </template>
         </modal>
      </div>
      <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
</body>
</html>

JS

Vue.component('modal', {
    props:['title'],
    
    methods: {
      close(){
        this.$emit('close')
      }
    },
    
    template: `
      <div class="modal-mask">
        <div class="modal-wrapper">
          <div class="modal-container">
            <h3>{{ title }}</h3>
            <slot name="content"></slot>
            <footer>
              <button v-on:click="close">Cerrar</button>
            </footer>
          </div>
        </div>
      </div>`
  })
  
  new Vue({
    el: '#app',
    
    data(){
      return {
        title: 'Titulo Del Modal',
        ShowBox: false,
      }
    },
    
    methods: {
      toggleModal(){
        this.ShowBox = !this.ShowBox
      }
    }
  })

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="./style.css">
    <title>Pr谩ctica 1 con Vue</title>
</head>
<body>
    <div id="app">
        <button v-on:click="toggleModal">Show Modal</button>
        <modal v-show="showModal == true"
            v-bind:title="title"
            v-on:close="close">
            <template v-slot:modal>
                <p>esto es un texo enviado por slot</p>
            </template>
        </modal>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
    <script src="./script.js"></script>
</body>
</html>>

JS

<Vue.component('modal', {
    props:['title'],
    data(){
        return{} 
    },
    methods:{
        closeModal(){
            this.$emit("close");
        }
    },
    template: `
        <div class="modal-mask">
            <div class="modal-wrapper">
                <div class="modal-container">
                    <h3>{{title}}</h3>
                    <div>
                        <slot name="modal"></slot>    
                    </div>
                    <footer>
                        <button v-on:click="closeModal">Cerrar</button>
                    </footer>
                </div>
            </div>
        </div>
    `
  })
  
  new Vue({
    el: '#app',
    data(){
        return{
            title:"titulo para el modal",
            showModal: false,
        }
    },
    methods:{
        toggleModal(){
            this.showModal = true;
        },
        close(){
            this.showModal = false;
        }
    }
  })>

隆Ejercicio resuelto!
Codepen
Imagen previa:

Ac谩 est谩 mi soluci贸n Soluci贸n

Decid铆 hacer tambi茅n hacer una soluci贸n con bootstrap , aqu铆 se las comparto

HTML:

<div id="app">
  <button v-on:click="toggleModal(true)">Show Modal</button>
  <modal v-on:show-modal="toggleModal" v-show="showModal" v-bind:title="title">
    <template v-slot:body>
      <p>Lorem ipsum...</p>
    </template>
  </modal>
</div>

JS:

Vue.component('modal', {
  props: ['title'],
  methods: {
      close(){
        this.$emit('show-modal', false)
      }
  },
  
  template: `
    <div class="modal-mask" v-on:click="close">
      <div class="modal-wrapper">
        <div class="modal-container">
          <h3>{{title}}</h3>
          <div>
            <slot name="body"></slot>
          </div>
          <footer>
            <button v-on:click="close">Cerrar</button>
          </footer>
        </div>
      </div>
    </div>`
})

new Vue({
  el: '#app',
  data(){
    return {
      showModal: false,
      title: 'Modal title'
    }
  },
  
  methods: {
    toggleModal(show){
      this.showModal = show;
    }
  }
})

Ejercicio Sistema de Componentes Vue.js https://codepen.io/vicalex96/pen/wvBbRvV

Reforzando conceptos 馃憡馃槑

!Done

Quiero publicar mi respuesta pero cuando le pincho en Publicar + 2 de aparece Unsuccessful HTTP response

Excelente Ejercicio! aunque necesite algo de ayuda! jajajajaja

https://codepen.io/danielazocardev/pen/rNaxLwE

Mi soluci贸n: https://codepen.io/pmarino/pen/zYGJdjM
Me cost贸 un poquito resolver lo del bot贸n close del modal jajaj, pero menos mal que ten铆a buenos apuntes del curso.

Todav铆a me quedan algunas dudas de que tipo de nombres en los m茅todos son validos y cuales no, tuve un error por cambiarle el nombre de close a closeMe supongo que sera cuesti贸n de pr谩ctica.

https://codepen.io/lalorivero/pen/YzXrzOj?editors=1010

Muy buen ejercicio para repasar
https://codepen.io/anghdezjoa/pen/MWwxvWx

https://codepen.io/rgameroco/pen/OJPMvNg?editors=1111 Listo 馃槃 me demore pero lo logre :3

Estuvo m谩s f谩cil que la anterior pr谩ctica 馃槃 https://codepen.io/sakuragy/pen/gObdoRQ

Terminando la semanita programando el ejercicio de practica, saludos Nacho!!!

https://codepen.io/ashumatico/pen/PowoYXy