Zusammenfassung der Verwendung von Element-Formularelementen

Es gibt viele Formularelemente. Hier ist eine kurze Zusammenfassung. Ich unterteile sie hauptsächlich in: Textfeldklasse, Auswahlklasse und andere Klassen.

• Textfeldklasse
• Klasse auswählen
• Andere Kategorien

Kurz zusammengefasst

• Für Zeitauswahlfelder können Sie den Anzeigestil und das Werteformat des Eingabefelds festlegen. Die Attribute sind Format und Werteformat.
• Bei Optionsfeldern und Kontrollkästchen ist der Beschriftungswert des ausgewählten Elementattributs der Wert des Modells
• Kontrollkästchen. Wenn es sich um eine Mehrfachauswahl handelt, stellen Sie sicher, dass der Modellwert auf ein Array festgelegt ist.

Textfeldklasse

Hier habe ich die Elemente mit Textfeldern zusammengefügt. Die wichtigsten sind: normales Textfeld, Kennwortfeld, Textfeld, Zähler, Datumsauswahl, automatisch ausgefülltes Textfeld und Textfeld mit Präfix.

Normales Textfeld: disabled ist deaktiviert, clearable ist löschbar, maxlength/minlength Zeichenlänge, show-word-limit zeigt die Anzahl der Wörter an, prefix-icon/suffix-icon zeigt Symbole am Anfang und Ende an, size gibt die Größe des Eingabefelds an (groß klein mini),

<el-input v-model="xx" placeholder="Bitte Inhalt eingeben" deaktiviert löschbar maxlength="10" show-word-limit prefix-icon="el-icon-search" suffix-icon="el-icon-date" size="mini">

Kennwortfeld: muss über „show-password“ verfügen

<el-input show-password v-model="xx" Platzhalter="Bitte Inhalt eingeben" >

Textbereich: muss den Typ „Textbereich“ haben, Zeilen steuern die Höhe (beachten Sie, dass es sich um eine Zahl handelt und diese mit :) hinzugefügt werden muss), Autosize ermöglicht die automatische Anpassung der Höhe entsprechend dem Inhalt (Sie können auch die Mindest- und Höchstzahl der Zeilen festlegen)

<el-inut Typ="Textbereich" v-Modell="xx" :Zeilen="2" automatische Größe>

Zähler: nur Standard-Zahlenwerte sind zulässig, bequeme Addition und Subtraktion von Zahlen, min/max steuert die Maximal- und Minimalwerte, steps steuert die Schrittlänge

<el-input-number v-model="Anzahl" :min="1" :max="10" :Schritte="2"></el-input-number>

Zusammengesetztes Eingabefeld: Elemente können davor oder danach platziert werden (Slot)

  <el-input placeholder="Bitte Inhalt eingeben" v-model="xx">
    <template slot="prepend">Http://</template>
    <el-button slot="anhängen" icon="el-icon-search"></el-button>
  </el-Eingabe>

Eingabefeld mit Eingabevorschlägen, komplexer, siehe el-autocomplete

Die Datumsauswahl ist etwas knifflig, deshalb werde ich in einem separaten Abschnitt darüber sprechen.

Datums-/Uhrzeitauswahl

Besonders hervorzuheben ist hierbei, dass das im Eingabefeld angezeigte Format (Format) und das Format des gebundenen Wertes (Werteformat) gesteuert werden können! ! ! !
Besonders hervorzuheben ist hierbei, dass das im Eingabefeld angezeigte Format (Format) und das Format des gebundenen Wertes (Werteformat) gesteuert werden können! ! ! !
Besonders hervorzuheben ist hierbei, dass das im Eingabefeld angezeigte Format (Format) und das Format des gebundenen Wertes (Werteformat) gesteuert werden können! ! ! !
Das Jahr ist jjjj, der Monat ist MM, der Tag ist tt, die Stunde ist HH, die Minute ist mm, die Sekunde ist ss, die Woche ist WW (nur für die Wochenauswahl). Die gebräuchlichste Form ist jjjj-MM-tt HH:mm:ss.

Beachten Sie die Fallstricke:

