Vue Element Front-End-Anwendungsentwicklung Konventionelle Element-Schnittstellenkomponenten

1. Listenschnittstelle und andere Modulanzeigeverarbeitung

Die herkömmliche Listenanzeigeoberfläche ist im Allgemeinen in mehrere Bereiche unterteilt: Einer ist der Abfragebereich, einer ist der Listenanzeigebereich und einer ist der Paging-Komponentenbereich unten. Der Abfragebereich wird hauptsächlich für das Layout allgemeiner Bedingungen verwendet, und es werden einige globale oder Stapeloperationen hinzugefügt, wie z. B. Importieren, Exportieren, Hinzufügen, Stapeln hinzufügen, Stapeln löschen und andere Schaltflächen; der Hauptlistenanzeigebereich ist relativ komplex und erfordert eine benutzerfreundlichere Anzeige verschiedener Daten. Er kann in Kombination mit Tags, Symbolen, Schaltflächen und anderen Schnittstellenelementen angezeigt werden. Die Liste enthält im Allgemeinen einige Operationen zum Verarbeiten einzeiliger Datensätze, wie z. B. Anzeigen, Bearbeiten und Löschen. Wenn es sich um eine Stapellöschung handelt, kann sie im oberen Schaltflächenbereich platziert werden.

Die normalen Schaltflächen, Tabellen und Paging-Komponenten haben wir bereits zuvor vorgestellt und werden sie hier daher nicht wiederholen.

Bevor wir die spezifischen Schnittstellenkomponenten vorstellen, wollen wir uns zunächst mit dem allgemeinen Schnittstellenlayout befassen. Wir haben die reguläre Listenschnittstelle sowie die Schnittstellen „Hinzufügen“, „Bearbeiten“, „Anzeigen“, „Importieren“ und andere zusammengefügt. Mit Ausnahme der Listenseite werden andere Inhalte in Form von Popup-Dialogfeldern behandelt, wie im folgenden Schnittstellendiagramm dargestellt.

Der Eigenschaftswert :visible jedes Dialogfelds bestimmt, welches modale Dialogfeld angezeigt oder ausgeblendet wird.

Im Vue JS-Modul definieren wir zusätzlich zur Definition der im entsprechenden Dialogfeld angezeigten Variablen für jedes Dialogfeld Formularinformationen für die bidirektionale Datenbindung.

Die Definition allgemeiner Inhalte zum Hinzufügen, Bearbeiten, Anzeigen, Importieren und anderen wird als Dialogkomponente definiert. Der Verwendungscode der allgemeinen Dialogkomponente lautet wie folgt.

<el-dialog
  Titel="Tipps"
  :visible.sync="dialogSichtbar"
  Breite="30%"
  :before-close="handleClose">
  <span>Dies ist eine Nachricht</span>
  <span slot="Fußzeile" class="dialog-footer">
    <el-button @click="dialogVisible = false">Abbrechen</el-button>
    <el-button type="primary" @click="dialogVisible = false">OK</el-button>
  </span>
</el-dialog>

Um den Stil des Dialogfelds zu steuern, achten wir auf den Schlitz in der Fußzeile. Normalerweise platzieren wir hier die Verarbeitungsschaltflächen. Für das Dialogfeld der Anzeigeoberfläche definieren wir es beispielsweise wie folgt.

Generell gilt: Bei Szenarien mit viel Formularinhalt teilen wir diesen normalerweise zur Anzeige oder Eingabe auf mehrere Registerkarten auf, was die Verwaltung erleichtert. Die Gesamtwirkung der Schnittstelle ist unten dargestellt.

Für die Datenbindung des Dialogfelds fordern wir vor dem Öffnen des Dialogfelds zunächst die JSON-Daten über das API-Modul an und binden sie dann an das entsprechende Dialogfeldmodellattribut. Für die Anzeigeschnittstelle lautet unsere Verarbeitungslogik beispielsweise wie folgt.

