Detaillierte Erläuterung der Komponentenentwicklung des Vue-Dropdown-Menüs

<Vorlage>
  <div Klasse="Box">
     <!-- Der Schaltfläche ein Klickereignis hinzufügen-->
    <div @click="showM">
          <!-- Schaltfläche der ersten Ebene -->
      <slot name="Titel"></slot>
    </div>
        <!-- Sekundäre Box -->
        
        <!-- Fügen Sie eine v-if-Operation hinzu, um den Anzeigeeffekt auszublenden-->
    <slot v-if="anzeigen" name="dropdown"></slot>
  </div>
</Vorlage>

<Skript>
  Standard exportieren {
    Name: "Dropdown",
    Daten() {
      zurückkehren {
        // Die sekundäre Standardbox ist geschlossen. Show: false
      }
    },
    Methoden: {
      zeigeM() {
        dies.show = !dies.show
      },
      commitClick(Wert) {
      // Das Dropdown-Ereignis dem übergeordneten Element zugänglich machen und den Wert an this.$emit('change-item',value) übergeben.
      }
    }
  }
</Skript>

<Stilbereich>
  .Kasten {
    Anzeige: Inline-Block; /* Inline-Block */
    position: relativ; /* relative Positionierung*/
    oben: 100px;
    Rand links: 100px
  }
</Stil>

<Vorlage>
  <div Klasse="Dropdown-Menü">
    <Steckplatz></Steckplatz>
  </div>
</Vorlage>

<Skript>
  Standard exportieren {
    Name: "Dropdown-Menü"
  }
</Skript>

<Stilbereich>
  .Dropdown-Menü {
    padding: 8px 0; /* Der innere Rand der Box beträgt oben 8px und links und rechts 0 */
    border-radius: 4px; /* abgerundete Ecken der Box*/
    Rahmen: 1px durchgezogen #f2f6fc; /* Rahmen ist 1px grau*/
    position: absolute; /* absolute Positionierung*/
    rechts: 0; /* auf der rechten Seite */
    oben: 110 %; /* Die Box befindet sich unter der Schaltfläche */
    Hintergrundfarbe: #fff; /* Hintergrundfarbe ist weiß*/
    Kastenschatten: 0 2px 4px rgba(0,0,0,0,12),0 0 6px rgba(0,0,0,04);
    /* Füge der Box einen Schatten hinzu */
  }
</Stil>

<Vorlage>
  <div Klasse="Dropdown-Element" @click="itemClick(Wert)">
    <Steckplatz></Steckplatz>
  </div>
</Vorlage>

<Skript>
Standard exportieren {
  Name: "DropdownItem",
  Requisiten: ['Wert'],
  Daten() {
    zurückkehren {};
  },
  Methoden: {
    itemClick(Wert) {
      // console.log(Wert)
      //Rufen Sie das übergeordnete Element des übergeordneten Elements der aktuellen Komponente auf, d. h. die Methode showM() des Dropdown-Menüs, um dies zu schließen.$parent.$parent.showM();
      // Rufen Sie die CommitClick-Methode des übergeordneten Elements (Dropdown) des übergeordneten Elements auf und übergeben Sie den Wert this.$parent.$parent.commitClick(value);
    },
  },
};
</Skript>

<Stilbereich>
 .Dropdown-Element {
   Zeilenhöhe: 40px; /* Zeilenhöhe 40px */
   white-space: nowrap; /* kein Zeilenumbruch*/
   padding: 0 20px; /* Der innere Rand beträgt oben und unten 0 und links und rechts 20px */
   Farbe: #606266; /* Schriftfarbe ist grau*/
   Cursor: Zeiger; /*Bewegen Sie die Maus zum Klicken*/
 }
  .dropdown-item:hover {
    Farbe: #409eff; /* Schriftfarbe ist blau*/
    Hintergrundfarbe: #ecf5ff; /* Die Hintergrundfarbe sollte hell sein~~ ein sehr helles Blau*/
  }
</Stil>

<Vorlage>
  <div id="app">
    <dropdown @change-item="changeItem">
      <button slot="title">Schaltfläche</button>
      <Dropdown-Menü-Slot="Dropdown">
        <dropdown-item value="Essen">Essen</dropdown-item>
        <dropdown-item value="Getränk">Getränk</dropdown-item>
        <dropdown-item value="Abspielen">Abspielen</dropdown-item>
      </Dropdown-Menü>
    </dropdown>
  </div>
</Vorlage>

<Skript>
  Dropdown importieren aus „./components/common/dropdown“
  Dropdown-Menü aus "./components/common/dropdownMenu" importieren;
  Dropdown-Element aus "./components/common/dropdownItem" importieren;
  Standard exportieren {
    Name: "App",
    Komponenten:
      Dropdown, Dropdown-Menü, Dropdown-Element
    },
    Methoden:{
      ändereElement(e){
        console.log(e)
      }

    }
  }
</Skript>

importiere zgDropdown aus "@/components/common/dropdown"
importiere zgDropdownMenu aus "@/components/common/dropdownMenu"
importiere zgDropdownItem aus "@/components/common/dropdownItem"
Vue.component('zgDropdownItem',zgDropdownItem)
Vue.Komponente('zgDropdown',zgDropdown)
Vue.component('zgDropdownMenu',zgDropdownMenu)

<Vorlage>
  <div id="app">
    <zg-dropdown @change-item="changeItem">
      <button slot="title">Schaltfläche</button>
      <zg-dropdown-menu slot="Dropdown">
        <zg-dropdown-item value="Essen">Essen</zg-dropdown-item>
        <zg-dropdown-item value="Getränk">Getränk</zg-dropdown-item>
        <zg-dropdown-item value="Abspielen">Abspielen</zg-dropdown-item>
      </zg-Dropdown-Menü>
    </zg-dropdown>
  </div>
</Vorlage>

<Skript>
  Standard exportieren {
    Name: "App",
    Methoden:{
      ändereElement(e){
        console.log(e)
      }

    }
  }
</Skript>
<Stilbereich>

</Stil>