bootstrap-vueのモーダルを閉じないようにしたい! ということがありました。
案外いろいろ指定する必要があったので、備忘として残します。
結論だけ知りたい人へ
<b-modal ok-only hide-header-close no-close-on-backdrop no-close-on-esc>
とすればOK。(bootstrap-vue2.0.3にて確認)
"モーダルを閉じる" のいろいろ
特に何も指定しない場合、↓のようなモーダルが出てきます。
モーダルの閉じ方と、それを防ぐために指定するプロパティを以下にまとめます。
| 閉じ方 | 閉じるのを防ぐために指定するプロパティ | 備考 |
|---|---|---|
| 右上の×ボタンを押す | hide-header-close | ボタンを非表示にする |
| Cancelボタンを押す | ok-only | ボタンを非表示にする |
| モーダルの外側(グレーアウトした部分)をクリック | no-close-on-backdrop | |
| キーボードのESCボタンを押す | no-close-on-esc |
全部指定してみた
前項のプロパティを全て指定すると、以下のようになります。
(コードはグレーアウト部分を参照)
最後に
今回の画像は、公式サイトのデモを利用しました。
コードを書き換えて動かすこともできるため、各プロパティの検証が手軽にできます。
神機能です。