Vue Modal 🖼
Intro
Reusable Modal component, supports own custom HTML, text and classes and/or passing a component. Featuring multiple modal content / buttons.
What this ISN'T
This component is not meant to be a bootstrap-ish already-styled-modal-replacer for Vue.
What this IS
Instead: it wants to take it a step further: it gives you a skeleton base structure where you are free to apply your own css styling according to your requirements/website and gives you freedom of formatting the content/arrows/buttons/events as you wish with little to no effort.
Features
- Animated modal transition
- Overlay on modal background
- Custom event triggering on
before-closeandbefore-open - Conditional: Next/prev arrows, close button, paging
- Next and prev arrow for switching between modal contents
- Modal contents navigation with custom paging
- CSS/HTML customisation of: prev/next arrows, modal content, modal navigation, modal trigger button/s
Demo
- Code editor - codesandobx
- Preview - codesandbox
Installation
npm i @melmacaluso/vue-modalUsage
Simply import it in your desired vue component as follows:
import Modal from "@melmacaluso/vue-modal";Props
| Prop | Type | Comment |
|---|---|---|
btnText |
String | Text label for modal button |
modalContent |
String | Pass here your html for the modal main modal |
closeBtn |
Boolean | Conditionally add a close button |
closeBtn-content |
String | Pass here your html for the close button |
multiple |
Boolean | Allow multiple buttons/content within the modal |
modals |
Array | Pass here an array of objects, they retain the same props within the array's scope ie. <scope>.btnText |
showNav |
Boolean | Conditionally show a navigation with each modal's btnText |
showArrows |
Boolean | Conditionally show an arrow based navigation |
showArrowsCloseBtn |
Boolean | Conditionally show an the close button between the prev/next arrows, it inherits closeBtn-content |
arrowNextContent |
String | Pass here your html for the next arrow |
arrowPrevContent |
String | Pass here your html for the previous arrow |
@before-open |
Function | Attach here your custom function, it will be invoked before the modal opens |
@before-close |
Function | Attach here your custom function, it will be invoked before the modal closes |
Examples
Inline HTML:
<Modal
btnText="Press me, senpai 😊"
modalContent="
<div>
<h2> Hello I am a modal</h2>
<p>I like stating the obvious: <b>the obvious</b></p>
<p>Now, try this trick: <code>Ctrl + Shift + W </code> 😉</p>
</div>
"
:closeBtn="true"
closeBtn-content="
<span>X</span>
"
/>Passing component:
<Modal
btnText="Press me, senpai 😊"
:closeBtn="true"
closeBtnHTML="<span>X</span>"
>
<ExampleComponent/>
</Modal>Multiple buttons & modal content + custom functions:
<Modal
:multiple="true"
@before-open="yourOpenFn()"
@before-close="yourCloseFn()"
:modals="[
{
btnText: 'Press me 1',
modalContent: 'This is <strong>the</strong> content 1'
},
{
btnText: 'Press me 2',
modalContent:
'<img src=\'https://media.giphy.com/media/5exwXWg9u7yow/giphy.gif\'>'
},
{
btnText: 'Press me 3',
modalContent: 'This is the <h3>content 3</h3>'
}
]"
:showNav="true"
/>From Api/Json feed + Prev/Next Arrows:
<Modal
:multiple="true"
:modals="formattedUsers"
:showArrows="true"
/>
export default {
data: () => {
return {
users: []
}
},
mounted(){
fetch('https://jsonplaceholder.typicode.com/users')
.then(res => res.json())
.then(res => this.users = res)
.catch(err => console.log(err))
},
computed: {
formattedUsers: function() {
return this.users.map(user => {
return {
btnText: `${user.name}`,
modalContent: `
<h2>Email:${user.email}</h2>
<h2>Phone:${user.phone}</h2>
`
};
});
}
}
}