vue3 bootstrap5 modal

# Vue3-bootstrap-5-modal-componente Um componente modal simples para Vue 3 usando o bootstrap 5

Demoção ao vivo

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

Dependências:

Este componente requer Bootstrap 5 e Popper para serem instalados

 npm install bootstrap@next
npm install @popperjs/core

Você pode incluí -los no seu arquivo main.js :

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

Configuração do componente:

Você pode importar a Globaly em seu arquivo main.js :

 import Modal form 'path to file/Modal.vue'
...
app.component('Modal', Modal);

Ou você pode importar local em cada componente quando precisar:

 import Modal from 'path to file/Modal.vue'

Uma vez importado, você pode usar o componente da seguinte forma:

 <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>

Uso de componentes:

O componente modal recebe 5 adereços:

• ModelValue (booleano, exigido): Para vodelo V, o componente
• CHOLEGRILE (BOOLEAN): deixe fechar o modal usando o botão Fechar ou o cenário de clique
• cabeçalho (string): conteúdo do cabeçalho do modal
• Container (string): por padrão, a classe de bootstrap "contêiner" é passada para o componente. Se este suporte estiver definido como "SM", classe "contêiner-sm" será adicionado
• MAX-LO-LUDA (String): largura máxima do modal. Pode ser %, px ...