Step 1
To create a modal, refer to this example.
Utilize slots for inserting dynamic content, such as other components within each instance of the modal, and utilize named slots for multiple sections. The control of visibility will be managed in the outer component or mixin.
<template>
<transition name="modal">
<div class="modal-header">
<slot name="header"> default header </slot>
</div>
<div class="modal-body">
<slot name="body"> default body </slot>
</div>
<slot name="footer">
Default Footer
<button class="modal-default-button" @click="$emit('close')">
🚫 Close
</button>
</slot>
</transition>
</template>
<script>
export default {
name: "Modal",
};
</script>
<style scoped>
// Refer to the link above for complete styles
</style>
Step 2
Develop a mixin that can be extended by all components containing a modal. This is where you should add methods for opening, closing, and any additional functionality required. Create a data attribute to indicate the modal state for use with v-if, then implement two methods for opening and closing the modal.
import Modal from "@/components/Modal";
export default {
components: {
Modal
},
data: () => ({
modalState: false
}),
methods: {
openModal() {
this.modalState = true;
},
closeModal() {
this.modalState = false;
},
},
};
Step 3
Design your components that extend from the mixin, and utilize the modal component to display desired content.
You can initiate right-click events using: @mouseup.right
<template>
<div class="example-component comp1">
<h2>Component 1</h2>
<button @contextmenu.prevent
@mouseup.right="openModal()"
@click="tryRightClick()">
Open Component 1 Modal
</button>
<Modal v-if="modalState" @close="closeModal()">
<template v-slot:header>👉 Component 1 Modal</template>
<template v-slot:body>
Lorem ipsum
</template>
</Modal>
</div>
</template>
<script>
import modalMixin from "@/mixins/component-modal-mixin";
export default {
mixins: [modalMixin],
};
</script>
Step 4
Lastly, import your components into your project.
<template>
<div id="app">
<h3>StackOverflow Answer for Terbah Dorian</h3>
<i>Example of separate components opening separate modals</i>
<Component1 />
<Component2 />
<Component3 />
</div>
</template>
<script>
import Component1 from "@/components/Component1";
import Component2 from "@/components/Component2";
import Component3 from "@/components/Component3";
export default {
name: "App",
components: {
Component1,
Component2,
Component3,
},
};
</script>
If this information was helpful, feel free to give it an upvote!