Der gesamte Prozessdatensatz der rekursiven Komponentenkapselung von Vue3

<Vorlage>
   <ul Klasse="Listencontainer">
       <li v-for="(Element, Index) in Listendaten" 
            :Schlüssel="Index" Klasse="Listenelement" 
            @click.prevent.stop="Klickhandle($event,item)"
            @mouseover="childrenMenuIndex=index"
            >
           <span class="list-item_span">
               {{item.text}}
           </span>
           <CaretRightOutlined v-if="item.children" />
           <!-- Bestimmen Sie, ob es sich selbst aufrufen soll -->
           <div v-if="item.children&&childrenMenuIndex===index"
            Klasse = "Kontextmenü Kontextmenü_untergeordnet"
           >
            <!-- Aufruf der Komponente selbst -->
            <list-comp: list-data = "Element.Kinder" @hideContextMenu = "hideContextMenuEvent" />
           </div>
       </li>
   </ul>
</Vorlage>

<Skript>
importiere { defineComponent, ref } von "vue";
importiere {CaretRightOutlined} aus '@ant-design/icons-vue';
exportiere StandarddefiniereKomponente({
    Name: „Liste-Comp“,
    Requisiten:{
        Listendaten: {
            Typ: Array,
            Standard:()=>[]
        }
    },
    Komponenten: {
        CaretRechtsUmrissen
    },
    gibt aus:
        "Kontextmenü ausblenden"
    ],
    setup(Eigenschaften,{emit}){
    	//Klick-Ereignis const handleClick=(event,{text,callBack})=>{
            emittieren('Kontextmenü ausblenden');
            //callBack ist die von Ihnen übergebene Callback-Funktion. Wenn sie übergeben wird, wird die benutzerdefinierte Callback-Funktion aufgerufen, wenn (callBack) {
                Rückruf();
                zurückkehren;
            }
        }
        const hideContextMenuEvent=()=>{
            emittieren('Kontextmenü ausblenden');    
        }
        //Wird verwendet, um das aktuell ausgewählte Menüelement zu identifizieren const childrenMenuIndex=ref(-1);
        const eventNames=['Klick','Kontextmenü'];
        beim Montieren(()=>{ 
            Ereignisnamen.fürJeden(Ereignisname=>window.addEventListener(Ereignisname,hideContextMenuEvent))
        })
        beiVorUnmount(()=>{
            Ereignisnamen.fürJeden(Ereignisname=>Fenster.entfernenEventListener(Ereignisname,hideContextMenuEvent))
        })
        zurückkehren {
            GriffKlicken,
            KinderMenüIndex,
            Kontextmenüereignis ausblenden
        }
    }
})
</Skript>

<Vorlage>
    <teleportieren zu='body' >
        <div Klasse="Inhaltsmenü_Container" :style="styleObj">
            <Listenkomp. 
                :list-data='Menüdaten'
                @hideContextMenu='windowClickHandler'
             />
        </div>
    </teleportieren>
</Vorlage>

<Skript>
importiere { defineComponent } von "vue";
importiere ListComp aus "./list-comp.vue"
exportiere StandarddefiniereKomponente({
    Name:"Kontextmenü",
    Komponenten: {
        ListenComp
    },
    Requisiten:{
        StilObj: {
            Typ: Objekt,
            Standard:()=>{}
        },
        MenüDaten:{
            Typ: Array,
            Standard:()=>[]
        }
    },
    gibt aus: ['Kontextmenü schließen'],
    setup(Eigenschaften,{emit}){
        const windowClickHandler=()=>{
            emittieren('Kontextmenü schließen')
        };
        zurückkehren {
            FensterClickHandler,
        }
    }
})
</Skript>

const showContextMenu=(Ereignis)=>{
    //Standardereignisse deaktivieren und Aufsteigen verhindern event.stopPropagation();
    event.preventDefault();
    Zustand.showContextMenu=true;
    Zustand.styleObj={
      links:event.clientX+ "px",
      oben:event.clientY+'px'
    }
  }
  //Überwachen Sie das Rechtsklickmenüereignis des Fensters selbst onMounted(()=>{
    window.addEventListener('Kontextmenü',Kontextmenü anzeigen)
  })
  beiVorUnmount(()=>{
    window.removeEventListener('Kontextmenü',Kontextmenü anzeigen)
  })