Vue3.0 implementiert die Kapselung des Dropdown-Menüs

<DropDown :title="'Beenden'" :list="menuLists" />

<dropdown :title="'Beenden'">
   <drop-dowm-item>Neuen Artikel erstellen</drop-down-item>
   <drop-dowm-item>Artikel bearbeiten</drop-down-item>
   <drop-dowm-item>Persönliche Informationen</drop-down-item>
</Dropdown>

<Vorlage>
  <div Klasse="dropdown" ref="dropDownRef">
    <a
      @click.prevent="toggleOpen"
      Klasse = "btn btn-sekundäres Dropdown-Umschalten"
      href="#" rel="externes Nofollow" 
    >
      {{ Titel }}
    </a>
    <div Klasse="Dropdown-Menü" :style="{ Anzeige: 'block' }" v-show="istOffen">
      <Steckplatz></Steckplatz>
    </div>
  </div>
</Vorlage>

<script lang="ts">
importiere { defineComponent, ref, onMounted, onUnmounted, watch } von "vue";
importiere useClickOutside von "../hooks/useClickOutside";
exportiere StandarddefiniereKomponente({
  Name: "DropDown",
  Requisiten: {
    Titel:
      Typ: Zeichenfolge,
      erforderlich: wahr,
    },
  },

  setup(Kontext) {
    const isOpen = ref(false);
    //vue3.0 ruft die Referenz des DOM-Objekts ab const dropDownRef = ref<null | HTMLElement>(null);
    const toggleOpen = () => {
      istOpen.value = !istOpen.value;
    };
    const handleClick = (e: Mausereignis) => {
      console.log(e.target, "e");
      wenn (dropDownRef.value) {
        Konsole.log(dropDownRef.value);
        Wenn (
        //contains bestimmt, ob der Knoten den Knoten enthält!dropDownRef.value.contains(e.target as HTMLElement) &&
          istOffen.Wert
        ) {
          istOffen.Wert = falsch;
        }
      }
    };
    beimMounted(() => {
    //Globales Klickereignis registrieren document.addEventListener("click", handleClick);
    });
    beiUnmountet(() => {
    //Bindung aufheben document.removeEventListener("click", handleClick);
    }); 
    zurückkehren {
      istOffen,
      UmschaltenÖffnen,
      DropdownRef,
    };
  },
});
</Skript>

<Vorlage>
  <li class="dropdown-option" :class="{ 'is-disabled': deaktiviert }">
    <Steckplatz></Steckplatz>
  </li>
</Vorlage>
<Stilbereich>

/* Hier muss der Schlitz eindringen*/
.dropdowm-option.ist-deaktiviert >>> * {
  Farbe: #6c757d;
  Zeigerereignisse: keine;
  Hintergrundfarbe: transparent;
}
</Stil>

<script lang="ts">
importiere { defineComponent } von "vue";

exportiere StandarddefiniereKomponente({
  Requisiten: {
    deaktiviert:
      Typ: Boolean,
      Standard: false,
    },
  },
  aufstellen() {
    zurückkehren {};
  },
});
</Skript>

importiere { ref, onMounted, onUnmounted,Ref } von 'vue'
const useClickOutside = (elementRef:Ref<null | HTMLElement>) => {
    const isClickOutside = ref(false)
    const handler = (e: Mausereignis) => {
        Konsole.log(elementRef.value);
        wenn (elementRef.value) {
            wenn (elementRef.value.contains(e.target as HTMLElement)) {
                isClickOutside.value = false
            } anders {
                isClickOutside.value = true
            }
        }
    }
    beimMounted(() => {
      document.addEventListener("klicken", Handler);
    });
    beiUnmountet(() => {
      document.removeEventListener("Klick", Handler);
    });
    returniere isClickOutside
}

Export-Standard useClickOutside

//Lösche die bestehende Ereignislogik<script lang="ts">
... 
 const isClickOutside = useClickOutside(dropDownRef);
    /* console.log(isClickOutside.value, "isClickOutside"); */
    //Führen Sie die Überwachungsmethode ein. Wenn sich die Daten ändern, ändern wir den Wert von isOpen auf false.
    watch(isClickOutside, (neuerWert) => {
      wenn (isOpen.value && isClickOutside.value) {
        istOffen.Wert = falsch;
      }
    });
 ...
</Skript>