Zenn
🎐

Bootstrap5のModalをVue3で使うだけのパッケージを作った

2022/07/26に公開
Bootstrap
JavaScript
TypeScript
Vue.js
npm
tech

※追記: fadeアニメーションを任意設定に変更しました。


タイトルの通り、毎回異なるプロジェクトで同じレイアウトを作るのが面倒くさいのと複数のモーダルを1つのページに置くと表示/非表示管理がややこしくなったりするのでBootstrap5のModalをVue3で使うだけのパッケージ(コンポーネント)を作りました。

複数のモーダルを扱うことができるのでモーダルの中から他のモーダルを呼び出しても正常に動作します。

前提

既にvue3プロジェクトが作成されていて、そこにBoostrap5がインストールされていること。
(手順割愛)

インストール

npm install bs-modal-vue

使い方

基本的な構成

bs-modal.vueのshowModal()で表示、hideModal()で非表示になります。
注意: bs-modalの閉じるボタンにはdata-bs-dismiss="modal"を指定していません(つまり複数のモーダルを表示している時、閉じるボタンを押したモーダルのみ非表示になります)

<template>
  <div class="hello">
    <h1>Modal Samples</h1>
    <bs-modal ref="bodyOnlyModalRef" class="fade">
      <h1>Body</h1>
    </bs-modal>
    <button type="button" class="btn btn-primary" v-on:click="showModal()">Show Modal</button>
  </div>
</template>
<script lang="ts">
import { defineComponent,ref } from 'vue';
import {BsModal} from "bs-modal-vue";
export default defineComponent({
  name: 'HelloWorld',
  setup(){
    // eslint-disable-next-line @typescript-eslint/no-explicit-any
    const bodyOnlyModalRef = ref<any>(null);
    return{
      bodyOnlyModalRef,
      showModal(){
        bodyOnlyModalRef.value?.showModal();
      }
    }
  },
  components:{
    BsModal
  }
});
</script>

Modalの中から別のModalを呼び出す

モーダルの中でさらに別のモーダルを表示するボタンを設置する場合、↓のコンポーネントのようなレイアウトにしてください。

<template>
    <bs-modal ref="thisRef">
        <button type="button" class="btn btn-primary mb-1" v-on:click="showModalInModal(modalInModalRef)">Show Modal in Modal</button>
    </bs-modal>
    <bs-modal ref="modalInModalRef">
        <h1> Modal in Modal</h1>
    </bs-modal>
</template>
<script lang="ts">
import { defineComponent,ref } from 'vue';
import {BsModal,BsModalInterface} from "bs-modal-vue";
export default defineComponent({
    setup(){
        // eslint-disable-next-line @typescript-eslint/no-explicit-any
        const makeRef  = () => ref<any>(null);
        const thisRef = makeRef();
        return {
            modalInModalRef:makeRef(),
            thisRef,
            showModal(){
                thisRef.value?.showModal();
            },
            showModalInModal(refValue:BsModalInterface){
                refValue?.showModal();
            }
        }
    },
    components:{
        // eslint-disable-next-line vue/no-unused-components
        BsModal
    }
});
</script>

Options

フッターを表示

<bs-modal>
    <h1>Body</h1>
  <template v-slot:footer>
    <h1>Footer</h1>
  </template>
</bs-modal>

fadeアニメーションを使う

<bs-modal class="fade">
    <h1>Body</h1>
</bs-modal>

.modal設定

※設定の詳細は↑のBootstrapドキュメントを参照してください
例えば背景を押しても勝手にモーダルを閉じないようにする場合...

<bs-modal data-bs-backdrop="static">
  <h1> Static Backdrop</h1>
</bs-modal>

.modal-dialog　設定

※設定の詳細は↑のBootstrapドキュメントを参照してください
例えばモーダルをフルスクリーン表示にする場合

<bs-modal :modal-dialog-settings="['modal-fullscreen']">
  <h1>Fullscreen!</h1>
</bs-modal>



その他設定方法(テスト用コンポーネント)

bs-modalのmethodsのインターフェイスが欲しい場合

import {BsModalInterface} from "bs-modal-vue";

だいたいこんな感じです。必要になったらモーダルからモーダルへの遷移(古いモーダルは非表示にする)機能も付けたいと思います。

Discussion