https://github.com/melmacaluso/vue-modal
Reusable Modal component, supports own custom HTML, text and classes.
https://github.com/melmacaluso/vue-modal
dialog javascript modal modals popup reusable vue vue2 vuecomponent vuecomponents vuejs
Last synced: 12 months ago
JSON representation
Reusable Modal component, supports own custom HTML, text and classes.
- Host: GitHub
- URL: https://github.com/melmacaluso/vue-modal
- Owner: MelMacaluso
- Created: 2019-02-22T17:39:26.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2019-03-27T15:23:13.000Z (about 7 years ago)
- Last Synced: 2025-06-01T22:24:34.289Z (about 1 year ago)
- Topics: dialog, javascript, modal, modals, popup, reusable, vue, vue2, vuecomponent, vuecomponents, vuejs
- Language: JavaScript
- Homepage:
- Size: 573 KB
- Stars: 29
- Watchers: 1
- Forks: 9
- Open Issues: 1
-
Metadata Files:
- Readme: readme.md
Awesome Lists containing this project
README
# Vue Modal 🖼
[](https://www.npmjs.com/package/@melmacaluso/vue-modal)
[](https://github.com/semantic-release/semantic-release)
[](http://commitizen.github.io/cz-cli/)
## 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-close` and `before-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](https://codesandbox.io/s/rmj2y345xo)
- Preview - [codesandbox](https://rmj2y345xo.codesandbox.io/)
## Installation
```shell
npm i @melmacaluso/vue-modal
```
## Usage
Simply import it in your desired vue component as follows:
```javascript
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. `.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:
```vue
```
### Passing component:
```vue
```
### Multiple buttons & modal content + custom functions:
```vue
```
### From Api/Json feed + Prev/Next Arrows:
```vue
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: `
Email:${user.email}
Phone:${user.phone}
`
};
});
}
}
}
```