vue3 bootstrap5 modal

# vue3-bootstrap-5 모달 컴포넌트 부트 스트랩 5를 사용하는 VUE 3의 간단한 모달 구성 요소 5

라이브 데모

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 (부울, 필수) : V- 모델의 경우 구성 요소입니다
• 닫을 수있는 (부울) : 닫기 버튼 또는 배경 클릭을 사용하여 모달을 닫을 수 있습니다.
• 헤더 (문자열) : 모달의 헤더 컨텐츠
• 컨테이너 (문자열) : 기본적으로 부트 스트랩 클래스 "컨테이너"가 구성 요소로 전달됩니다. 이 소품이 "SM"으로 설정되면 클래스 "컨테이너 -SM"이 추가됩니다.
• MAX-WIDTH (문자열) : 모달의 최대 너비. %될 수 있습니다, px ...