¿Alguien sabe cómo abrir un modal de bootstrap con vue 2.0? Antes de vue.js yo simplemente abrir el modal mediante el uso de jQuery: $('#myModal').modal('show');

Sin embargo, hay una manera correcta que debo hacer esto en Vue?

Gracias.

  • Es tu modal de un componente? O sólo parte de una plantilla?
  • Hola – Es en su propio componente de Vue
  • Básicamente es todavía jQuery. $(this.$el).modal(‘ver’). Hay mucho más trabajo si desea eliminar jQuery totalmente porque Bootstrap depende de ello.
  • Usted puede usar Bootstrap-Vue
InformationsquelleAutor Trung Tran | 2017-03-19

5 Comentarios

  1. 17

    Mi código está basado en el Michael Tranchida la respuesta.

    Bootstrap 3 html:

    <div id="app">
      <div v-if="showModal">
        <transition name="modal">
          <div class="modal-mask">
            <div class="modal-wrapper">
              <div class="modal-dialog">
                <div class="modal-content">
                  <div class="modal-header">
                    <button type="button" class="close" @click="showModal=false">
                      <span aria-hidden="true">&times;</span>
                    </button>
                    <h4 class="modal-title">Modal title</h4>
                  </div>
                  <div class="modal-body">
                    modal body
                  </div>
                </div>
              </div>
            </div>
          </div>
        </transition>
      </div>
      <button id="show-modal" @click="showModal = true">Show Modal</button>
    </div>

    Bootstrap html 4:

    <div id="app">
      <div v-if="showModal">
        <transition name="modal">
          <div class="modal-mask">
            <div class="modal-wrapper">
              <div class="modal-dialog" role="document">
                <div class="modal-content">
                  <div class="modal-header">
                    <h5 class="modal-title">Modal title</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                      <span aria-hidden="true" @click="showModal = false">&times;</span>
                    </button>
                  </div>
                  <div class="modal-body">
                    <p>Modal body text goes here.</p>
                  </div>
                  <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" @click="showModal = false">Close</button>
                    <button type="button" class="btn btn-primary">Save changes</button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </transition>
      </div>
      <button @click="showModal = true">Click</button>
    </div>
    

    js:

    new Vue({
      el: '#app',
      data: {
        showModal: false
      }
    })

    css:

    .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;
    }

    Y en jsfiddle

    • Cómo overflow-y con BS 3?
  2. 3

    Hice una amalgama de la Vue.js ejemplo Modal y la Bootstrap 3.* demostración en vivo.

    Básicamente, he utilizado el Vue.js ejemplo modal reemplazado (sorta) la Vue.js «html» parte con el modal de bootstrap de marcado html, guardar una cosa (creo). Tuve que tira el exterior div desde el bootstrap 3, entonces, sólo se trabajó, ¡voila!

    Así, el código es en cuanto a bootstrap. Simplemente tira de la div externa de los archivos de inicio de marcado y se debe trabajar. Así que…

    ugh, un sitio para desarrolladores y yo no pueda pegar en el código? Este ha sido un grave problema constante para mí. Soy yo el único? Basado en la historia, estoy debo favorable un idiota y no hay una manera fácil de pegar en el código, por favor avise. Cada vez que lo intento, es una horrible hack de formato, en el mejor.
    voy a ofrecer un ejemplo de jsfiddle de cómo lo hice yo si se solicita.

    • Usted puede publicar el código con sangría, comillas simples inclinadas o la incrustación de un violín. Aquí es una referencia detallada. El editor de preguntas tiene botones para insertar código.
  3. 1

    Traté de escribir un código que el uso de VueJS transiciones para operar nativo Bootsrap animaciones.

    HTML:

    <div id="exampleModal">
      <!-- Button trigger modal-->
      <button class="btn btn-primary m-5" type="button" @click="showModal = !showModal">Launch demo modal</button>
      <!-- Modal-->
      <transition @enter="startTransitionModal" @after-enter="endTransitionModal" @before-leave="endTransitionModal" @after-leave="startTransitionModal">
        <div class="modal fade" v-if="showModal" ref="modal">
          <div class="modal-dialog" role="document">
            <div class="modal-content">
              <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
                <button class="close" type="button" @click="showModal = !showModal"><span aria-hidden="true">×</span></button>
              </div>
              <div class="modal-body">...</div>
              <div class="modal-footer">
                <button class="btn btn-secondary" @click="showModal = !showModal">Close</button>
                <button class="btn btn-primary" type="button">Save changes</button>
              </div>
            </div>
          </div>
        </div>
      </transition>
      <div class="modal-backdrop fade d-none" ref="backdrop"></div>
    </div>
    

    Vue.JS:

    var vm = new Vue({
      el: "#exampleModal",
      data: {
        showModal: false,
      },
      methods: {
        startTransitionModal() {
          vm.$refs.backdrop.classList.toggle("d-block");
          vm.$refs.modal.classList.toggle("d-block");
        },
        endTransitionModal() {
          vm.$refs.backdrop.classList.toggle("show");
          vm.$refs.modal.classList.toggle("show");
        }
      }
    });
    

    Ejemplo en Codepen si usted no está familiarizado con el Pug haga clic en Vista HTML compilado en la lista desplegable de la ventana en la sección HTML.

    Este es el ejemplo básico de cómo Modales obras en Bootstrap. Voy a apreciar si alguien va a adoptar para propósitos generales.

    Tienen un gran código 🦀!

  4. -2

    modal doc

    Vue.component('modal', {
          template: '#modal-template'
        })
    
        //start app
        new Vue({
          el: '#app',
          data: {
            showModal: false
          }
        })
    
    <script type="text/x-template" id="modal-template">
      <transition name="modal">
        <div class="modal-mask">
          <div class="modal-wrapper">
            <div class="modal-container">
    
              <div class="modal-header">
                <slot name="header">
                  default header
                </slot>
              </div>
    
              <div class="modal-body">
                <slot name="body">
                  default body
                </slot>
              </div>
    
              <div class="modal-footer">
                <slot name="footer">
                  default footer
                  <button class="modal-default-button" @click="$emit('close')">
                    OK
                  </button>
                </slot>
              </div>
            </div>
          </div>
        </div>
      </transition>
    </script>
    
    <!-- app -->
    <div id="app">
      <button id="show-modal" @click="showModal = true">Show Modal</button>
      <!-- use the modal component, pass in the prop -->
      <modal v-if="showModal" @close="showModal = false">
        <!--
          you can use custom content here to overwrite
          default content
        -->
        <h3 slot="header">custom header</h3>
      </modal>
    </div>

Dejar respuesta

Please enter your comment!
Please enter your name here