Ansicht anzeigen(id) {
      var param = { id: id }
      GetProductDetail(param).then(data => {
        Objekt.zuweisen(this.viewForm, Daten);
      })
      dies.isView = true
    },

Beim Doppelklicken auf die Tabelle binden wir auch ihren Verarbeitungsvorgang zum Anzeigen von Details ein, wie im folgenden Vorlagencode und JS-Code gezeigt.

Der HTML-Code der Vorlage lautet wie folgt:

<el-Tabelle
  v-loading="Liste wird geladen"
  :data="Produktliste"
  Grenze
  fit
  Streifen
  Aktuelle Zeile hervorheben
  :header-cell-style="{Hintergrund:'#eef1f6',Farbe:'#606266'}"
  @selection-change="AuswahlÄnderung"
  @row-dblclick="rowDbklick"
>

Der JS-Logikcode lautet wie folgt

rowDbclick(Zeile, Spalte) {
      var id = Zeile.ID
      diese.showView(id);
    },

2. Verwendung herkömmlicher Schnittstellenkomponenten

Wenn wir Schnittstellenkomponenten verwenden, verweisen wir im Allgemeinen auf die offizielle Website „Element Component Usage“ und finden den Code der entsprechenden Komponente als Referenz. Hier finden Sie eine kurze Einführung in verschiedene gängige Elementkomponenten.

1) Formulare und Formularelemente, einzelne Textfelder

Für das Formular definieren wir im Allgemeinen einen entsprechenden Namen und legen den Modellnamen entsprechend seinen Daten fest, wie unten gezeigt.

<el-form ref="Ansichtsformular" :model="Ansichtsformular" label-width="80px">

Bei Formularelementen müssen Sie normalerweise nur die Bezeichnung des Formularelements definieren und dann das entsprechende Eingabe- oder Anzeigesteuerelement darin einfügen. Zur Verwendung mit einer einzelnen Textkomponente, wie unten gezeigt.

 <el-form-item label="Produktnummer">
   <el-input v-model="editForm.ProduktNr" />
 </el-form-item>

Unter ihnen sind v-model="editForm.ProductNo" die entsprechenden gebundenen Daten.

Bei Formularelementen können Sie den Feldern eine Validierungsverarbeitung hinzufügen und vor dem Absenden der Daten prüfen, ob die Eingabe des Kunden gültig ist.

<el-form-item
    prop="E-Mail"
    label="Postfach"
    :Regeln="[
      { erforderlich: true, Nachricht: ‚Bitte geben Sie Ihre E-Mail-Adresse ein‘, Auslöser: ‚unscharf‘ },
      { Typ: 'E-Mail', Nachricht: 'Bitte geben Sie eine gültige E-Mail-Adresse ein', Auslöser: ['Verwischen', 'Ändern'] }
    ]"
  >
    <el-input v-model="dynamicValidateForm.email"></el-input>
  </el-form-item>

Beachten Sie, dass Sie für dieses Formularelement eine Prop-Attributeinstellung hinzufügen müssen, z. B. prop="email".

Um das Layout zu steuern, kombinieren wir im Allgemeinen auch el-row, um einen Layoutprozess durchzuführen, wie im folgenden Code gezeigt (eine Zeile entspricht einer Spanne von 24, Spanne = 12 bedeutet, dass zwei Kontrollgruppen in einer Zeile platziert werden).

<el-Zeile>
  <el-col :span="12">
    <el-form-item label="Produktnummer">
      <el-input v-model="editForm.ProduktNr" />
    </el-form-item>
  </el-col>
  <el-col :span="12">
    <el-form-item label="Strichcode">
      <el-input v-model="editForm.BarCode" />
    </el-form-item>
  </el-col>
</el-row>

2) Bindung der Dropdown-Listensteuerung

Der Bindungsprozess der Dropdown-Liste besteht auch darin, den Wert über das V-Modell zu binden, während die Optionen über die Datenliste gebunden werden können.

