Appearance
Methods
Open Modal
The openModal method is used to display a component in a modal window container. Before showing the modal window, the method will close all open modal windows, if it succeeds, it will open a new one. Two parameters are accepted as input:
VueComponent - a component object that will be rendered as a modal window. Also you can use string the name that was previously stored in the repository. Read more about it.
props - the object that contains the input parameters that are passed to the modal and will be accessible from props.
import {openModal} from "jenesius-vue-modal";
import VueComponent from "AnyVueComponent.vue";
const props = {title: "Hello"};
openModal(VueComponent, props)
// anyComponent.vue
<template>
<p>{{title}}</p>
</template>
<script>
export default {
props: {
title: String
}
}
</script>
Return value: Promise that, if successful, will return a ModalObject.
//{id, close, onclose, closed, instance}
const modal = await openModal(VueComponent);
Push Modal
The pushModal method is used to show a modal window, but, unlike openModal, it does not close previously opened modals, but shows the new one on top of the rest. Two parameters are accepted as input:
VueComponent - a component object that will be rendered as a modal window.
props - the object that contains the input parameters that are passed to the modal and will be accessible from props.
import {pushModal} from "jenesius-vue-modal"
pushModal(VueComponent)
<template>
<button @click = "pushModal">Push second</button>
</template>
<script>
import {pushModal} from "jenesius-vue-modal";
import ModalSecond from "ModalSecond";
export default {
setup(){
return {
pushModal: () => pushModal(ModalSecond)
}
},
}
</script>
<template>
<button @click = "pushModal">Push first</button>
</template>
<script>
import {pushModal} from "jenesius-vue-modal";
import ModalFirst from "ModalFirst";
export default {
setup: () => ({pushModal: () => pushModal(ModalFirst)}),
}
</script>
EXAMPLE Return value: Promise that, if successful, will return a ModalObject.
//{id, close, onclose, closed, instance}
const modal = await pushModal(VueComponent);
To close only the last window, you need to use the popModal method
Close Modal
To close all modals, use the closeModal method:
import {closeModal} from "jenesius-vue-modal"
closeModal()
Pop Modal
To close only the last modal window, if several were opened using the pushModal method, use the popModal method:
import {popModal} from "jenesius-vue-modal"
popModal()
Prompt Modal
Sometimes there is a request in a modal window that will return some data. It could be a modal window for a one-time request that will return the value of the input. The prompt-modal method is a synonym for pushModal, but increases the eavesdropping detection even further for Modal.EVENT_PROMPT upon execution of which the modal window will be closed and the data will be transferred with the event will be the execution of promptModal:
import {promptModal} from "jenesius-vue-modal"
const code = await promptModal(ModalCode);
File ModalCode.vue
<template>
<button @click="handleClick">Click</button>
</template>
<script>
import {Modal} from "jenesius-vue-modal";
export default {
methods: {
handleClick() {
// Current emit will close the modal and provided Meth.random()
// result to Promise returned by promptModal
this.$emit(Modal.EVENT_PROMPT, Math.random());
}
}
}
</script>