vue-flawless-modal
The last modal you need
Playground
Installation
- Install via NPM
npm install vue-flawless-modal
- Use
Vue.use
:
Vue
- Add
<modal-root />
somewhere (e.g.App.vue
):
Documentation
Basic usage
Create modal
Use <modal-window>
with name
property:
...
Programmatic controls
Then, you can control your modal anywhere using $modal
methods
/* In components */this$modalthis$modal
/* Outside vue */ modalmodal
v-model
Control using Set property to true
to open modal
Set property to false
to close modal
...
NOTE: If you toggle modal with another way, prop will be changed too
Properties
Overlay
By default, overlay is set to true
. To remove it, use:
...
Close methods
By default, all props are set to true
Some info
Change position
If overlay
is disabled, you can change modal position
Some info
- x: left | center | right
- y: top | center | bottom
Animating modal
Modal is wrapper into default <transition>
component with alias modal-
Some info
Animations out of box: fade | top | flip
Sending context to modal
If you have some form and you need to fill it with data from another part of application, you can do it in two ways:
{ return form: title: '' text: '' } methods: { /* With modal open */ this$modal /* Or just with send */ this$modal }
And then, you can use it with slot-scope
TODO
- Fix mobile issues
- 2+ modals of a single type on the screen
- Manually passed modal position
- Popover-style
Author
My name is Anton, I'm frontend developer and I do little but useful things for JavaScript and especially for Vue
Check out my GitHub: click here
Follow me on Twitter: click here