Vergleich zweier Implementierungsmethoden der Vue-Dropdown-Liste

Zwei Implementierungen der Vue-Dropdown-Liste

Die erste Methode verwendet v-for

  <el-select v-model="form.columeType" placeholder="Feldtyp">
           <el-option v-for="(Element, Index) in columeTypeArr" :Schlüssel="Index" :Label="Element.Label" :Wert="Element.Wert">
           </el-Option>
  </el-Auswahl>

Diese Methode erfordert die Definition von columeTypeArr in den Daten wie folgt

Daten(){
    zurückkehren {
       SpalteTypeArr:[{
            Wert: „String“,
            Bezeichnung: „Zeichenfolge“
        },{
            Wert: 'Int',
            Bezeichnung: „Ganzzahl“,
        },{
            Wert: „Dezimal“,
            Bezeichnung: „numerischer Typ“
        }],
    }
}

Die zweite Methode ist die Verwendung der Dead Writing-Methode

Schreiben Sie es direkt unter „Select“

  <el-select v-model="form.fileOrgType" Platzhalter="Bitte auswählen">
        <el-option label="Ja" value="J"> </el-option>
        <el-option label="Nein" value="N"></el-option>
  </el-Auswahl>

Vergleich der beiden Methoden:

Die beiden Methoden sind ähnlich, außer dass die erste Methode in Daten konfiguriert werden muss. Wenn Daten aus dem Hintergrund wiederholt werden müssen, ist die erste Methode offensichtlich besser.

Für eine einfache Dropdown-Liste mit wenigen Parametern ist die zweite Methode deutlich vorteilhafter.

Implementierung der Vue-Dropdown-Menükomponente

Lassen Sie uns eine Vue-Dropdown-Menükomponente implementieren.

Es gibt im Internet bereits viele grundlegende UI-Komponenten dieser Art. Warum sollten wir sie also selbst implementieren? Tatsächlich habe ich nicht vor, das Rad neu zu erfinden, aber ich möchte anhand dieses Prozesses einige Details und Vorsichtsmaßnahmen bei der Entwicklung von Vue-Komponenten durchgehen.

Warum sollten Sie sich für die Dropdown-Menükomponente entscheiden?

Denn: Obwohl es klein ist, verfügt es über alle erforderlichen Funktionen. Diese kleine Komponente beinhaltet viele Wissenspunkte in der Vue-Komponentenentwicklung.

Okay, fangen wir an!

Erstellen Sie zunächst ein Vue-CLI-Projekt. Ich verwende Vue-CLI3. Der Erstellungsprozess entfällt. Erstellen Sie dann eine Vue-Komponente: DropDownList.vue

Bevor wir die Vorlage schreiben, analysieren wir die Ansichtsstruktur und Funktionalität dieser Komponente.

Die Dropdown-Menükomponente sollte aus zwei Teilen bestehen:

Der Text des ausgewählten Elements

Auswahlmenü (standardmäßig ausgeblendet)

Zu den Hauptmerkmalen gehören:

Wenn die Maus über die Dropdown-Menükomponente fährt, wird das auszuwählende Menü angezeigt

Schieben Sie die Maus aus der Dropdown-Menükomponente, um das auszuwählende Menü auszublenden

Wenn Sie auf ein Element im Auswahlmenü klicken, wird der Text des ausgewählten Elements aktualisiert und die Komponente löst ein Änderungsereignis aus.

Wir schreiben folgende Vorlage:

<Vorlage>
  <div Klasse="zq-drop-list" @mouseover="onDplOver($event)" @mouseout="onDplOut($event)">
        <span>Text des ausgewählten Elements<i></i></span>
        <ul>
            <li>Peking</li>
            <li>Schanghai</li>
            <li>Guangzhou</li>
        </ul>
    </div>
</Vorlage>

Das i-Tag rechts neben dem ausgewählten Elementtext wird verwendet, um das Dreiecksymbol des Dropdown-Menüs zu implementieren. Im folgenden CSS verwenden wir das Hintergrundbild, um es zu implementieren.

Wir haben dem Stammelement div Rückruffunktionen für Mouseover und Mouseout hinzugefügt. Die konkrete Implementierung finden Sie weiter unten.

Als nächstes schreiben wir einen Style für dieses Drop-down-Menü und fügen unterhalb des Templates einen Style-Tag hinzu. Um Konflikte mit den Styles anderer Komponenten zu vermeiden, empfehle ich bei der Entwicklung von Komponenten, dem Style das scoped-Attribut hinzuzufügen. Darüber hinaus hat der Autor hier SCSS verwendet. Der spezifische Code lautet wie folgt:

