Schritte zum Kapseln von Element-UI-Popupkomponenten

Kapseln Sie el-dialog als Komponente ein

Wenn wir Element-UI verwenden und ein Popup-Fenster viel Inhalt enthält, kapseln wir das Popup-Fenster häufig wie folgt in eine Komponente:

<!-- DetailDialog.vue html -->
<Vorlage>
 <el-dialog title="Titel" :visible.sync="sichtbar" width="720px" >
  <p>Popup-Inhalt</p>
 </el-dialog>
</Vorlage>

// DetailDialog.vue js
<Skript>
 Requisiten: {
  sichtbar:
   Typ: Boolean,
   Standard: false
  }
 }
</Skript>

el-dialog ändert die Eigenschaften und meldet einen Fehler

Es wird jedoch ein Problem geben. Wenn das Schließereignis im el-dialog ausgelöst wird, z. B. durch Klicken auf den Popup-Schatten, wird ein Ereignis ausgegeben, um die Requisiten [sichtbar] der aktuellen Komponente zu ändern. Da die Komponente das Requisitenattribut nicht direkt ändern kann, wird ein Fehler gemeldet.

Wir haben eine Zwischenvariable innerVisible hinzugefügt, um die Änderung und den Erwerb von Requisiten abzufangen [sichtbar]

<!-- DetailDialog.vue html -->
<Vorlage>
 <el-dialog title="Titel" :visible.sync="innerVisible" width="720px" >
  <p>Popup-Inhalt</p>
 </el-dialog>
</Vorlage>

// DetailDialog.vue js
<Skript>
Standard exportieren {
 Requisiten: {
  sichtbar:
   Typ: Boolean,
   Standard: false
  }
 },
 berechnet: {
  innerVisible: {
   bekomme: Funktion() {
    gib dies zurück.sichtbar
   },
   setze: Funktion(Wert) {
    dies.$emit('update:sichtbar', val)
   }
  }
 }
}
</Skript>

Auf diese Weise benachrichtigen wir beim Ändern von prop[visible] innerhalb von el-dialog die übergeordnete Komponente über emit('update:'), um eine direkte Änderung von Props zu vermeiden. Natürlich muss die übergeordnete Komponente den Synchronisierungsmodifikator hinzufügen, um die Änderung zu akzeptieren:

<!-- Vater.vue html -->
<DetailDialog :visible.sync="detailSichtbar" />

Bisher gibt es mit der gekapselten Popup-Komponente keine Probleme.

Optimieren Sie weiter und verwenden Sie das V-Modell, um die Anzeige und das Ausblenden zu steuern

// DetailDialog.vue js
<Skript>
Standard exportieren {
 Modell: {
  prop: 'visible', // Ändere den Namen der an das V-Model gebundenen Requisiten. event: 'toggle' // Ändere den Namen des benutzerdefinierten Ereignisses, das an das V-Model gebunden ist. },
 Requisiten: {
  sichtbar:
   Typ: Boolean,
   Standard: false
  }
 },
 berechnet: {
  innerVisible: {
   bekomme: Funktion() {
    gib dies zurück.sichtbar
   },
   setze: Funktion(Wert) {
    dies.$emit('update:toggle', val)
   }
  }
 }
}
</Skript>

Nach der Verbindung mit dem V-Modell ist die Verwendung eleganter und übersichtlicher.

<!-- Vater.vue html -->
<DetailDialog v-model="detailSichtbar" />

Weiter optimieren und in Mixins kapseln

Wenn Popup-Komponenten häufig gekapselt werden, muss die obige Logik auch ständig kopiert werden. Optimieren Sie daher weiterhin die obige Steuerungsanzeige und die Ausblendlogik und kapseln Sie sie in MXins, die direkt wiederverwendet werden können.

// vModelDialog.js
Standard exportieren {
 Modell: {
  Requisite: "sichtbar",
  Ereignis: ‚Umschalten‘
 },
 Requisiten: {
  sichtbar:
   Typ: Boolean,
   Standard: () => {
    return false
   }
  }
 },
 berechnet: {
  innerVisible: {
   bekomme: Funktion() {
    gib dies zurück.sichtbar
   },
   setze: Funktion(Wert) {
    dies.$emit('umschalten', val)
   }
  }
 }
}

Wenn Sie dann das Popup-Plug-In kapseln, müssen Sie nur Mixins einführen, um die Anzeige- und Ausblendlogik zu vervollständigen.

// DetailDialog.vue js
<Skript>
Importieren Sie vModelDialog aus „./vModelDialog.js“.
Standard exportieren {
 Mixins: [vModelDialog],
}
</Skript>

Oben finden Sie den detaillierten Inhalt der Schritte zum Verpacken von Element-UI-Popup-Komponenten. Weitere Informationen zum Verpacken von Element-UI-Popup-Komponenten finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!