<el-form-item label="Produkttyp">
  <el-select v-model="editForm.ProductType" filterable="" placeholder="Bitte auswählen">
    <el-Option
      v-for="(Element, Schlüssel) in Typliste"
      :Schlüssel="Schlüssel"
      :label="Artikel.Wert"
      :Wert="Artikel.Schlüssel"
    />
  </el-Auswahl>
</el-form-item>

Was die Typliste in den Optionen betrifft, können wir sie abrufen, wenn die Seite initialisiert wird.

erstellt() {
    // Produkttyp für Bindungswörterbücher usw. abrufen GetProductType().then(data => {
      wenn (Daten) {
        Daten.fürJeden(Element => {
          this.productTypes.set(Artikel-ID, Artikelname)
          this.typeList.push({ Schlüssel: Artikel-ID, Wert: Artikelname })
        })

        // Listeninformationen abrufen this.getlist()
      }
    });
  },

Bei einem normalen mehrzeiligen Textfeld ist die Verarbeitung ähnlich wie bei einem normalen einzeiligen Textfeld. Geben Sie einfach den Typ „textarea“ und den Wert „rows“ an.

<el-tab-pane label="Beschreibung" name="zweite">
    <el-form-item label="Beschreibung">
      <el-input v-model="editForm.Description" type="textarea" :rows="10" />
    </el-form-item>
  </el-tab-pane>

Für einige Inhalte, die möglicherweise HTML anzeigen müssen, können wir das DIV-Steuerelement zur Anzeige verwenden und das v-html-Tag zum Verarbeiten von Inhalten, die HTML-Code enthalten.

 <el-tab-pane label="Details">
    <el-form-item label="Detaillierte Beschreibung">
      <div Klasse = "border-radius" v-html = "viewForm.Note" />
    </el-form-item>
  </el-tab-pane>

3) Bildanzeige

Für einige Serverbilder, die angezeigt werden müssen, können wir sie gemäß den Einstellungen der Elementbildkomponente anfordern und verarbeiten. Im Folgenden sind die Anzeige- und Vorschauvorgänge für einzelne und mehrere Bilder aufgeführt.

Der Code für die Bildanzeige ist weiter unten dargestellt.

<el-tab-pane label="Bildinformationen">
    <el-form-item label="Titelbild">
      <el-Bild
        Stil="Breite: 100px; Höhe: 100px"
        :src="Formularansicht.Bild"
        :preview-src-list="[Ansichtsformular.Bild]"
      />
    </el-form-item>
    <el-form-item label="Bannerbild">
      <el-Bild
        Stil="Breite: 100px; Höhe: 100px"
        :src="Formular anzeigen.Banner"
        :preview-src-list="[viewForm.Banner]"
      />
    </el-form-item>
    <el-form-item label="Produktanzeigebild">
      <el-Bild
        v-for="Element in viewForm.pics"
        :Schlüssel="Artikel.Schlüssel"
        Klasse = "Randradius"
        :src="Artikel.Bild"
        Stil="Breite: 100px; Höhe: 100px; Polsterung: 10px"
        :preview-src-list="getPreviewPics()"
      />
    </el-form-item>
  </el-tab-pane>

Wenn es sich in der obigen Abbildung um ein einzelnes Bild handelt, können wir eine Sammlung als URL für die Vorschau festlegen, z. B. [viewForm.Banner]. Wenn es sich um mehrere Bilder handelt, müssen wir eine Funktion verwenden, um die Bilderliste abzurufen, wie in der Funktion getPreviewPics() gezeigt.

getPreviewPics() {
      // Konvertieren Sie die Bildersammlung in ViewForm.pics var list = []
      wenn (diese.viewForm.pics) {
        diese.viewForm.pics.forEach(item => {
          wenn (Artikelbild) {
            Liste.push(Artikel.Bild)
          }
        })
      }
      Rückgabeliste
    }

