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 vuedalsimport 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 additional data and all the vuedals that is currently present is index(data, this.vuedals) passed as argument so that you can determine the index of the vudedal to close and return the index of it
this.$vuedals.close({
$index(data, vuedals) {
// this will always close the latest modal
return vuedals.length - 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
closewas 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
closewas 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
Optionally prevent closing when clicking on backdrop
Default: true
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');
}
});
![dependabot[bot] avatar](https://avatars.githubusercontent.com/in/29110?v=4 "dependabot[bot]")
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent