[VUE] bootstrap元件Modal相關筆記

<div class="modal fade" tabindex="-1" role="dialog" aria-hidden="true" ref="modalEvent" >
....
</div>

<script setup>
import {ref, onMounted} from "vue";
import {Modal} from "bootstrap";

const modalEvent = ref(null);
const modalEl = ref(null);
onMounted(() => {
  if (modalEvent.value) {
    modalEl.value = Modal.getOrCreateInstance(modalEvent.value);
    modalEvent.value.addEventListener('hiden.bs.modal', () => console.log('hide'));
    modalEvent.value.addEventListener('shown.bs.modal', () => console.log('show'));
  }
});

</script>