4) Erweiterungssteuerung von Drittanbietern

Für einige Anwendungen, die erweiterte Komponenten erfordern, suchen wir normalerweise nach Lösungen und installieren die entsprechenden Komponenten über npm. Für Barcodes und QR-Codes verwende ich beispielsweise @chenfengyuan/vue-barcode und @chenfengyuan/vue-qrcode. Im Allgemeinen können Sie einige beliebte Komponenten von Drittanbietern finden, indem Sie auf Github nach Schlüsselwörtern suchen.

Für die Installation dieser Komponenten gelten spezielle Anweisungen, wie unten gezeigt (bei der Deinstallation ändern Sie einfach „Install“ in „Deinstallieren“).

npm installiere @chenfengyuan/vue-barcode vue

sowie

npm installiere @chenfengyuan/vue-qrcode vue

Die Anzeigeeffekte von Barcode und QR-Code sind wie folgt

Wenn wir die Barcode- und QR-Code-Komponenten global importieren, können wir sie in main.js importieren, wie im folgenden Code gezeigt

// Barcode, QR-Code importieren
Importieren Sie VueBarcode aus „@chenfengyuan/vue-barcode“.
Importieren Sie VueQrcode aus „@chenfengyuan/vue-qrcode“.
Vue.Komponente(VueBarcode.name, VueBarcode);

Für die Rich-Text-Bearbeitung verwende ich die Drittanbieterkomponente Tinymce, um die Bearbeitung zu implementieren. Der Anzeigeeffekt ist unten dargestellt.

Der Code lautet wie folgt

<el-tab-pane label="Detaillierte Beschreibung" name="third">
    <el-form-item label="Detaillierte Beschreibung">
      <tinymce v-model="editForm.Note" :height="300" />
    </el-form-item>
  </el-tab-pane>

Oben wird die Verwendung einiger gängiger Schnittstellenkomponenten beschrieben. Die Vorgänge zum Kombinieren von Datei-Uploads und Bildern werden später vorgestellt.

3. Erstellung und Verwendung benutzerdefinierter Komponenten

Der Vorteil der Verwendung von Vue gegenüber der bisherigen BS-Entwicklung besteht darin, dass die Komponentenbildung einfach zu implementieren ist, was großartig ist. Sobald wir ein Steuerelement definiert haben, können wir es in mehreren Schnittstellen verwenden, was sehr praktisch ist, und die Kapselung kann entsprechend unseren Anforderungen gehandhabt werden.

Die allgemeine Schnittstellenwirkung des Abfragebereichs wird unten gezeigt. Zusätzlich zu einigen häufig verwendeten Abfragebedingungen gibt es normalerweise einige Dropdown-Listen. Dies können die an das Hintergrundwörterbuch gebundenen Inhalte sein. Sie können es als allgemeine Dropdown-Listenkomponente des Wörterbuchs verwenden.

Tatsächlich werden diese Dropdown-Listen mit Bedingungen beim Aufrufen der Schnittstelle häufig benötigt.

Definieren wir also eine benutzerdefinierte Komponente und verwenden sie auf der Schnittstelle.

Erstellen Sie ein Verzeichnis im Komponentenverzeichnis und erstellen Sie eine Komponenten-Vue-Datei mit dem Namen my-dictdata.vue, wie unten gezeigt.

Für den Schnittstellenvorlagencode verwenden wir hauptsächlich eine Auswahlkomponente.

<Vorlage>
  <el-select v-model="svalue" filterable clearable placeholder="Bitte auswählen">
    <el-Option
      v-for="(Element, Index) in dictItems"
      :Schlüssel="Index"
      :label="Artikel.Text"
      :Wert="Artikel.Wert"
    />
  </el-Auswahl>
</Vorlage>

Der Skriptlogikcode ist wie folgt.

<Skript>
// API-Modulklassenmethode import { GetDictData } von '@/api/dictdata' importieren

