Open bootstrap modal с vue.js 2.0

Кто-нибудь знает, как открыть bootstrap modal с vue 2.0? Перед vue.js я просто открыл бы модальный с помощью jQuery: $('#myModal').modal('show');

Однако, есть ли правильный способ сделать это в Vue?

Спасибо.

ОТВЕТЫ

Ответ 1

Мой код основан на ответе Майкла Транчида.

Бутстрап 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;
}

И в jsfiddle

Ответ 2

Я сделал амальгаму Vue.js Модальный пример и Bootstrap 3. * live demo.

В основном, я использовал пример Vue.js modal, но заменил (sorta) часть Vue.js "html" на разметку bootstrap modal html, сохраните одну вещь (я думаю). Мне пришлось вырезать внешний div из бутстрапа 3, затем он просто сработал, вуаля!

Таким образом, соответствующий код относится к бутстрапу. Просто удалите внешний div из разметки бутстрапа, и он должен работать. Так что...

ugh, сайт для разработчиков, и я не могу легко вставить код? Для меня это была серьезная проблема. Я один? Основываясь на истории, я очень идиот, и там есть простой способ вставить код, пожалуйста, посоветуйте. Каждый раз, когда я пытаюсь, это ужасный взлом форматирования, в лучшем случае. я представлю образец jsfiddle того, как я это сделал, если бы запросил.

Ответ 3

Попытка написать код, который использует переходы VueJS для управления встроенной анимацией Bootsrap.

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

Пример на Codepen, если вы не знакомы с Pug, нажмите "Просмотреть скомпилированный HTML" в раскрывающемся окне в разделе HTML.

Это основной пример того, как модалы работают в Bootstrap. Я буду признателен, если кто-нибудь примет его в общих целях.

Удачного кода 🦀!

Ответ 5

модальный док

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>