使用 vue.js 2.0 打开引导模式 [英] Open bootstrap modal with vue.js 2.0

查看：27
本文介绍了使用 vue.js 2.0 打开引导模式的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

有谁知道如何使用 vue 2.0 打开引导模式?在 vue.js 之前，我会简单地使用 jQuery 打开模态: $('#myModal').modal('show');

但是，我应该在 Vue 中以正确的方式执行此操作吗?

谢谢.

解决方案

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

引导程序 3 html:

<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><h4 class="modal-title">模态标题</h4>
<div class="modal-body">模态体

<button id="show-modal" @click="showModal = true">显示模态</button>

引导程序 4 html:

<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">模态标题</h5><button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true" @click="showModal = false">&times;</span>
<div class="modal-body"><p>模态正文放在这里.</p>
<div class="modal-footer"><button type="button" class="btn btn-secondary" @click="showModal = false">关闭</button><button type="button" class="btn btn-primary">保存更改</button>
<button @click="showModal = true">点击</button>

js:

new Vue({el: '#app',数据: {显示模式:假}})

CSS:

.modal-mask {位置:固定；z-索引:9998；顶部:0；左:0；宽度:100%；高度:100%；背景颜色:rgba(0, 0, 0, .5);显示:表；过渡:不透明度 .3s 缓和；}.modal-wrapper {显示:表格单元格；垂直对齐:中间；}

在jsfiddle

Does anyone know how to open a bootstrap modal with vue 2.0? Before vue.js I would simply open the modal by using jQuery: $('#myModal').modal('show');

However, is there a proper way I should do this in Vue?

Thank you.

解决方案

My code is based on the Michael Tranchida's answer.

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

And in jsfiddle

这篇关于使用 vue.js 2.0 打开引导模式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