@appoly/vue-modal

Vue Modal

Installation

Install Vue Modal with npm

npm install @appoly/vue-modal

Props

Prop	Type	Default	Description
confirmButtonText	string	Confirm	Text displayed on the confirm button
confirmButtonClass	string		Custom class for the confirm button
closeOnOutsideClick	bool	true	Close the modal by clicking on the outside
showConfirmButton	string	true	Display the confirm button
cancelButtonText	string	Cancel	Text displayed on the cancel button
cancelButtonClass	string		Custom class for the cancel button
closeOnButtonClick	bool	true	Modal can be closed on cancel/confirm click or an event is emitted and can be closed via functions
escClosesModal	bool	true	Should the modal close if the Esc key is pressed (and closeOnOutsideClick is True)
animation	string	zoom	Animation type, options include zoom, bounce, fade & none
timeout	number	0	Should the modal automatically close, time set in milliseconds
width	string	700px	Width of the modal in px, rem, em, %. Just numbers default to px
maxHeight	string	75%	Height of the modal in px, rem, em, %. Just number default to px
sticky-header	bool	false	Should the modal have a sticky header
sticky-footer	bool	false	Should the modal have a sticky footer

Slots

Slot	Description
header	Content for the top of the modal
body	Content for the center of the modal
footer	Content for the bottom of the modal (above the buttons)
buttons	Replaces the buttons

Usage/Examples

import VueModal from '@appoly/vue-modal';

<VueModal ref="myModal" timeout="5000">
    <template #header>
        <h1>My Modal</h1>
        <hr>
    </template>
    <template #body>
        <p>This modal will hide in 5 seconds</p>
    </template>
</VueModal>

Open Modal

this.$refs.myModal.openModal();

Close Modal

If closeOnButtonClick is turned off you will need to listen for the confirm and cancel events and close the modal using

this.$refs.myModal.closeModal();