Skip to content
On this page

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).