vmodal
A Vue component for Bootstrap modals.
Installation
npm install --save vmodal
Usage
See the included examples.
JavaScript
Vue el: '#app' methods: { this$refsmodal }
HTML
Modal title Modal body text goes here. Save changes Close Show Modal
Api
Methods
Name | Description |
---|---|
show | Show the modal. |
hide | Hide the modal. |
toggle | Toggle the modal. |
Example:
this$refsmodal
Props
Name | Type | Default | Description |
---|---|---|---|
backdrop | Boolean|String | true |
Includes a modal-backdrop element or static for a backdrop which doesn't close the modal on click. |
close | Boolean | true |
Show close × button. |
focus | Boolean | true |
Puts the focus on the modal when initialized. |
keyboard | Boolean | true |
Closes the modal when escape key is pressed. |
size | String | Optional size: sm , lg or xl . |
|
form | Object | A vform object. |
Events
Name | Attributes | Description |
---|---|---|
submit | (event) |
Emitted when the form is submitted. |
show | (event) |
Emitted immediately when the show method is called. |
shown | (event) |
Emitted when the modal has been made visible to the user. |
hide | (event) |
Emitted immediately when the hide method has been called. |
hidden | (event) |
Emitted when the modal has finished being hidden from the user. |
Example:
this$refsmodal
Slots
Name | Description |
---|---|
title | The modal title. |
body | The modal body. |
footer | The modal footer. |
header | The modal header. |
content | The modal content. |