Appearance
ModalObject
The pushModal and openModal methods return an object of the following type:
id - unique identifier of the modal window.
close - a method that allows you to close the created modal window.
onclose is a function that is executed when an attempt is made to close a window. This function can be overridden to control the closing of the window. If onclose returns false, the modal will not be closed.
instance - an instance of an open modal window. Allows you to access the properties and methods of the modal window.
closed - computed variable, true if the modal window is open.
import {openModal} from "jenesius-vue-modal";
const modal = await openModal(Modal, {
message: "Welcome"
});
modal.onclose = () => false
modal.instance.message; // "Welcome"
modal.closed.value; // true
modal.close() // The modal will not be closed
const modal = await openModal(Modal);
modal.id; // Unique identity
modal.onclose = () => {
if (weather === "rainy") return false;
}
modal.close() // Close modal if the weather is rainy
When using onclose, we can also access the internal fields and methods of the modal by passing a non-anonymous function as a parameter:
// ./modal.vue
{
props: {},
data: () => {
return {
insideValue: "Hello"
}
}
}
const modal = await openModal(Modal);
modal.onclose = function(){
this.insideValue; // "Hello"
modal.instance.insideValue; // "Hello"
}
Instance
If you are tagging instance in your project together in <script setup>
, you need to remember that in this case the component will be closed. In order to open some properties, you need to resort to [defineExpose] (https://vuejs.org/api/sfc-script-setup.html#defineexpose).