0.1.13 • Published 5 years ago
vmodal v0.1.13
vmodal
A Vue component for Bootstrap modals.
Installation
npm install --save vmodal Usage
See the included examples.
JavaScript
import Vue from 'vue'
import Modal from 'vmodal'
Vue.component('modal', Modal)
new Vue({
el: '#app',
methods: {
showModal () {
this.$refs.modal.show()
}
}
})HTML
<div id="app">
<modal ref="modal">
<h5 slot="title">Modal title</h5>
<template slot="body">
<p>Modal body text goes here.</p>
</template>
<template slot="footer">
<button type="button" class="btn btn-primary">Save changes</button>
<button type="button" class="btn btn-secondary">Close</button>
</template>
</modal>
<button @click="showModal" type="button" class="btn btn-primary">Show Modal</button>
</div>Api
Methods
| Name | Description |
|---|---|
| show | Show the modal. |
| hide | Hide the modal. |
| toggle | Toggle the modal. |
Example:
this.$refs.modal.show()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.$refs.modal.$on('shown', (e) => {
console.log('Modal shown')
})Slots
| Name | Description |
|---|---|
| title | The modal title. |
| body | The modal body. |
| footer | The modal footer. |
| header | The modal header. |
| content | The modal content. |