vue.js で bootstrapのmodalを表示する（簡易版）

Tweet

Category JavaScript / Tagged vue 2019/05/13

問題

vue.js を使っている環境で、bootstrapのmodalを表示したいです。

答え

modalの表示/非表示をvueでコントロールする場合、bootstrapのJavaScriptは使わないで、bootstrapのCSSだけ利用するようにして、以下のように v-if で制御すると、それっぽくなります。

HTML

<transition name="fade"><!-- transitionは不要なら外してOK -->
   <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">タイトルタイトル</h4>
             <button type="button" class="close" v-on:click="sample_modal=false">×</button>
           </div>
           <div class="modal-body">
             <p>ダイアログの中身</p>
             <p>ダイアログの中身</p>
             <p>ダイアログの中身</p>
           </div>
           <div class="modal-footer">
             <button type="button" class="btn btn-primary">フッターのボタンなど</button>
           </div>
         </div>
       </div>
     </div>
     <div class="modal-backdrop show"></div>
   </div>
 </transition>

CSS

/* 表示/非表示はvueで制御するので最初から表示状態にする */
 .modal {
  display: block;
}

/* vueのtransitionを使わないなら不要 */
.fade-enter-active, .fade-leave-active {
  transition: opacity .15s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}

sample_modal を false にしておけば非表示。

sample_modal を true にすれば表示します。

bootstrap.js に頼らないので、.modalは最初から display:blockにして、.modal-backdrop.show も自分で書いておきます。

.modal につけている v-on:click.self はダイアログの外をクリックしたときに閉じるためです。

コンポーネントとして作らずに、HTMLに書くだけで対応した場合のmodalダイアログでした。

メモ

bootstrapのmodalは、エスケープキーで閉じることも可能だが、上の方法では対応していない。

vueでコントロールするなら、vueでキーイベントも拾ってESCキー押下にも対応する必要がある。