Standard exportieren {
  Name: 'MyDictdata', // Komponentenname Eigenschaften: {
    typeName: { // Wörterbuchtyp, Daten vom Backend-Wörterbuchschnittstellentyp abrufen: String,
      Standard: ''
    },
    Optionen: {// Fester Listenmodus, direkter Bindungstyp: Array,
      Standard: () => { return [] }
    }
  },
  Daten() {
    zurückkehren {
      dictItems: [], // Wörterbuchliste festlegen svalue: '' // ausgewählter Wert }
  },
  betrachten:
    // Bestimmen Sie, ob sich der Wert der Dropdown-Box geändert hat svalue(val, oldVal) {
      wenn (Wert !== alterWert) {
        dies.$emit('Eingabe', dies.svalue);
      }
    }
  },
  montiert() {
    var das = dies;

    wenn (dieser.Typname && dieser.Typname !== '') {
      // Verwenden Sie den Wörterbuchtyp, um Daten vom Server anzufordern GetDictData(this.typeName).then(data => {
        wenn (Daten) {
          Daten.fürJeden(Element => {
            wenn (Element && Typ von (Element.Wert) !== 'undefiniert' && Element.Wert !== '') {
              das.dictItems.push(Artikel)
            }
          });
        }
      })
    } sonst wenn (diese.Optionen && diese.Optionen.Länge > 0) {
      // Verwenden einer festen Wörterbuchliste this.options.forEach(item => {
        wenn (Element && Typ von (Element.Wert) !== 'undefiniert' && Element.Wert !== '') {
          das.dictItems.push(Artikel)
        }
      });
    }
    // Den Standardwert festlegen this.svalue = this.value;
  },
  Methoden: {

  }
}
</Skript>

Die Hauptsache besteht darin, sich mit der Erfassung der Wörterbuchdaten zu befassen und diese an das Modellobjekt zu binden.

Bevor Sie es auf der Seite verwenden können, müssen Sie die von uns definierten Komponenten importieren

importiere myDictdata aus '@/components/Common/my-dictdata'

Dann schließen Sie es in Komponenten ein

Standard exportieren {
  Komponenten: { myDictdata },

Dann müssen Sie den ausgewählten Komponentencode direkt verwenden

<el-select v-model="searchForm.ProductType" filterbarer löschbarer Platzhalter="Bitte auswählen">
  <el-Option
    v-for="(Element, Schlüssel) in Typliste"
    :Schlüssel="Schlüssel"
    :label="Artikel.Wert"
    :Wert="Artikel.Schlüssel"
  />
</el-Auswahl>

Es kann auf eine Codezeile vereinfacht werden

<my-dictdata v-model="searchForm.ProductType" type-name="Produkttyp" />

Für feste Listen können wir auch allgemeinen Verarbeitungscode verwenden

<my-dictdata v-model="searchForm.Status" :options="Status" />

Status ist eine Sammlung von Objekten definiert

Status: [
    { Text: 'Normal', Wert: 0 },
    { Text: 'Empfehlen', Wert: 1 },
    { Text: 'Deaktivieren', Wert: 2 }
  ]

Ist das nicht sehr praktisch? Und die erzielte Wirkung bleibt unverändert.

Das Obige stellt den Inhalt mehrerer Seiten dar, die über den Dialogebenenmodus zusammen integriert werden. Es wird erläutert, wie man ihn verwendet, wie man die gemeinsamen Elementkomponenten in der Schnittstelle verwendet und wie man eine Hauptdefinitionskomponente einer Wörterbuchliste definiert, um die Verwendung des Schnittstellencodes zu vereinfachen.

Oben finden Sie den detaillierten Inhalt der herkömmlichen Element-Schnittstellenkomponenten der Vue Element-Frontend-Anwendungsentwicklung. Weitere Informationen zu den herkömmlichen Element-Schnittstellenkomponenten von Vue Element finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!