vue3 bootstrap5 modal

＃vue3-bootstrap-5-modal-componentブートストラップ5を使用したvue 3のシンプルなモーダルコンポーネント

ライブデモ

https://florianbgt.github.io/vue3-bootstrap5-modal/

依存関係：

このコンポーネントには、ブートストラップ5とポッパーがインストールされる必要があります

 npm install bootstrap@next
npm install @popperjs/core

その後、それらをmain.jsファイルに含めることができます。

 import 'bootstrap/dist/css/bootstrap.min.css'
import 'bootstrap'

コンポーネントのセットアップ：

main.jsファイルにGlobalyをインポートできます。

 import Modal form 'path to file/Modal.vue'
...
app.component('Modal', Modal);

または、必要なときに各コンポーネントにローカリーをインポートできます。

 import Modal from 'path to file/Modal.vue'

インポートしたら、次のようにコンポーネントを使用できます。

 <Modal v-model="modal" header="Modal">
  <p>This modal have to be closed from the parent</p>
  <p>This modal will be close from the parent in 5 seconds</p>
</Modal>

コンポーネントの使用法：

モーダルコンポーネントは5つの小道具を取ります：

• ModelValue（Boolean、必須）：vモデルのコンポーネント
• Closeable（Boolean）：閉じるボタンまたはバックドロップクリックを使用してモーダルを閉じることを許可します
• ヘッダー（文字列）：モーダルのヘッダーコンテンツ
• コンテナ（文字列）：デフォルトごとに、ブートストラップクラス「コンテナ」がコンポーネントに渡されます。この小道具が「SM」に設定されている場合、クラス「コンテナ-SM」が追加されます
• Max-Width（String）：モーダルの最大幅。 ％、px ...