Vue+Element UI realisiert die Kapselung von Dropdown-Menüs

<Vorlage>
  <div Klasse="alle" @click="clickFire">
    <span class="item-border">
      <el-Bild
        Klasse="Artikel"
        Stil="Breite: 24px; Höhe: 24px"
        fit="Abdeckung"
        :lazy="istfaul"
        :src="itemProperty.url"
        :title="Artikeleigenschaft.name"
        :Platzhalter="Artikeleigenschaft.name"
      ></el-image>
    </span>
    <div Klasse="wrap-item"></div>
    <!-- Dropdown-Menü -->
    <el-dropdown class="dropMenu" @command="handleCommand">
      <span class="el-dropdown-link" v-text="itemProperty.name"></span>
      <el-dropdown-menu slot="dropdown" class="dropMenuitems">
        <!-- <el-dropdown-item>Goldener Kuchen</el-dropdown-item>
        <el-dropdown-item>Löwenkopf</el-dropdown-item>
        <el-dropdown-item>Reisnudeln mit Schneckengeschmack</el-dropdown-item> -->
        <el-Dropdown-Element
          Klasse="dropMenu-item"
          v-for="(Element, Index) in ElementEigenschaft.menus"
          :Schlüssel="Index"
          :Befehl="Artikel"
          >{{ Artikel }}</el-Dropdown-Artikel
        >
      </el-Dropdown-Menü>
    </el-dropdown>
  </div>
</Vorlage>
<Skript>
Standard exportieren {
  Requisiten: {
    itemProperty: Objekt,
    erfordern: wahr,
  },
  Daten() {
    zurückkehren {
      isLazy: wahr,
      Artikel:
        Name: "Artikel",
        URL: erforderlich('../../../static/imgs/menus/warning.png'),
        Menüs: [
          'Untermenü-1',
          'Untermenü-2',
          'Untermenü-3',
          'Untermenü-4',
          'Untermenü-5',
        ],
      },
    }
  },
  montiert() {
    dies.$data.item = diese.$props.itemEigenschaft
    // Konsole.log(diese.$props.itemProperty)
  },
  Methoden: {
    //Klickereignis für übergeordnetes Symbol clickFire() {
      //Parameter 1: benutzerdefiniertes Komponentenereignis, das in der übergeordneten Komponente aufgerufen werden kann, um die Wertübertragung von übergeordneten zu untergeordneten Komponenten auszulösen; Parameter 2: an die übergeordnete Komponente übergebene Daten [können in Array-Form vorliegen]
      dies.$emit('clickItem', dies.$data.item)
    },
    //Dropdown-Menü-Klickereignis handleCommand(command) {
      // konsole.log(Befehl)
      dies.$emit('handleCommand', Befehl)
    },
  },
}
</Skript>
<style lang="less" scoped>
.alle {
  // Rand: 1px durchgehend himmelblau;
  Anzeige: Inline-Block;
  Position: relativ;
  Breite: 65px;
  Höhe: 65px;
  // Überlauf: versteckt;
}
// Innerste Ebene.item-border {
  Anzeige: Inline-Block;
  Rand: 0 automatisch;
  Rand links: 0px;
  Rand oben: 10px;
  Breite: 44px;
  Höhe: 44px;
  Randradius: 50 %;
  Rand: 3px durchgehend himmelblau;
  // Hintergrundfarbe: schieferblau;
  .Artikel {
    Position: absolut;
    oben: 50 %;
    links: 50%;
    transformieren: übersetzen(-50 %, -50 %);
  }
}

// Äußerste Schicht.wrap-item {
  Position: absolut;
  oben: 0;
  links: 0;
  Anzeige: Inline-Block;
  Breite: 56px;
  Höhe: 56px;
  Rand: 5px gepunktet transparent;
  Rahmen links: 5px gepunktet #73ffff;
  Rahmenbreite links: 3px;
  Rahmenfarbe rechts: #73ffff;
  Farbe des oberen Rahmens: transparent;
  Randradius: 50 %;
  // Hintergrundfarbe: Burlywood;
  Animation: Kreis 3s unendlich linear;
}
@keyframes Kreis {
  0% {
    transformieren: drehen (0 Grad);
  }

  100 % {
    transformieren: drehen (-360 Grad);
  }
}
//Dropdown-Menü.dropMenu {
  Rand oben: 5px;
  // Hintergrundfarbe: gelbgrün;
  Farbe: #fff;
  //Titel item.el-dropdown-link {
    Cursor: Zeiger;
  }
  //Menü-Unterelement.el-dropdown-menu__item {
    Farbe: rot !wichtig;
  }
  .dropMenu-item {
    Hintergrundfarbe: rosabraun;
  }
}
</Stil>

<Vorlage>
    <!-- Funktionsmodul: Verwenden Sie Unterkomponenten - achten Sie auf die benutzerdefinierten Ereignisse clickItem und handleCommand -->
    <div Klasse="funcModules">
      <RingArtikel
        Klasse = "Ringitem-Stil"
        v-for="(Element, Index) in FunktionElemente"
        :Schlüssel="Index"
        :itemProperty="Artikel"
        @clickItem="KlickRingItem"
        @handleCommand="handleCommandDropMenü"
      />
    </div>
</Vorlage>
<Skript>
//1-Unterkomponente „RingItem“ aus „../Controls/RingItem“ importieren
Standard exportieren {
  Komponenten:
  //2-Komponente RingItem registrieren,
  },
  Daten() {
    zurückkehren {
      //Funktionsmodul-Symbolressourcen funcItems: [
        {
          Name: 'Systemverwaltung',
          URL: erforderlich('../../../static/imgs/menus/management.png'),
          Menüs: ['Details verwalten', 'Über uns'],
        },
      ],
    }
  },
  Methoden: {
    /**
     * Klickereignis der RingItem-Unterkomponente: Wert ist der von „Emit“ in der Unterkomponente übergebene Wert*/
    clickRingItem(Wert) {
      // Beurteilen Sie den Wert des Namensattributs der Unterkomponente und implementieren Sie den entsprechenden Geschäftslogikschalter (value.name) {
        Fall 'Systemverwaltung': {
          console.log('Systemverwaltung')
          // Seitensprung-Management-Center ausführen (je nach Bedarf Geschäftslogik hinzufügen)
          //this.$router.push({ Pfad: '/admincenter' })
          brechen
        }
      }
    },
    /**
     * RingItem-Unterkomponente: Klickereignis für Dropdown-Menü (Wert ist der von „Emit“ in der Unterkomponente übergebene Wert)
     */
    handleCommandDropMenu(Wert) {
      console.log(Wert)
       Schalter (Wert.Name) {
        Fall 'Details verwalten': {
          console.log('Systemverwaltung')
          // Seitensprung-Management-Center ausführen (je nach Bedarf Geschäftslogik hinzufügen)
          //this.$router.push({ Pfad: '/admincenter' })
          brechen
        }
         case 'Über uns': {
          console.log('Systemverwaltung')
          // Seitensprung-Management-Center ausführen (je nach Bedarf Geschäftslogik hinzufügen)
          //this.$router.push({ Pfad: '/admincenter' })
          brechen
        }
      }
    },
  },
}
</Skript>
<style lang="less" scoped>
//Stilanpassung</style>