Ouvrir modal bootstrap avec vue.js 2.0

Quelqu'un sait-il comment ouvrir un modal bootstrap avec vue 2.0? Avant vue.js je voudrais simplement ouvrir le modal en utilisant jQuery: $('#myModal').modal('show');

Cependant, est-il une bonne façon que je devrais faire ce en Vue?

Merci.

Est votre modale d'un composant? Ou seulement une partie d'un modèle?
Hi - Il est dans sa propre Vue de composant
En gros, c'est toujours jQuery. $(.$el).modal('show'). Il y a beaucoup plus de travail si vous souhaitez éliminer jQuery entièrement à cause de Bootstrap en dépend.
Vous pouvez utiliser Bootstrap-Vue

OriginalL'auteur Trung Tran | 2017-03-19

  1. 11

    Mon code est basé sur le Michael Tranchida de réponse.

    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 4 html:

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

    Et dans jsfiddle

    Comment overflow-y avec BS 3?

    OriginalL'auteur MikeS

  2. 2

    J'ai fait un amalgame de la Vue.js Modal exemple et la Bootstrap 3.* démonstration en direct.

    En gros, j'ai utilisé le Vue.js modal exemple, mais remplacé (sorta) le Vue.js "html" avec le bootstrap modal balisage html, sauf une chose (je pense). J'ai eu à bande, à l'extérieur div à partir du bootstrap 3, alors il a juste travaillé, le tour est joué!

    Donc le code est sur bootstrap. Simplement enlever la div extérieure de l'amorçage de balisage et cela devrait fonctionner. Alors...

    pouah, un site pour les développeurs et je ne peux pas facilement coller dans le code? Cela a été un grave problème pour moi. Suis-je le seul? Basée sur l'histoire, je suis pro un idiot et il ya un moyen facile de le coller dans le code, veuillez nous en aviser. Chaque fois que j'essaie, c'est une horrible hack de mise en forme, au mieux.
    je vais vous donner un exemple de jsfiddle de la façon dont je l'ai fait si demandé.

    OriginalL'auteur Michael Tranchida

  3. 0

    Essayé d'écrire un code qui à l'aide de VueJS transitions de fonctionner natif Bootsrap animations.

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

    Exemple sur Codepen si vous n'êtes pas familier avec Carlin, cliquez sur Vue HTML compilé sur un menu déroulant de la fenêtre dans la section HTML.

    C'est l'exemple de base de la façon dont les auxiliaires Modaux travaille dans le Bootstrap. Je vais apprécier si quelqu'un va l'adopter pour les fins générales.

    Ont un grand code !

    OriginalL'auteur Andrey Horsev

  4. -1

    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>

    OriginalL'auteur Hamzeh Salhi