Vue imitiert den Formularbeispielcode von ElementUI

Implementierungsanforderungen

Das ElementUI imitierende Formular ist in vier Ebenen unterteilt: Indexkomponente, Formularkomponente, FormItem-Formularelementkomponente, Input- und CheckBox-Komponenten. Die spezifische Arbeitsteilung ist wie folgt:

Indexkomponente:

• Implementierung: Führen Sie jeweils die Formularkomponente, die FormItem-Komponente und die Eingabekomponente ein, um die Assembly zu realisieren.

Formularkomponente:

• Implementierung: reservierte Slots, Management-Datenmodell-Modell, benutzerdefinierte Validierungsregeln, globale Validierungsmethode validieren;

FormItem-Formularelementkomponente:

• Implementierung: Slots reservieren, Beschriftungen anzeigen, Datenüberprüfung durchführen und Überprüfungsergebnisse anzeigen;

Eingabe- und Kontrollkästchenkomponenten:

• Implementierung: Binden Sie das Datenmodell V-Modell und benachrichtigen Sie die FormItem-Komponente, um eine Validierung durchzuführen.

Eingabekomponente

Die konkrete Umsetzung sieht wie folgt aus:

1. Benutzerdefinierte Komponenten müssen :value und @input implementieren, um v-model zu implementieren.

2. Wenn sich die Daten im Eingabefeld ändern, benachrichtigen Sie die übergeordnete Komponente, damit sie eine Überprüfung durchführen kann.

3. Wenn der Typ der Eingabekomponente ein Kennwort ist, verwenden Sie v-bind="$attrs" innerhalb der Komponente, um andere Inhalte als Requisiten zu erhalten.

4. Setzen Sie inheritAttrs auf „false“, um zu verhindern, dass der Container der obersten Ebene Attribute erbt.

Implementierung der Eingabekomponente:

<Vorlage>
 <div>
 <input :value="Wert" @input="onInput" v-bind="$attrs" />
 </div>
</Vorlage>

<Skript>
Standard exportieren {
 inheritAttrs: false, // Vermeiden Sie die Vererbung von Eigenschaften durch Container der obersten Ebene props: {
 Wert: {
 Typ: Zeichenfolge,
 Standard: ""
 }
 },
 Daten() {
 zurückkehren {};
 },
 Methoden: {
 beiEingabe(e) {
 // Benachrichtigen Sie die übergeordnete Komponente über die Wertänderung this.$emit("input", e.target.value);
 
 // FormItem benachrichtigen, um eine Validierung durchzuführen // Diese Schreibmethode ist nicht robust, da zwischen der Eingabekomponente und der FormItem-Komponente möglicherweise Generationen vorhanden sind. this.$parent.$emit("validate");
 }
 }
};
</Skript>

<Stilbereich></Stil>

Hinweis: Der Code verwendet this.$parent, um Ereignisse zu versenden. Diese Schreibmethode ist nicht robust und verursacht Probleme, wenn zwischen der Input-Komponente und der FormItem-Komponente eine Generationslücke besteht. Spezifische Lösungen finden Sie im Abschnitt zur Codeoptimierung am Ende des Artikels.

CheckBox-Komponente

1. Passen Sie die bidirektionale Datenbindung von checkBox an, die der Eingabe ähnelt. Sie müssen :checked und @change implementieren.

Implementierung der CheckBox-Komponente:

<Vorlage>
 <Abschnitt>
 <input type="checkbox" :checked="aktiviert" @change="beiÄnderung" />
 </Abschnitt>
</Vorlage>

<Skript>

Standard exportieren {
 Requisiten: {
 geprüft:
 Typ: Boolean,
 Standard: false
 }
 },
 Modell: {
 Requisite: "geprüft",
 Ereignis: „Ändern“
 },
 Methoden: {
 beiÄnderung(e) {
 this.$emit("ändern", e.target.checked);
 dies.$parent.$emit("validieren");
 }
 }
};
</Skript>
<style scoped lang="weniger"></style>

FormItem-Komponente

Die konkrete Umsetzung sieht wie folgt aus:

1. Reservieren Sie einen Steckplatz für die Eingabekomponente oder die Kontrollkästchenkomponente.

2. Wenn der Benutzer das Label-Attribut für die Komponente festlegt, sollte das Label-Tag angezeigt werden.

3. Achten Sie auf Validierungsereignisse und führen Sie die Validierung durch (verwenden Sie zur Validierung das Plugin „async-validator“).

4. Wenn die Verifizierungsregeln nicht eingehalten werden, müssen die Verifizierungsergebnisse angezeigt werden.

