vue3 如何打開 bootstrap5 Modal 組件？

這邊討論的是vue3 + bootstrap5，不是BootstrapVue這個框架喔！

一個基本的範例要顯示Modal通常會搭配一顆按鈕，按鈕按下去就直接跳出Modal。

<!-- Button trigger modal -->
  <button
    type="button"
    class="btn btn-primary"
    data-bs-toggle="modal"
    data-bs-target="#exampleModal"
  >
    按下去顯示Modal
  </button>

  <!-- Modal -->
  <div
    class="modal fade"
    id="exampleModal"
    tabindex="-1"
    aria-labelledby="exampleModalLabel"
    aria-hidden="true"
  >
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel">Modal 標題文字</h5>
          <button
            type="button"
            class="btn-close"
            data-bs-dismiss="modal"
            aria-label="Close"
          ></button>
        </div>
        <div class="modal-body">...</div>
        <div class="modal-footer">
          <button
            type="button"
            class="btn btn-secondary"
            data-bs-dismiss="modal"
          >
            關閉
          </button>
          <button type="button" class="btn btn-primary">確定</button>
        </div>
      </div>
    </div>
  </div>

但有時候我們並不想要直接按下去就顯示。

這時候就要使用他的「透過Javascript」這個方式（名稱好奇怪ＸＤ

它的原理是：

1. 先把Modal的html放上去
2. 用javascript建立modal實例
3. 呼叫方法

先把Modal的html放上去：

<template>
  <div
    class="modal fade"
    ref="myModalRef" <!-- 多加這行 -->
    tabindex="-1"
    aria-hidden="true"
  >
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-body">aaa</div>
      </div>
    </div>
  </div>
</template>

中間的內容就省略，然後新增了一個屬性叫ref，ref的名稱可以自己取，等等建立實例的時候會用到。

用javascript建立modal實例：

import { onMounted, ref } from "vue";

//...

setup() {
  const deleteModalRef = ref(null);
  let deleteModal;
  onMounted(() => {
    deleteModal = new Modal(deleteModalRef.value, {});
  });
  return { deleteModal }
}

因為我們這邊有把deleteModal return出去，所以剛剛在template裡的ref才吃得到。

然後要記得ref是在畫面渲染之後才會有，所以創建實例時候要在onMounted時。

呼叫方法：

const handelOpenModal = () => {
  deleteModal.show();
}

還有其他很多方法，可以參考這裡～

deleteModal.toggle() 

deleteModal.show() 

deleteModal.hide() 

//...