Vue.component('modal', { template: ` <div> <div class="modal"> <div> <div class="modal-header"> <slot name="header"></slot> </div> <div class="modal-body"> <slot name="body"></slot> </div> <div class="modal-footer"> <slot name="footer"></slot> <slot>Olá, eu funciono como um "catch"!</slot> </div> </div> </div> <div class="modal-background"></div> </div>` }); new Vue({ el: "#app", data: { showModal1: false, showModal2: false, showModal3: false, }, methods: { closeAllModals() { this.showModal1 = false; this.showModal2 = false; this.showModal3 = false; }, openModal(modal) { if(modal === 1) this.showModal1 = true; else if(modal === 2) this.showModal2 = true; else this.showModal3 = true; }, toggleModal(modal) { this.closeAllModals(); this.openModal(+modal); }, }, });
<div class="" id="app"> <button @click="toggleModal(1)">Toggle Modal 1</button> <button @click="toggleModal(2)">Toggle Modal 2</button> <button @click="toggleModal(3)">Toggle Modal 3</button> <modal v-show="showModal1"></modal> <modal v-show="showModal2"> <div slot="header"> Eu sou um header </div> <div slot="body"> Eu sou um body </div> </modal> <modal v-show="showModal3"> <div slot="header"> Eu sou um header </div> <div slot="body"> Eu sou um body </div> <div slot="footer"> Eu sou um footer (nao tem catch desta vez). </div> </modal> </div>
.modal { display: flex; justify-content: center; align-items: center; position: absolute; margin: 20% 33.333%; width: 300px; height: 300px; background: #fff; border-radius: 5px; z-index: 100; } .modal-background { position: fixed; top: 30px; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); z-index: 10; } .modal-wrapper { display: block; }