<style scoped lang="scss">
    .zq-drop-list{
        Anzeige: Inline-Block;
        Mindestbreite: 100px;
        Position: relativ;
        Spanne{
            Anzeige: Block;
            Höhe: 30px;
            Zeilenhöhe: 30px;
            Hintergrund: #f1f1f1;
            Schriftgröße: 14px;
            Textausrichtung: zentriert;
            Farbe: #333333;
            Rahmenradius: 4px;
            ich{
                Hintergrund: URL (https://www.easyicon.net/api/resizeApi.php?id=1189852&size=16) keine Wiederholung Mitte Mitte;
                Rand links: 6px;
                Anzeige: Inline-Block;
            }
        }
        ul{
            Position: absolut;
            oben: 30px;
            links: 0;
            Breite: 100 %;
            Rand: 0;
            Polsterung: 0;
            Rand: durchgezogen 1px #f1f1f1;
            Rahmenradius: 4px;
            Überlauf: versteckt;
            li{
                Listenstil: keiner;
                Höhe: 30px;
                Zeilenhöhe: 30px;
                Schriftgröße: 14px;
                Rahmen unten: durchgezogen 1px #f1f1f1;
                Hintergrund: #ffffff;
            }
            li:letztes-Kind{
                Rahmen unten: keiner;
            }
            li:hover{
                Hintergrund: #f6f6f6;
            }
        }
    }
</Stil>

Bezüglich des Stils werde ich hier nicht näher darauf eingehen, sondern nur ein paar Punkte erwähnen, die Beachtung verdienen:

Für den Style des i-Elements habe ich ein Bild aus dem Internet verwendet. Du kannst es gerne selbst ändern.

Die UL des Auswahlmenüs ist nicht im CSS ausgeblendet, da wir sie über JS steuern möchten. Die spezifischen Gründe sind wie folgt

Das Auswahlmenü ul verwendet die absolute Positionierung, da es beim Erweitern das Layout anderer Elemente auf der Seite nicht beeinträchtigen sollte.

Nun sieht die Komponente folgendermaßen aus:

Wir fahren mit der Definition der Eigenschaften für diese Komponente fort. Natürlich sollte das auszuwählende Menü als Eigenschaft übergeben werden und darf nicht intern fest codiert sein. Die Eigenschaftsdefinition lautet wie folgt:

<Skript>
Standard exportieren {
    Name: "DropDownList",
    Requisiten:{
        Datenliste:{
            Typ: Array,
            Standard(){
                zurückkehren [
                    {name: "Option 1"},
                    {name: "Option 2"}
                ]
            }
        },
        Bezeichnungseigenschaft: {
            Typ: Zeichenfolge,
            Standard(){ return "Name" }
        }
    },
    Daten(){
        zurückkehren {
            aktiverIndex:0
        }
    },
}

Unter ihnen ist dataList das Datenquellenattribut des auszuwählenden Menüs. Hier definieren wir einen Standardwert für dieses Attribut. Dies ist auch eine Gewohnheit, die der Autor Ihnen empfiehlt. Als Komponente ist es am besten, einen Standardwert zu haben, denn wenn andere Ihre Komponente verwenden, können sie die Wirkung eines fertigen Produkts sehen, ohne zuerst die relevanten Attribute festzulegen, und auch schnell die Datendetails der von Ihrer Komponente benötigten Attribute anzeigen.

Ein weiteres Attribut ist labelProperty. Was ist die Funktion dieses Attributs? Die Datenquellen in unseren tatsächlichen Projekten enthalten nicht unbedingt das Namensfeld, was dazu führen kann, dass das Dropdown-Menü den Datentext nicht rendert. Daher definieren wir dieses Attribut, um das Feld anzugeben, in dem die tatsächliche Datenquelle den Text rendert. Dieses Feld muss eine Zeichenfolge sein. Der Standardwert dieser Eigenschaft ist Name, da er mit der Standarddatenquelle übereinstimmen muss. Ich glaube, Sie haben auch interne Komponentendaten, activeIndex, gesehen, die den Index des aktuell ausgewählten Elements angeben, das wir später verwenden werden.

Jetzt können wir diese Komponente importieren und anderswo verwenden. Obwohl sie noch nicht vollständig ist, zeigen wir sie zunächst auf der Benutzeroberfläche an:

<Vorlage>
  <div Klasse="Startseite">
    <DropList :dataList="dplist" labelProperty="Stadt" @change="onDpChange($event)"></DropList>
    <p>Andere Textinhalte</p>
  </div>
</Vorlage>
<Skript>
  DropList aus '@/components/DropDownList.vue' importieren
  //Andere Codes werden weggelassen</script>

Diese Seite stellt unsere DropDownList-Komponente vor und verwendet sie. :dataList="dplist" bindet das dplist-Array der aktuellen Seite an die dataList-Eigenschaft der Komponente. Die Objekte in diesem Array haben ein Stadtfeld. Wir hoffen, dass dieses Feld im Dropdown-Menü angezeigt wird, also setzen wir die labelProperty der Komponente auf Stadt. Wir registrieren auch das Änderungsereignis für diese Komponente. Dieses Ereignis muss intern ausgelöst werden, wie unten gezeigt.

Kehren wir nun zum Vorlagenteil der Komponente zurück und stellen fest, dass es sich immer noch um statischen Inhalt handelt. Wir ändern diesen statischen Inhalt so, dass er über Attribute gerendert wird.

<Vorlage>
    <div Klasse="zq-drop-list" @mouseover="onDplOver($event)" @mouseout="onDplOut($event)">
        <span>{{dplLable}}<i></i></span>
        <ul>
            <li v-for="(Element, Index) in Datenliste" :Schlüssel="Index" @click="beiLiKlick(Index, $Event)">{{Element[Beschriftungseigenschaft]}}</li>
        </ul>
    </div>
</Vorlage>

Der Text des ausgewählten Menüs li lautet item[labelProperty], damit das vom Entwickler angegebene Feld korrekt angezeigt werden kann.

Schauen wir uns den Textausdruck des ausgewählten Elements an: dplLabel. Wir haben weder dieses Attribut noch diese internen Daten definiert. Woher kommen sie? Der Text des ausgewählten Elements sollte dataList[activeIndex][labelProperty] sein (das ist leicht zu verstehen, hinterlassen Sie bitte eine Nachricht, wenn Sie Fragen haben), aber dieser Ausdruck ist zu lang und nicht leicht zu pflegen, wenn er in die Vorlage geschrieben wird, deshalb schreiben wir ihn in die berechnete Eigenschaft.

berechnet:{
        dplLabel(){
            gib diese.Datenliste[diesen.aktivenIndex][diese.Beschriftungseigenschaft] zurück
        }
    }

Wir haben also das obige dplLabel. Die berechneten Eigenschaften sind wirklich nützlich.

Nachdem wir nun den Ansichts- und Datenzuordnungsteil des Dropdown-Menüs geschrieben haben, müssen wir seine Funktionalität implementieren.

Der erste Schritt besteht darin, das Auswahlmenü standardmäßig auszublenden. Warum verwenden wir hier nicht einfach CSS display:none und verwenden dann display:block, wenn die Maus darüber fährt? Aus diesem Grund können wir das Menüelement beim Anklicken nicht ausblenden, was eine schlechte Erfahrung ist. Wir verwenden js zur Steuerung, aber Vue unterstützt den direkten Zugriff auf DOM-Elemente nicht sehr gut. Wenn wir beim Initialisieren der Komponente auf DOM-Elemente zugreifen möchten, gibt es einen bequemeren Weg, nämlich: benutzerdefinierte Anweisungen.

Wir fügen der Dropdown-Menükomponente eine lokale benutzerdefinierte Anweisung hinzu. Der Code lautet wie folgt:

Anweisungen:{
        dpl:{
            binden(el){
                el.style.display = "keine";
            }
        }
    },

Dieses DPL ist eine benutzerdefinierte Anweisung. Bitte ignorieren Sie meine ungeschickte Benennung! Anschließend greifen wir in der Bind-Methode der Hook-Funktion der benutzerdefinierten Anweisung auf das el-Element zu und steuern dessen Stilattribut „display:none“. Abschließend fügen wir diese benutzerdefinierte Anweisung dem ul-Tag in der Vorlage hinzu. Vergessen Sie nicht, v- hinzuzufügen. Sehen Sie sich nun den Effekt an. Das Auswahlmenü wurde ausgeblendet.

<ul v-dpl>

Wir verwenden benutzerdefinierte Anweisungs-Hook-Funktionen, um auf DOM-Elemente zuzugreifen und Kontrolle über DOM zu erlangen, was sehr praktisch ist!

Lassen Sie uns nun die eingangs definierte Mouseover- und Mouseout-Überwachung für das Dropdown-Menü weiter implementieren und das Ein- und Ausblenden des ausgewählten Menüs realisieren.

beiDplOver(Ereignis){
    let ul = event.currentTarget.childNodes[1];
    ul.style.display = "Block";
},
onDplOut(Ereignis){
    let ul = event.currentTarget.childNodes[1];
    ul.style.display = "keine";
},

Bei einem Mausereignis greifen wir auf das currentTarget-Objekt des Ereignisses zu. Warum ist es nicht das Ziel? Da dieses Ereignis auch von den untergeordneten Elementen des Dropdown-Menüs ausgelöst wird, handelt es sich bei dem Zugriff auf das Ziel möglicherweise nicht um das erwartete Element der obersten Ebene.

Im letzten Schritt implementieren wir das Klickereignis des ausgewählten Menüelements. Nach dem Klicken wird das ausgewählte Menü ausgeblendet, der interne Status geändert und das Änderungsereignis ausgelöst.

beiLiKlick(index){
    let path = event.path || (event.composedPath && event.composedPath()) //Kompatibel mit Firefox und Safari
    Pfad[1].style.display = "keine";
    dies.activeIndex = Index;
    dies.$emit("ändern", {
        Index:Index,
        Wert:this.dataList[index]
    })
}

Hier ist ein Detail zu beachten. Wir müssen das äußere ul-Element durch das li-Element finden, aber der Pfad wird von Firefox und Safari nicht unterstützt. Glücklicherweise unterstützen diese beiden Browser composedPath, sodass die erste Codezeile kompatibel ist. Aktualisieren Sie dann den ausgewählten Elementtext, indem Sie den internen Daten-ActiveIndex ändern, und rufen Sie abschließend die Emit-Methode auf, um ein Änderungsereignis an das übergeordnete Element zu senden. Vergessen Sie nicht, das Ereignisobjekt einzukapseln und auszugeben.

Der vollständige Code lautet wie folgt:

<Vorlage>
    <div Klasse="zq-drop-list" @mouseover="onDplOver($event)" @mouseout="onDplOut($event)">
        <span>{{dplLable}}<i></i></span>
        <ul v-dpl>
            <li v-for="(Element, Index) in Datenliste" :Schlüssel="Index" @click="beiLiKlick(Index, $Event)">{{Element[Beschriftungseigenschaft]}}</li>
        </ul>
    </div>
</Vorlage>

<Skript>
Standard exportieren {
    Name: "DropDownList",
    Daten(){
        zurückkehren {
            aktiverIndex:0
        }
    },
    Requisiten:{
        Datenliste:{
            Typ: Array,
            Standard(){
                zurückkehren [
                    {name: "Option 1"},
                    {name: "Option 2"}
                ]
            }
        },
        Bezeichnungseigenschaft: {
            Typ: Zeichenfolge,
            Standard(){ return "Name" }
        }
    },
    Anweisungen:{
        dpl:{
            binden(el){
                el.style.display = "keine";
            }
        }
    },
    Methoden:{
        beiDplOver(Ereignis){
            let ul = event.currentTarget.childNodes[1];
            ul.style.display = "Block";
        },
        beiDplOut(Ereignis){
            let ul = event.currentTarget.childNodes[1];
            ul.style.display = "keine";
        },
        beiLiKlick(index){
            let path = event.path || (event.composedPath && event.composedPath()) //Kompatibel mit Firefox und Safari
            Pfad[1].style.display = "keine";
            dies.activeIndex = Index;
            dies.$emit("ändern", {
                Index:Index,
                Wert:this.dataList[index]
            })
        }
    },
    berechnet:{
        dplLabel(){
            gib diese.Datenliste[diesen.aktivenIndex][diese.Beschriftungseigenschaft] zurück
        }
    }
}
</Skript>

<style scoped lang="scss">
    .zq-drop-list{
        Anzeige: Inline-Block;
        Mindestbreite: 100px;
        Position: relativ;
        Spanne{
            Anzeige: Block;
            Höhe: 30px;
            Zeilenhöhe: 30px;
            Hintergrund: #f1f1f1;
            Schriftgröße: 14px;
            Textausrichtung: zentriert;
            Farbe: #333333;
            Rahmenradius: 4px;
            ich{
                Hintergrund: URL (https://www.easyicon.net/api/resizeApi.php?id=1189852&size=16) keine Wiederholung Mitte Mitte;
                Rand links: 6px;
                Anzeige: Inline-Block;
            }
        }
        ul{
            Position: absolut;
            oben: 30px;
            links: 0;
            Breite: 100 %;
            Rand: 0;
            Polsterung: 0;
            Rand: durchgezogen 1px #f1f1f1;
            Rahmenradius: 4px;
            Überlauf: versteckt;
            li{
                Listenstil: keiner;
                Höhe: 30px;
                Zeilenhöhe: 30px;
                Schriftgröße: 14px;
                Rahmen unten: durchgezogen 1px #f1f1f1;
                Hintergrund: #ffffff;
            }
            li:letztes-Kind{
                Rahmen unten: keiner;
            }
            li:hover{
                Hintergrund: #f6f6f6;
            }
        }
    }
</Stil>

Oben wird gezeigt, wie Sie eine Dropdown-Menükomponente in Vue implementieren. Obwohl es relativ einfach ist, beinhaltet es im Wesentlichen einige gängige Funktionen der Komponentenentwicklung. Ich hoffe, dies kann Ihnen als Referenz dienen und ich hoffe auch, dass Sie 123WORDPRESS.COM unterstützen werden.