Während des Entwicklungsprozesses müssen wir über verschiedene Aspekte nachdenken:

1. Wie erhält man die Daten und Verifizierungsregeln, die innerhalb der Komponente verifiziert werden müssen?

2. Das Formular enthält mehrere Menüelemente, z. B.: Benutzername, Passwort, E-Mail usw. Woher weiß die FormItem-Komponente, welches Menü überprüft wird?

Implementierung der FormItem-Komponente:

<Vorlage>
 <div Klasse="formItem-wrapper">
 <div Klasse="Inhalt">
 <label v-if="label" :style="{ width: Etikettenbreite }">{{ label }}:</label>
 <Steckplatz></Steckplatz>
 </div>
 <p v-if="Fehlernachricht" class="errorStyle">{{ Fehlernachricht }}</p>
 </div>
</Vorlage>

<Skript>
Schema von „async-validator“ importieren;

Standard exportieren {
 einfügen: ["formModel"],
 Requisiten: {
 Etikett: {
 Typ: Zeichenfolge,
 Standard: ""
 },
 Requisite: Zeichenfolge
 },
 Daten() {
 zurückkehren {
 Fehlermeldung: "",
 Beschriftungsbreite: dieses.Formmodell.Beschriftungsbreite
 };
 },
 montiert() {
 // Auf Validierungsereignisse warten und Validierung durchführen this.$on("validate", () => {
 dies.validieren();
 });
 },
 Methoden: {
 validieren() {
 // Komponentenüberprüfung ausführen // 1. Daten abrufen const values ​​= this.formModel.model[this.prop];
 // 2. Überprüfungsregeln abrufen const rules = this.formModel.rules[this.prop];
 // 3. Überprüfung ausführen const schema = new Schema({
 [this.prop]: Regeln
 });

 // Parameter 1 ist der Wert und Parameter 2 ist ein Array von Validierungsfehlerobjekten. // validate gibt Promise<Boolean> zurück
 return schema.validate({ [this.prop]: Werte }, Fehler => {
 wenn (Fehler) {
 this.errorMessage = Fehler[0].Nachricht;
 } anders {
 diese.Fehlernachricht = "";
 }
 });
 }
 }
};
</Skript>

<style scoped lang="weniger">
@Etikettenbreite: 90px;

.formItem-wrapper {
 Polsterung unten: 10px;
}
.Inhalt {
 Anzeige: Flex;
}
.FehlerStil {
 Schriftgröße: 12px;
 Farbe: rot;
 Rand: 0;
 Polsterung links: @labelWidth;
}
</Stil>

Lassen Sie uns zunächst die beiden oben gestellten Fragen beantworten. Dabei geht es um die Wertübertragung zwischen Komponenten. Sie können sich auf den vorherigen Artikel „Komponentenwertübertragung und Kommunikation“ beziehen:
Zunächst werden die Formulardaten und Validierungsregeln innerhalb der Indexkomponente definiert und an die Formularkomponente angehängt. Die Formularvalidierungselemente kommen in der FormItem-Komponente vor. Die Formularkomponente empfängt die übergebenen Daten zunächst über Props und übergibt sie dann über Provide/Inject an die untergeordneten Komponenten in der FormItem-Komponente.

Wenn wir die Formularvalidierung von ElementUI in unserem täglichen Leben verwenden, stellen wir fest, dass für jedes zu validierende Formular ein Prop-Attribut festgelegt ist und der Attributwert mit den gebundenen Daten übereinstimmt. Der Zweck besteht hierbei darin, die relativen Validierungsregeln und Datenobjekte abrufen zu können, wenn die Validierung in der FormItem-Komponente durchgeführt wird.

In der FormItem-Komponente wird „inject“ verwendet, um die injizierte Formularinstanz abzurufen. In Kombination mit dem Prop-Attribut können die Formulardaten und Validierungsregeln abgerufen werden.

// 1. Daten abrufen const values ​​= this.formModel.model[this.prop];

// 2. Überprüfungsregeln abrufen const rules = this.formModel.rules[this.prop];

Verwenden Sie das Plug-In „async-validator“, um ein Schemaobjekt zur Validierung zu instanziieren. schema.validate muss zwei Parameter übergeben. Parameter 1 ist ein Schlüssel-Wert-Paar-Objekt, das aus dem aktuell zu validierenden Feld und den entsprechenden Regeln besteht. Parameter 2 ist eine Rückruffunktion, die zum Abrufen von Fehlerinformationen (ein Array) verwendet wird. Die Validierungsmethode gibt ein Promise<Boolean> zurück.

