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”，是實現點擊模態框以外的任意地方，關閉模態框