Vue base modal
Minimalistic promise-based, programmatically-opening & stacking modal plugin for Vue.js.
Basic usage
Import and use the plugin in your main file.
Vue
Add modal-stack
component to the end of your root component (i.e. App.vue
). This is a placeholder for all open modals.
// App.vue ...
Create your modal component. Use $emit('close', result)
to close the modal (with optional return value that is going to be passed to the resolved promise).
// WelcomeModal.vue My name is {{ name }} Cancel Confirm
And then open your modal programmatically by calling this.$modal(component, props)
.
... methods: async { const result = await this console }
<modal>
component
This component provides basic layout template for your custom modal, where you should use it as its root element.
You can close you modal by firing $emit('close', result)
from your component. result
param is optional and passed as a result of the resolved promise returned by this.$modal()
.
Slots
There are three named slots (header
, content
, footer
) with predefined styles (padding). Non of these is rendered when ommited.
This is header This is content This is footer
You can also use default
slot instead of content
which has no styles.
Properties
title
You can use this attribute as a shorthand for modals header containing just a plain text. This is overwritten when header
slot is used.
...
is equivalent to
The title ...
Events
before-close(callback)
If provided, called when the modal is about to be closed. It receives a callback
method that must be called by handler in order to close the modal, once it could be safely closed.
...