Hinweis: In der Validierungsmethode dieser Komponente besteht der Zweck der Verwendung von „return“ am Ende darin, eine globale Validierung in der Formularkomponente durchzuführen.

Formularkomponente

Die konkrete Umsetzung sieht wie folgt aus:

1. Reservieren Sie einen Steckplatz für die FormItem-Komponente.

2. Übergeben Sie die Formularinstanz an Nachkommen, z. B. FormItem, um Validierungsdaten und -regeln zu erhalten.

3. Führen Sie eine globale Überprüfung durch

Implementierung der Formularkomponente:

<Vorlage>
 <div>
 <Steckplatz></Steckplatz>
 </div>
</Vorlage>

<Skript>
Standard exportieren {
 bieten() {
 zurückkehren {
 formModel: this // Übergeben Sie die Formularinstanz an Nachkommen, z. B. FormItem, um Validierungsdaten und -regeln zu erhalten};
 },
 Requisiten: {
 Modell: {
 Typ: Objekt,
 erforderlich: true
 },
 Regeln:
 Typ: Objekt
 },
 Beschriftungsbreite: Zeichenfolge
 },
 Daten() {
 zurückkehren {};
 },
 Methoden: {
 validieren(cb) {
 //Globale Validierung durchführen //Das Map-Ergebnis ist ein Array von Promises const tasks = this.$children.filter(item => item.prop).map(item => item.validate());
 // Alle Aufgaben müssen erfolgreich verifiziert werden, um als verifiziert zu gelten Promise.all(tasks)
 .then(() => {
 cb(wahr);
 })
 .fangen(() => {
 cb(falsch);
 });
 }
 }
};
</Skript>

<Stilbereich></Stil>

Wir verwenden „provide“ in der Formularkomponente, um das aktuelle Komponentenobjekt einzufügen, wodurch es für nachfolgende Nachkommen einfacher wird, Daten/Methoden abzurufen.

Wenn Sie eine globale Validierung durchführen, filtern Sie zuerst die Komponenten mit einem Filter heraus, die nicht validiert werden müssen (das von uns für die FormItem-Komponente festgelegte Prop-Attribut muss validiert werden, solange dieses Attribut vorhanden ist). Führen Sie dann die Validierungsmethode separat in der Komponente aus (wenn in der FormItem-Komponente keine Rückgabedaten verwendet werden, sind alle am Ende erhaltenen Daten undefiniert) und geben Sie ein Array von Promises zurück.

Stellen Sie kurz eine Promise.all()-Methode vor:

Die Methode Promise.all() empfängt eine Eingabe eines iterierbaren Promise-Typs (Hinweis: Array, Map, Set gehören alle zum iterierbaren Typ von ES6) und gibt nur eine Promise-Instanz zurück. Das Ergebnis des Resolve-Callbacks aller Promises dieser Eingabe ist ein Array. Der Resolve-Callback dieses Promise wird ausgeführt, wenn die Resolve-Callbacks aller Eingabe-Promises abgeschlossen sind oder wenn im iterierbaren Eingabe-Objekt keine Promises vorhanden sind. Sein Ablehnungs-Rückruf wird ausgeführt. Solange der Ablehnungs-Rückruf eines beliebigen Eingabe-Promises ausgeführt wird oder ein ungültiges Promise eingegeben wird, wird sofort ein Fehler ausgegeben und die erste ausgegebene Fehlermeldung wird abgelehnt.

Indexkomponente

Definieren Sie Modelldaten, Validierungsregeln usw. und führen Sie Formularkomponenten, FormItem-Komponenten und Eingabekomponenten ein, um die Assembly zu implementieren.

Implementierung der Indexkomponente:

<Vorlage>
 <div>
 <Formular :model="formModel" :rules="Regeln" ref="loginFormular" label-width="90px">
 <FormItem label="Benutzername" prop="Benutzername">
 <Eingabe v-model="formModel.Benutzername"></Eingabe>
 </FormItem>
 <FormItem label="Passwort" prop="Passwort">
 <Eingabetyp="Passwort" v-model="formModel.password"></Eingabe>
 </FormItem>
 <FormItem label="Passwort merken" prop="remember">
 <CheckBox v-model="formModel.remember"></CheckBox>
 </FormItem>
 <Formularelement>
 <button @click="onLogin">Anmelden</button>
 </FormItem>
 </Form>
 </div>
</Vorlage>

<Skript>
Eingabe aus "@/components/form/Input" importieren;
CheckBox aus '@/components/form/CheckBox' importieren
FormItem aus "@/components/form/FormItem" importieren;
Formular aus "@/components/form/Form" importieren;

