Vuejs modale Komponente Daten übergeben

Ich bin fest, eine modale Komponente für meine App in VueJS zu machen. Ich möchte in der Lage sein, es in eine eigene Komponente zur Wiederverwendbarkeit zu bringen, in der Lage sein, benutzerdefinierte Inhalte zu übergeben und mehrere Modalitäten zu haben.Vuejs modale Komponente Daten übergeben

machte ich die Komponente und es sieht aus wie diese von den VueJS docs:

Modal.vue

<template> 
    <div ref="modal"> 
    <script type="text/x-template" id="modal"> 
     <transition name="modal"> 
     <div class="modal-mask"> 
      <div class="modal-wrapper"> 
      <div class="modal-container"> 

       <div class="modal-header"> 
       <slot name="header"> 
        Header 
       </slot> 
       </div> 

       <div class="modal-body"> 
       <slot name="body"> 
        Body 
       </slot> 
       </div> 

       <div class="modal-footer"> 
       <slot name="footer"> 
        Footer 
       </slot> 
       <button class="btn btn-primary" @click="$emit('close')"> 
        Button 
       </button> 
       </div> 
      </div> 
      </div> 
     </div> 
     </transition> 
    </script> 
    </div> 
</template> 


<script> 

    export default { 
    components: { }, 
    props: ['header', 'footer', 'body', 'button'], 
    data:() => ({ 
     showModal: false 
    }), 
    methods: { 
     open() { 
     console.log('Opening modal') 
     this.showModal = true 
     } 
    } 
    } 
</script> 

<style> 

    #modal { 
    /*color: #000;*/ 
    } 

    .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;*/ 
    background-color: #25262D; 
    color: #FEFEFE; 
    border-radius: 3px; 
    box-shadow: 0 2px 8px rgba(0, 0, 0, .33); 
    transition: all .3s ease; 
    font-size: 1.2em; 
    } 

    .modal-header { 
    border-radius: 3px; 
    background-color: #202128; 
    border: none; 
    } 

    .modal-header h3 { 
    margin-top: 0; 
    color: #42b983; 
    } 

    .modal-body { 
    margin: 20px 0; 
    /*background-color: #202128;*/ 
    border: none; 
    } 

    .modal-footer { 
    text-align: center; 
    border: none; 
    } 

    .modal-footer .btn { 
    font-size: 1.0em; 
    } 

    /* 
    * The following styles are auto-applied to elements with 
    * transition="modal" when their visibility is toggled 
    * by Vue.js. 
    * 
    * You can easily play with the modal transition by editing 
    * these styles. 
    */ 

    .modal-enter { 
    opacity: 0; 
    } 

    .modal-leave-active { 
    opacity: 0; 
    } 

    .modal-enter .modal-container, 
    .modal-leave-active .modal-container { 
    -webkit-transform: scale(1.1); 
    transform: scale(1.1); 
    } 

</style>

ich hinzufügen, eine modale in meinem App.vue:

<button @click="openUpdatedModal()" type="button" class="btn btn-default" data-toggle="modal" data-target="#modal"> 
      Launch Updated Modal 
     </button> 

     <modal ref="updatedModal" v-if="showModal" @close="showModal = false"> 
     <!-- 
      you can use custom content here to overwrite 
      default content 
     --> 
     <div slot="header">custom header</div> 
     </modal> 

<script> 

import Modal from './components/Modal' 

export default { 
    components: { Modal }, 
    data:() => ({ 
     showModal: false 
    }), 
    methods: { 
     openUpdatedModal() { 
      this.$refs.updatedModal.open() 
     } 
    } 
} 
</script>

Wenn Ich klicke auf den Button Ich bekomme den Text in der Konsole "Modal öffnen" aber nichts passiert.

Ich kann es beschwören und es funktioniert, wenn ich den gesamten Code in App.vue haben

Was bin ich?

Quelle

2017-06-20 John

Warum haben Sie '

Verwandte Themen