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」這個方式(名稱好奇怪XD

它的原理是:

  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>

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

用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() 

//...
0

| 軟體開發 | 網站建置 | 網頁系統 | 資料庫網站 |

| 客製化網站 (報名系統、投票系統、掛號系統...) |

| 前後端技術合作 |

加入Line立即聊聊:@539mjyid

0 回復

發表評論

想要加入討論嗎?
請盡情發表您的想法!

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。