https://github.com/appoly/vue-modal
A simple modal component built with Vue.js
https://github.com/appoly/vue-modal
Last synced: 4 months ago
JSON representation
A simple modal component built with Vue.js
- Host: GitHub
- URL: https://github.com/appoly/vue-modal
- Owner: appoly
- Created: 2022-07-22T12:38:16.000Z (almost 4 years ago)
- Default Branch: main
- Last Pushed: 2024-08-15T10:32:19.000Z (almost 2 years ago)
- Last Synced: 2025-10-22T23:21:02.552Z (7 months ago)
- Language: Vue
- Homepage:
- Size: 169 KB
- Stars: 4
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Vue Modal
A simple and customizable modal component built with Vue.js. This component provides an easy-to-use interface for creating modals with various customization options.
## Installation
Install the package via npm:
```bash
npm install @appoly/vue-modal
```
## Usage
Import and register the component in your Vue application:
```javascript
import VueModal from '@appoly/vue-modal';
export default {
components: {
VueModal
}
}
```
Use the component in your template:
```html
Modal Header
This is the body content of the modal.
Footer content
Cancel
Confirm
```
### Open the Modal
To open the modal, use the openModal method:
```javascript
this.$refs.modal.openModal();
```
## Props
| Prop | Type | Default | Description |
|---------------------|-----------|-----------------------------|-------------------------------------------------------------------|
| confirmButtonText | String | "Confirm" | Text for the confirm button. |
| confirmButtonClass| String | "btn btn-primary btn-large"| Class for the confirm button. |
| closeOnOutsideClick| Boolean| true | Determines if clicking outside the modal should close it. |
| showConfirmButton | Boolean | true | Controls the visibility of the confirm button. |
| cancelButtonText | String | "Cancel" | Text for the cancel button. |
| cancelButtonClass | String | "btn btn-danger btn-large mr-2" | Class for the cancel button. |
| closeOnButtonClick| Boolean | true | Determines if clicking the confirm/cancel button should close the modal. |
| animation | String | "zoom" | Animation type for the modal ("zoom", "bounce", "fade"). |
| escClosesModal | Boolean | true | Should the modal close if the Esc key is pressed (and `closeOnOutsideClick` is True)|
| timeout | Number | 0 | Auto-close modal after the specified timeout in milliseconds. |
| stickyFooter | Boolean | false | Makes the footer sticky at the bottom of the modal. |
| stickyHeader | Boolean | false | Makes the header sticky at the top of the modal. |
| width | String | "700px" | Width of the modal. Supports units (px, %, em, rem). |
| maxHeight | String | "75%" | Maximum height of the modal. Supports units (px, %, em, rem). |
| escClosesModal | Boolean | true | Determines if pressing the Escape key should close the modal. |
## Slots
| Slot | Description |
|-----------|---------------------------------------------------|
| header | Content for the modal header. |
| body | Content for the modal body. |
| footer | Content for the modal footer. |
| buttons | Custom buttons to display in the modal footer. |
## Methods
| Method | Description |
|------------------|---------------------------------------------------------|
| openModal() | Opens the modal. |
| closeModal() | Closes the modal. |
| cancelButtonClicked() | Handles the cancel button click event. |
| confirm() | Handles the confirm button click event. |
| handleOutsideClick() | Closes the modal if clicking outside (if enabled). |
| handleEsc(event) | Closes the modal if the Escape key is pressed (if enabled). |
## Events
| Event | Description |
|----------|-------------------------------------|
| cancel | Emitted when the cancel button is clicked. |
| confirm| Emitted when the confirm button is clicked. |
## Styles
The modal component uses the following class names:
- .modal-backdrop - For the modal backdrop.
- .modal - For the modal container.
- .model-content - For the content area within the modal.
- .btn - For buttons within the modal.
Custom animations are also provided for zoom, bounce, and fade.