Dynamic rendering of popup component vuejs-CodePudding

I would like to create a VueJS app and I have a problem. I would like to be able to display some components and when I will right click on it, a popup will be displayed. The problem is that the popup will be different for every component. I saw something with the component id but I don't know if It can be answer to my problem.

Example of code :

Vue.component('component', {
 template: `<button v-on:click="showPopup()">Open popup</button>`
})

Vue.component('popup1', {
template: '<div>Some complex features ... </button>'
})

Vue.component('popup2', {
template: '<div>Another complex features ... </button>'
})

The idea here is that the component 'component' don't really know which popup to display. It will be the function showPopup that will know the popup.

CodePudding user response：

You can send a simple data to know which popup should be show to your client, for example:

in App.vue setup() section you have this :

const popup = reactive({
    type: "none",
    data: "hello world"
});

const popupToggle = ref(false);

function showPopup(type, data){
    popup.type = type;
    popup.data = data;
    popupToggle.value = true;
}
    
function closePopup(){
    popup.type = "none";
    popup.data = "empty";
    popupToggle.value = false;
}

and provide your functions into your project with :

provide("popupFunctions", {showPopup, closePopup});

and inject provided functions in other child documents with :

const {showPopup, closePopup} = inject("popupFunctions");

now all you need is call the functions which named showPopup and closePopup to change popup variable which you created before in your App.vue and check the popup type to show the targeted component as a popup to your client

Something like this in <template> section in your App.vue :

<popup-component v-if="popupToggle">
    <popup-msgbox v-if="popup.type === 'msgBox'" :popup-data="popup.data" />
    <popup-formbox v-else-if="popup.type === 'formBox'" :popup-data="popup.data" />
    <popup-errorbox v-else-if="popup.type === 'errBox'" :popup-data="popup.data" />
</popup-component>

of course you should import these components and other required things in your project as you know, and i just tried to clear the solve way for you. I hope my answer be clear to you and help you solve your problem.

CodePudding user response：

Here's a working example:
https://codesandbox.io/s/nervous-dew-kjb4ts

Step 1

Make a modal - see example.

We can use slots to put dynamic content, like other components in each instance of the modal, and named slots for multiple sections. We will control visibility in the outer component / the mixin.

<template>
  <transition name="modal">
    <div >
      <slot name="header"> default header </slot>
    </div>

    <div >
      <slot name="body"> default body </slot>
    </div>
    <slot name="footer">
      Default Footer
      <button  @click="$emit('close')">