• Mit Ausnahme des Jahres kann jede Zahl eine einzelne Ziffer sein. Wenn eine einzelne Ziffer zur Darstellung einer einzelnen Ziffer verwendet wird, wird keine 0 hinzugefügt.
• HH ist das 24-Stunden-Format, hh ist das 12-Stunden-Format! ! ! !
• value-format hat einen speziellen Zeitstempeltyp, format hat Typ A (AM/PM)
• Wenn das Werteformat nicht festgelegt ist, lautet die Standardeinstellung Freitag, 18. Okt. 2019, 11:27:54 GMT+0800 (chinesische Standardzeit). Normalerweise wird hierfür ein Zeitstempel mit 13 Ziffern verwendet.
• Die Werte der Start- und Endauswahl sind Arrays

Zur Auswahl stehen folgende Typen:

Zeitauswahl: Picker-Optionen legen den ausgewählten Bereich fest.

<el-time-picker v-model="xx" :picker-options="{selectableRange: '18:30:00 - 20:30:00'}" placeholder="Zeit auswählen">

Start- und Endzeitselektoren: müssen das Attribut is-range, align alignment, range-separator separator haben, der Standardwert ist -, start-placeholder und end-placeholder,

<el-time-picker is-range v-model="value1" align="center" range-separator="to" start-placeholder="Startzeit" end-placeholder="Endzeit"></el-time-picker>

Datumsauswahl: Typ ist erforderlich, Steuerelementtyp (Datum, Woche, Monat, Jahr, Daten)

<el-date-picker type="date" v-model="value1" placeholder="Wählen Sie ein Datum"> </el-date-picker>

Auswahlfelder für Start- und Enddatum: erforderlicher Typ, Kontrolltyp (Datumsbereich, Wochenbereich, Monatsbereich, Jahresbereich)

<el-date-picker v-model="value1" type="daterange" range-separator="bis" start-placeholder="Startdatum" end-placeholder="Enddatum"> </el-date-picker>

Datums-/Uhrzeitauswahl: muss vom Typ „datetime“ sein

<el-date-picker type="datetime" v-model="value1" placeholder="Datum und Uhrzeit auswählen"> </el-date-picker>

Start- und Enddatum-/Zeitauswahl: muss vom Typ „datetimerange“ sein, mit der Standardzeit kann die Standardzeit festgelegt werden

<el-date-picker type="datetimerange" v-model="value1" range-separator="bis" start-placeholder="Startdatum" end-placeholder="Enddatum"> </el-date-picker>

Klasse auswählen

Alle ausgewählten Formularelemente haben Optionen, die Optionen ähneln. Beachten Sie, dass der Wert des Modells mit dem Attributwert in der Option verknüpft ist.
Das grundlegende einheitliche Muster der Option ist {label:'was Sie sehen', value:'der im Hintergrund übermittelte Wert'}, aber Radio und Chebox sind sehr seltsam, die Label-Option ist tatsächlich der Wert, also seien Sie beim Schreiben besonders vorsichtig! ! !

Optionsfeld: Der an das Modell gebundene Wert ist der Beschriftungswert des ausgewählten Elements. Der Modellwert ist das Standardelement. Wenn nicht definiert, gibt es kein Standardelement. Grenze wird eine Grenze haben. Wenn Sie es in einen Button-Stil umwandeln möchten, verwenden Sie el-radio-button

  <!-- Optionen: [{ Wert:1, Bezeichnung: ‚Golden Cake‘ }, { Wert:1, Bezeichnung: ‚Doppelhautmilch‘ }] -->
  <el-radio-group v-model="radio">
    <el-radio v-for="Element in Optionen" :key="Element.Wert" :label="Element.Wert" >{{Element.Label}}</el-radio>
  </el-radio-gruppe>

Kontrollkästchen: Der Modellwert hat zwei Typen: Boolean und Array. Bei Boolean bedeutet es, ob alle Optionen aktiviert sind. Array, der Beschriftungswert des ausgewählten Elements wird im Array angezeigt. Wenn „indeterminate“ wahr ist, weist dies auf eine teilweise Auswahl hin, die verwendet wird, um den Effekt der Allesauswahl zu erzielen. Grenze ist die Grenze
el-checkbox-group-Tag, min und max geben die Anzahl der markierten Elemente an, size ist die Größe und el-checkbox-button ist die Schaltflächenform

