VUE中如何使用bootstrap的模态框（modal）

模态框的是否显示通过VUE来控制，而不是利用bootstrap的js，只保留bootstrap的css效果

HTML

<transition name="fade"><!-- transition不需要的话可以删掉 -->
   <div v-if="sample_modal">
     <div class="modal" v-on:click.self="sample_modal=false">
       <div class="modal-dialog">
         <div class="modal-content">
           <div class="modal-header">
             <h4 class="modal-title">title</h4>
             <button type="button" class="close" v-on:click="sample_modal=false">×</button>
           </div>
           <div class="modal-body">
             <p>内容</p>
           </div>
           <div class="modal-footer">
             <button type="button" class="btn btn-primary">footer</button>
           </div>
         </div>
       </div>
     </div>
     <div class="modal-backdrop show"></div>
   </div>
 </transition>

CSS

/* 让模态框显示 */
 .modal {
  display: block;
}

/* 如果不使用vue的transition的话可以不设置 */
.fade-enter-active, .fade-leave-active {
  transition: opacity .15s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}

把sample_modal设置为false的话模态框不显示

设置为true则显示

在.modal类中，追加的“v-on:click.self”，是实现点击模态框以外的任意地方，关闭模态框