使用vue.js 2.0打开bootstrap模式

Question

有谁知道如何用vue 2.0打开bootstrap模式？在vue.js之前,我只需使用jQuery打开模态:$('#myModal').modal('show');

但是,我应该在Vue中采用这种方法吗？

谢谢.

Answer 1

我的代码基于Michael Tranchida的答案.

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

并在jsfiddle

Answer 2

尝试写一段代码，使用VueJS的transitions来操作原生的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 中工作的基本示例。如果有人将其用于一般目的，我将不胜感激。

有一个很棒的代码！

Answer 3

我混合了Vue.js Modal 示例和Bootstrap 3.* 现场演示。

基本上，我使用了 Vue.js 模式示例，但用引导模式 html 标记替换（某种程度）Vue.js“html”部分，保存一件事（我认为）。div我必须从 bootstrap 3 上剥掉外部，然后它就可以工作了，瞧！

所以相关代码是关于bootstrap的。只需从引导标记中剥离外部 div 就可以了。所以...

呃，一个面向开发人员的网站，我无法轻松粘贴代码？这对我来说一直是一个严重的持续问题。我是唯一一个？根据历史，我可能是个白痴，有一种简单的方法可以粘贴代码，请指教。每次我尝试，充其量都是一次可怕的格式化。如果需要，我将提供一个示例 jsfiddle 来说明我是如何做到的。