Öffnen Sie bootstrap modal mit vue.js 2.0

Weiß jemand, wie man öffnen Sie ein bootstrap modal mit vue 2.0? Vor vue.js ich würde öffnen Sie einfach das modal durch die Verwendung von jQuery: $('#myModal').modal('show');

Jedoch, gibt es eine richtige Art und Weise sollte ich das in Vue?

Danke.

Ist Ihre modalen Komponente? Oder nur einen Teil einer Vorlage?
Hallo - Es ist in seiner eigenen Vue-Komponente
Im Grunde ist es immer noch jQuery. $(this.$el).modal('show'). Es gibt eine Menge mehr Arbeit, wenn Sie möchten, zu beseitigen jQuery völlig, weil Bootstrap hängt davon ab.
Sie könnten Bootstrap-Vue

InformationsquelleAutor Trung Tran | 2017-03-19

  1. 10

    Mein code basiert auf der Michael Tranchida Antwort.

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

    Und in jsfiddle

    Wie overflow-y mit BS 3?

    InformationsquelleAutor MikeS

  2. 2

    Ich habe ein amalgam der Vue.js Modal Beispiel und die Bootstrap-3.* live-demo.

    Im Grunde habe ich die Vue.js modal Beispiel, aber ersetzt (sorta) Vue.js "html" - Teil mit dem bootstrap-modal html-markup, speichern Sie eine Sache (denke ich). Ich musste die Streifen der äußeren div aus dem bootstrap 3, dann es funktionierte einfach, voila!

    Also der relevante code ist in Bezug auf bootstrap. Nur Streifen die äußeren div durch den bootstrap markup und es sollte funktionieren. So...

    ugh, eine site für Entwickler und ich kann nicht einfach einfügen in den code? Dies war eine schwere anhaltende problem für mich. Bin ich der einzige? Basierend auf der Geschichte, ich bin prolly ein idiot und es ist eine einfache Möglichkeit zum einfügen von code, bitte beraten. Jedes mal, wenn ich versuche, es ist eine schreckliche hack der Formatierung, am besten.
    ich gebe ein Beispiel jsfiddle, wie ich es Tat, wenn angefordert.

    InformationsquelleAutor Michael Tranchida

  3. 0

    Versucht zu schreiben code, der mit VueJS übergänge zu betreiben nativen Bootsrap-Animationen.

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

    Beispiel auf Codepen wenn Sie nicht vertraut sind mit Mops auf Ansicht kompilierte HTML - auf ein dropdown-Fenster im HTML-Abschnitt.

    Dies ist das grundlegende Beispiel dafür, wie Modals arbeitet in Bootstrap. Ich werde dankbar, wenn jemand verabschieden, die es für Allgemeine Zwecke.

    Haben eine große code ?!

    InformationsquelleAutor 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>

    InformationsquelleAutor Hamzeh Salhi

Schreibe einen Kommentar