Standard exportieren {
 Daten() {
 const validateName = (Regel, Wert, Rückruf) => {
 wenn (!Wert) {
 Rückruf (neuer Fehler („Benutzername darf nicht leer sein“));
 } sonst wenn (Wert !== "admin") {
 Rückruf (neuer Fehler („Benutzername-Fehler – Administrator“));
 } anders {
 Rückruf();
 }
 };
 const validatePass = (Regel, Wert, Rückruf) => {
 wenn (!Wert) {
 Rückruf (falsch);
 } anders {
 Rückruf();
 }
 };
 zurückkehren {
 formModel: {
 Benutzername: "",
 Passwort: "",
 merken: falsch
 },
 Regeln:
 Benutzername: [{ erforderlich: true, Validator: validateName }],
 Passwort: [{ erforderlich: true, Nachricht: "Passwort erforderlich" }],
 merken: [{ erforderlich: true, Nachricht: "Passwort merken erforderlich", Validator: validatePass }]
 }
 };
 },
 Methoden: {
 beiAnmeldung() {
 dies.$refs.loginForm.validate(isValid => {
 wenn (ist gültig) {
 alert("Anmeldung erfolgreich");
 } anders {
 alert("Anmeldung fehlgeschlagen");
 }
 });
 }
 },
 Komponenten:
 Eingang,
 Kontrollkästchen,
 FormItem,
 Bilden
 }
};
</Skript>

<Stilbereich></Stil>

Wenn wir auf die Anmeldeschaltfläche klicken, wird die globale Validierungsmethode ausgeführt und wir können this.$refs.xxx verwenden, um das DOM-Element und die Komponenteninstanz abzurufen.

Wir haben auch einen kleinen Schwanz über ~ gelassen, der die übergeordnete Komponente benachrichtigt, eine Überprüfung in der Eingabekomponente durchzuführen. Derzeit wird this.$parent.$emit() verwendet. Dies hat jedoch einen Nachteil. Wenn die Eingabekomponente und die FormItem-Komponente durch Generationen getrennt sind, kann die FormItem-Komponente nicht durch Verwendung von this.$parent abgerufen werden.
Wir können eine Dispatch-Methode kapseln, die hauptsächlich die Aufwärtsschleife implementiert, um das übergeordnete Element zu finden und Ereignisse zu versenden. Der Code lautet wie folgt:

dispatch(Ereignisname, Daten) {
 lass übergeordnetes Element = dies.$übergeordnetes Element;
 // Suche das übergeordnete Element while (parent) {
 // Das übergeordnete Element wird durch $emit ausgelöst parent.$emit(eventName, data);
 // Rekursiv nach dem übergeordneten Element suchen parent = parent.$parent;
 }
}

Diese Methode kann mithilfe von Mixins eingeführt werden: mixins/emmiters.js

Standard exportieren {
 Methoden: {
 dispatch(Ereignisname, Daten) {
 lass übergeordnetes Element = dies.$übergeordnetes Element;
 // Suche das übergeordnete Element while (parent) {
 // Das übergeordnete Element wird durch $emit ausgelöst parent.$emit(eventName, data);
 // Rekursiv nach dem übergeordneten Element suchen parent = parent.$parent;
 }
 }
 }
};

Ändern Sie die Eingabekomponente:

<Vorlage>
 <div>
 <input :value="Wert" @input="onInput" v-bind="$attrs" />
 </div>
</Vorlage>

<Skript>
importiere Emmiter von „@/mixins/emmiter“;

Standard exportieren {
 inheritAttrs: false, // Vererbung von Attributen für Container der obersten Ebene vermeiden mixins: [emmiter],
 Requisiten: {
 Wert: {
 Typ: Zeichenfolge,
 Standard: ""
 }
 },
 Daten() {
 zurückkehren {};
 },
 Methoden: {
 beiEingabe(e) {
 // Benachrichtigen Sie die übergeordnete Komponente über die Wertänderung this.$emit("input", e.target.value);
 
 // FormItem benachrichtigen, um eine Validierung durchzuführen // Dieser Ansatz ist nicht robust, da zwischen der Input-Komponente und der FormItem-Komponente Generationen vorhanden sein können // this.$parent.$emit("validate");
 
 this.dispatch("validate"); //Verwenden Sie den Dispatch von Emmiter im Mixin, um das ebenenübergreifende Problem zu lösen}
 }
};
</Skript>

<Stilbereich></Stil>

Zusammenfassen

Dies ist das Ende dieses Artikels über Vue, das das ElementUI-Formular imitiert. Weitere relevante Inhalte zu Vue, das das ElementUI-Formular imitiert, finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!