VueJS (2.x) Plugin for multiple modals windows with a single component instance.
A plugin to open stocked modals windows, event based, with just one component in your DOM.
e.g. if you want to have 3 modals, you don't need to add the component 3 times, just one (preferably in the root of your app) and open as many modals as you want by using an Event Bus
Install with npm:
npm install --save vuedals
import Vue from 'vue';
import {default as Vuedals, Component as Vuedal, Bus as VuedalsBus} from 'vuedals';
Vue.use(Vuedals);
var myComp = Vue.extend({
template: `<div>
<h1>Hello World!</h1>
<button @click="showIt()">Show me the money</button>
</div>`,
methods: {
showIt() {
VuedalsBus.$emit('new', {
name: 'showing-the-money',
component: {
name: 'the-money',
template: `
<div>
<h1>THE MONEY!</h1>
<p>Money, money, money, moooneeyyy $ $ $ $</p>
</div>
`
}
});
}
}
});
var vm = new Vue({
el: '#app',
components: {
myComp,
Vuedal
},
template: `<div>
<my-comp></my-comp>
<vuedal></vuedal>
</div>`
});
You can emit an event in your component:
this.$emit('vuedals:new', { option });
or a method:
this.$vuedals.new({ options });
or the Vuedals Event Bus:
import {Bus as Vuedals} from 'vuedals';
...
methods: {
openNewModal() {
Vuedals.$emit('new', { options });
}
}
You can emit an event in your component:
this.$emit('vuedals:close'[, data]);
a method:
this.$vuedals.close([data]);
or the Vuedals Event Bus:
import {Bus as Vuedals} from 'vuedals';
...
methods: {
openNewModal() {
Vuedals.$emit('close'[, data]);
}
}
If you need to close a specific modal index, you can pass it as an $index
property of the data.
this.$vuedals.close({
$index: 3
})
$index can be an integer or a function. In case $index is a function, the index of the current open modal is passed as argument
this.$vuedals.close({
$index(current) {
// this will always close the previous modal
return current - 1;
}
})
Depending if you're creating the modal from the component or from the Vuedals Event Bus, these are the events (component / bus):
Open a new modal window, with the given options
Close the most recently opened modal window, if data is given, will pass it to the onClose
option.
When a modal was open. Returns an object with:
- The index of the recently opened modal
- The options passed to that modal instance
When a modal was closed. Returns an object with:
- The index of the closed modal
- The options passed to that modal instance
- The data given when
close
was called
Emitted when the last modal instance is closed. i.e. there's not more open modals left
- The index of the closed modal
- The options passed to that modal instance
- The data given when
close
was called
When creating a new modal, you'll need to pass the given options:
A reference name of the modal. Use to define the css class of that modal
Default: null
A Vue component to display inside the modal
A props object that will be passed to the component inside the modal.
example:
import {Bus as Vuedals} from 'vuedals';
...
methods: {
openModal() {
this.$vuedals.open({
name: 'test-component',
// Pass these props to the component
props: {
firstname: 'John',
lastname: 'Doe'
},
component: {
name: 'show-john-doe',
// Expect these props values
props: ['firstname', 'lastname'],
template: `
<div>
Hi {{ firstname }} {{ lastname }}
</div>
`
}
});
}
}
The size of the modal.
Possible values are:
- xs: 350px width
- sm: 550px width
- md: 650px width
- lg: 850px width
- xl: 1024px width
Default: md
Should the modal include an "X" to be closed?
Default: true
Can this modal be closed by pression the esc key?
Default: false
Title of the modal window
Default: ''
An object that will be used to generate a custom header
Default: null
header: {
component: 'header-component',
props: {
custom: 'Props'
}
}
Callback function to call when the modal is closed. Any given data is passed as a parameter for that callback. Example:
this.$vuedals.open({
name: 'test-component',
// Pass these props to the component
props: {
firstname: 'John',
lastname: 'Doe'
},
component: {
name: 'show-john-doe',
// Pass these props to the component
props: ['firstname', 'lastname'],
template: `
<div>
Hi {{ firstname }} {{ lastname }}
</div>
`
},
onClose(data) {
console.log('Data received from the vuedal instance': data);
}
});
Callback function to call when the modal is closed.
Please notice that even close
and dismiss
both close the active modal instance (closes the modal) only the close
event accepts data argument that can be passed to the callback, while dismiss
just send the modal to close.
The callback may prevent the modal closing by returning false
.
Example:
this.$vuedals.open({
name: 'test-component',
// Pass these props to the component
props: {
firstname: 'John',
lastname: 'Doe'
},
component: {
name: 'show-john-doe',
// expect these props
props: ['firstname', 'lastname'],
template: `
<div>
Hi {{ firstname }} {{ lastname }}
</div>
`
},
onDismiss() {
console.log('The user dismissed the modal');
}
});