หน้าแรก>การเขียนโปรแกรมที่เกี่ยวข้อง>ซอร์สโค้ดอื่น ๆ
ดาวน์โหลด

# vue3-bootstrap-5-modal-component เป็นส่วนประกอบโมดอลแบบง่ายสำหรับ Vue 3 โดยใช้ bootstrap 5

การสาธิตสด

https://florianbgt.github.io/vue3-bootstrap5-modal/

การพึ่งพา:

ส่วนประกอบนี้ต้องการ bootstrap 5 และ popper ที่จะติดตั้ง 

 npm install bootstrap@next
npm install @popperjs/core

จากนั้นคุณสามารถรวมไว้ในไฟล์ main.js ของคุณ: 

 import 'bootstrap/dist/css/bootstrap.min.css'
import 'bootstrap'

การตั้งค่าส่วนประกอบ:

คุณสามารถนำเข้า globaly ในไฟล์ main.js ของคุณ: 

 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-model ส่วนประกอบ
  • ปิด (บูลีน): อนุญาตให้ปิดโมดอลโดยใช้ปุ่มปิดหรือคลิกฉากหลังคลิก
  • ส่วนหัว (สตริง): เนื้อหาส่วนหัวของ modal
  • คอนเทนเนอร์ (สตริง): ตามค่าเริ่มต้นคลาส bootstrap "คอนเทนเนอร์" จะส่งผ่านไปยังส่วนประกอบ หากเสานี้ถูกตั้งค่าเป็น "SM" จะมีการเพิ่มคลาส "container-SM"
  • ความกว้างสูงสุด (สตริง): ความกว้างสูงสุดของโมดัล สามารถเป็น %, px ...
ขยาย
ข้อมูลเพิ่มเติม
แอปที่เกี่ยวข้อง
แนะนำสำหรับคุณ
ข้อมูลที่เกี่ยวข้อง ทั้งหมด