Vue.js-Textfeld mit Dropdown-Komponente

Ein Textfeld mit Dropdown-Liste ermöglicht es Benutzern, eine Eingabe aus einer Dropdown-Liste auszuwählen oder den Eingabewert frei einzugeben. Dies ist ein relativ häufiges UI-Element. Es kann Benutzern alternative Optionen zur Einsparung von Betriebszeit bieten und auch Anpassungsmöglichkeiten für mögliche Minderheitssituationen bereitstellen.

Ursprünglich dachte ich, dass diese Komponente recht häufig vorkommt und es viele vorgefertigte Beispiele geben sollte, die direkt angewendet werden können. Nach einigem Suchen stellte ich jedoch fest, dass viele ähnliche Komponenten zu viele Funktionen haben, wie z. B. Suche, Mehrfachauswahl usw. (Kurz gesagt: zu kompliziert!). Also dachte ich, ich sollte selbst eine einfache und benutzerfreundliche Anleitung schreiben. Ich möchte Herrn Fei für seine großartige Hilfe danken, als ich verwirrt war.

Dieses UI-Element wird in der Common Bar Width App verwendet.

Registrieren von Komponenten

Registrieren Sie die globale Komponente, indem Sie den gekapselten Komponentencode kopieren und einfügen.

Bei der Gestaltung wurde berücksichtigt, dass es unterschiedliche Arten von Eingabefeldern geben kann, beispielsweise Text-Eingabefelder, numerische Eingabefelder, Prozent-Eingabefelder usw. Daher wird die Funktion inputRule verwendet, um die Eingabe im gekapselten Code einzuschränken. Die einschränkende Methode besteht darin, zum Filtern Regex zu verwenden. Wenn andere Typen vorhanden sind, können Sie die Filterbedingungen auch in inputRule ändern.

<script Typ="text/x-template" id="dropdown">
    <div Klasse="Dropdown" v-if="Optionen">
        <!-- Dropdown-Eingabe -->
        <Eingabe: Typ = "Typ"
                :deaktiviert="deaktiviert"
                v-model="Eingabewert"
                @focus="Optionen anzeigen()"
                @blur="Beenden()"
                @keyup="Schlüsselmonitor"
                @input="Eingabewert = Eingaberegel(Typ)" />
...
</Skript>
<Skript>
    Vue.component('Dropdown', {
        Vorlage: '#dropdown',
        Requisiten: {
            Typ: Zeichenfolge,
            Optionen: Array,
            deaktiviert: Boolean,
            Wert: Zeichenfolge
        },
...
        Methoden: {
            Eingaberegel:Funktion(Typ){
                var-Wert;
                Schalter(Typ){
                    Fall 'Text':
                        Wert = dieser.Eingabewert.Ersetzen(/[^a-zA-Z0-9]/g,'');
                        brechen;
                    Fall 'Nummer':
                        Wert = dieser.Eingabewert.Ersetzen(/^(?![+-]?\d+(\.\d+)?$)/g,'');
                        brechen;
                    Fall 'Prozentsatz':
                        Wert = this.input_value.replace(/[^\d]/g,'');
                        Wert = Wert > 100? „100“: Wert;
                        Wert = Wert < 0? „0“: Wert;
                        brechen;
                    Standard:
                        console.log("keine Einschränkung");
                }
                Rückgabewert;
            },
...
</Skript>

Aufrufende Komponenten

Fügen Sie eine benutzerdefinierte Label-Aufrufkomponente hinzu.

<Dropdown-Typ = "Text"
            :Optionen = "Textoptionen" 
            :Wert = "Textwert"
            :deaktiviert = "Text_deaktiviert" 
            @on_change_input_value = "beiTextänderung">
</dropdown>

Übergeben von Daten

Binden Sie die Daten abschließend dynamisch an die übergeordnete Komponente in Props:

• Typ: Der Typ des Eingabefelds, unterstützt derzeit Text, Zahlen und Prozentsätze.
• Optionen: Optionen für die Dropdown-Liste des Eingabefelds
• Wert: der Wert des Eingabefeldes
• deaktiviert: Gibt an, ob das Klicken auf das Eingabefeld verboten werden soll

Darüber hinaus müssen wir auch Dinge in der übergeordneten Instanz definieren, um den Wert des Eingabefelds zu aktualisieren

on_change_input_value: Wert aktualisieren

Daten: Funktion () {
    zurückkehren {
        Textwert: "ccc",
        text_disabled: falsch,
        Textoptionen: [
            { ID: 1, Name: "a" },
            { ID: 2, Name: 'bb' },
            { ID: 3, Name: "ccc" },
            { ID: 4, Name: "dddd" },
            { ID: 5, Name: "eeeee" },
            { ID: 6, Name: "fffff " },
            { ID: 7, Name: "gggggg" },
            { id: 8, name: 'hhhhhhh' },
            { id: 9, name: "iiiiiiii" },
        ],
        ...
    }
},
...
Methoden: {
    beiTextänderung: Funktion (neuer_Textwert) {
        dieser.Textwert = neuer_Textwert;
    },
...
},

Quellcode

GitHub

Dies ist das Ende dieses Artikels über die Vue.js-Textbox mit Dropdown-Komponente. Weitere Informationen zur Vue.js-Textbox mit Dropdown-Komponente finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!