<el-checkbox v-model="checked" indeterminate>Alles auswählen</el-checkbox>
  <el-checkbox-group v-model="Checkliste">
    <!-- Optionen: [{ Wert:1, Bezeichnung: ‚Golden Cake‘ }, { Wert:1, Bezeichnung: ‚Doppelhautmilch‘ }] -->
    <el-checkbox v-for="Element in Optionen" :key="Element.Wert" :label="Element.Wert">{{Element.Label}}</el-checkbox>
  </el-checkbox-group>

Dropdown-Feld: Der Wert des Modells ist der Wert der ausgewählten Option. Die deaktivierte Einstellung kann nicht ausgewählt werden. Wenn Sie gruppieren müssen, verwenden Sie el-option-group. Informationen zur Remote-Suche und zum Erstellen von Einträgen finden Sie auf der offiziellen Website
el-select kann eingestellt werden: clearable zum Löschen, multiple zum Auswählen mehrerer Optionen (bei Auswahl mehrerer Optionen muss der Wert ein Array sein), filterable zum Suchen nach Optionen
el-option kann gesetzt werden: slot setzt einen benutzerdefinierten Stil

  <!-- Optionen: [{ Wert:1, Bezeichnung: ‚Golden Cake‘ }, { Wert:1, Bezeichnung: ‚Doppelhautmilch‘ }] -->
  <el-select v-model="Wert" Platzhalter="Bitte auswählen">
    <el-option v-for="Element in Optionen" :key="Element.Wert" :label="Element.Label" :value="Element.Wert"> </el-option>
  </el-Auswahl>

Kaskadierende Dropdown-Box: Das Modell ist ein Array und der Index entspricht der Ebene. Optionen ähneln dem rekursiven Modus ([{value:1,label:'bj',children:[{value:2,label:'haidian'}]}]), der Standardauslöser ist Klicken, Sie können schweben: props={expandTrigger:'hover'}

<el-cascader v-model="Wert" :Optionen="Optionen" @change="handleChange"></el-cascader>

Andere Kategorien

Schalter: Der Modellwert ist Boolean. Sie können die Attribute „active-color“ und „inactive-color“ verwenden, um die Hintergrundfarbe des Schalters festzulegen.

<el-switch v-model="Wert" aktiv-color="#13ce66" inaktiv-color="#ff4949"> </el-switch>

Schieberegler: Der Standardwert ist 0-100. Mit formatTooltip können Sie den angezeigten Wert formatieren.

<el-slider v-model="Wert1" :format-tooltip="formatTooltip"></el-slider>

Bewertung, Farbe, Shuttle-Rahmen, nutzlos, ich werde darüber sprechen, wenn ich es benutze~~

Hochladen: Es ist ziemlich kompliziert, ich werde hier nur auflisten, was ich weiß. „Accept“ begrenzt das Format der hochgeladenen Dateien, „Auto-Upload“ gibt an, ob automatisch hochgeladen werden soll, begrenzt die Anzahl der Uploads, „File-List“ zeigt die Liste der Dateien an, „List-Type“ zeigt die Methode an, „On-Exceed“ überschreitet die Anzahl der Dateien, „On-Change“ ändert die Datei und „On-Remove“ entfernt die Datei. Die Standardparameter von Hooks sind meistens Datei und Dateiliste.

• Die Dateiliste muss grundsätzlich mit computed.exe berechnet werden, da im Bearbeitungszustand direkte Bildverweise vorhanden sein sollen.
• Die erste Datei kann hierüber hochgeladen werden: $refs.eventImage.uploadFiles[0].raw
• Bei der Überprüfung kann manchmal nicht genau festgestellt werden, ob der Wert der Datei vorhanden ist, und es ist erforderlich, die Regeln nach jedem Upload manuell festzulegen. Um den Fehler zu beheben, dass das Hochladen desselben Bildes möglicherweise nicht funktioniert, müssen Sie nach jedem Upload this.$refs[ref name].value = '' festlegen.

<el-upload ref="eventImage" accept="image/*" :auto-upload="false" action="" :limit="1" :file-list="Hochgeladene Dateiliste" list-type="Bildkarte" :on-exceed="Datei überschreiten" :on-change="Datei ändern" :on-remove="Bild entfernen" ></el-upload>

Damit ist dieser Artikel mit der Zusammenfassung der Verwendung von Elementformularelementen abgeschlossen. Weitere relevante Elementformularinhalte finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!