Übung zum dynamischen Erstellen von Dialogen entsprechend dem Dateinamen in vue+el-element

Hintergrund

Die übliche Vorgehensweise bei der Verwendung von Dialogfeldern in einem Projekt besteht darin, das Dialogfeld in eine Komponente einzukapseln, es dort zu importieren, wo es verwendet wird, und es dann der Vorlage hinzuzufügen. Mithilfe von visible.sync wird die Anzeige/Ausblendung des Dialogfelds gesteuert und auf das Bestätigungsereignis gewartet, um zu verarbeiten, wenn der Benutzer auf „OK“ klickt. wie folgt:

 <Bestätigungsdialog
     v-if="Dialogsichtbar bestätigen"
     :Titel="$t(`mineData.tips.deleteDataset`)"
     :visible.sync="Dialogsichtbar bestätigen"
     @confirm="confimHandler"
 ></Bestätigungsdialog>

Im gekapselten Dialog ist zudem ein Visible-Update beim Schließen und das Auslösen des Confirm-Events beim Bestätigen notwendig:

 Methoden: {
    schließen() {
        dies.$emit("update:sichtbar", false);
    },
    bestätigen() {
        dies.schließen();
        dies.$emit("bestätigen");
    }
}

Dieser Ansatz führt nicht nur dazu, dass alle Dialogkomponenten beim Initialisieren der Seite eingeführt werden, was sich auf die Ladegeschwindigkeit auswirkt, sondern verursacht auch viele Probleme, wenn viele Dialogfelder in die Seite eingeführt werden, was die Seite sehr unübersichtlich macht: Sie müssen für jedes Dialogfeld einen HTML-Abschnitt einfügen, für jedes Dialogfeld eine separate sichtbare Variable verwalten, für jedes Dialogfeld einen Bestätigungsereignis-Listener hinzufügen usw.

Die meisten dieser Vorgänge sind für das Geschäft irrelevant und sie sind sich äußerst ähnlich.

Gibt es also eine Möglichkeit, einen Dialog dynamisch über JS zu erstellen?

Dialog erstellen("dialog bestätigen.vue");

Genau wie oben können Sie das Dialogfeld entsprechend dem Dateinamen öffnen, ohne „sichtbar“ zu definieren und eine Reihe von HTML- und Ereignisrückrufen hinzuzufügen, und Sie müssen nicht einmal zuerst die Dialogkomponente einführen!

Ist das nicht einfach? Bist du aufgeregt? Lesen Sie weiter.

erreichen

1. Gekapseltes /utils/dialogControl.js

Vue von „vue“ importieren
asynchrone Funktion createDialog (Dateiname, Daten) {
  const dialogsContext = erfordern.context(
    '../components', // Definieren Sie den Umfang der Suchdatei true,
    /([a-zA-Z\-0-9]+)\.vue$/, // Dateinamenregel „lazy“ definieren
  )
  // Suche die Datei mit dem übergebenen Namen und lade sie. let match = dialogsContext.keys().find((key) => key.includes(fileName))
  wenn (!match) zurückgeben
  let componentContext = warte auf dialogsContext(match)
  let temp = componentContext.default
  returniere neues Promise(Funktion (auflösen, ablehnen) {
    //Konfigurationsparameter initialisieren let opt ​​​​= {
      Daten
    }
    let Komponente = Objekt.assign({}, temp)
    let initData = {
      sichtbar: wahr
    }
    Objekt.assign(initData, Komponente.data())
    opt.data und Object.assign(initData, JSON.parse(JSON.stringify(opt.data)))
    Komponente.Daten = Funktion () {
      returniere initData
    }
    // Einen Konstruktor erstellen, um eine Instanz zu erstellen und zu mounten let DialogC = Vue.extend(component)
    let dialog = neuer DialogC()
    // Ereignis schließen let _onClose = dialog.$options.methods.onClose
    dialog.onClose = Funktion () {
      lösen()
      dialog.$destroy()
      _onClose und _onClose.call(Dialog)
      Dokument.Body.RemoveChild(Dialog.$el)
    }
    // Rückrufereignis let _onCallback = dialog.$options.methods.onCallback
    dialog.onCallback = Funktion (...arg) {
      versuchen {
        _onCallback und _onCallback()
        auflösen(Argument)
        dialog.$destroy()
        _onClose und _onClose.call(Dialog)
        Dokument.Body.RemoveChild(Dialog.$el)
      } fangen (e) {
        console.log(e)
      }
    }
    dialog.$mount()
    // Durch Klicken auf die Schaltfläche „Schließen“ wird die Sichtbarkeit geändert
    dialog.$watch('sichtbar', function (n, o) {
      dialog === false && dialog.onClose()
    })
    Dokument.Body.AnhängenUntergeordnetesElement(dialog.$el)
  })
}

export { erstelleDialog }

veranschaulichen:
1. Sie müssen den Pfad zur Dateisuche und den regulären Ausdruck angeben, der dem Namen entspricht, damit einige unnötige Dateien herausgefiltert werden können

2. Erhalten Sie einen Dateinamenparameter, der mit der zu öffnenden Dialogdatei übereinstimmt, und der Datenparameter sind die an das Dialogfeld übergebenen Daten, die in die Daten der Komponente integriert werden

3. Verwenden Sie die sichtbare Variable, um die Anzeige/Ausblendung des Dialogfelds zu steuern

4. Definieren Sie eine onClose-Methode zum Schließen des Dialogfelds, mit der das Dialogfeld geschlossen werden kann

5. Die onCallback-Methode wird verwendet, um Werte an die übergeordnete Komponente zu übergeben, die das Dialogfeld aufruft, z. B. um Werte an die übergeordnete Komponente zu übergeben, wenn auf die Schaltfläche „OK“ geklickt wird

2.Dialogdateidefinition

Beispielsweise wird in /components/ConfirmDialog.vue die sichtbare Variable zum Steuern der Anzeige/Ausblenden verwendet, onClose behandelt das Schließereignis und der Rückruf der Bestätigungsschaltfläche ist onCallback (was mit der Definition in dialogControl.js übereinstimmt).

<Vorlage>
    <el-dialog title="Eingabeaufforderung" :visible.sync="sichtbar" width="30%">
        <span>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nichts davon
            perspiciatis fugiat molestiae provident accusantium repudiandae fugit
            Minima, eaque, repellat quibusdam iste sed ad? Debitis qui praesentium
            minus Vorfall ess!
        <span slot="Fußzeile" class="dialog-footer">
            <el-button @click="onClose">Abbrechen</el-button>
            <el-button type="primary" @click="onCallback(true)">OK</el-button>
        </span>
    </el-dialog>
</Vorlage>

<Skript>
Standard exportieren {
  Daten () {
    zurückkehren {}
  },
  Methoden: {
  }}
</Skript>

3. Nutzung

Führen Sie die Methode createDialog in dialogControl ein und übergeben Sie den Dateinamen direkt, um sie zu öffnen.

Wenn weitere Attribute vorhanden sind, fügen Sie diese in Form von Schlüssel-Wert-Paaren in den zweiten Parameter ein. Diese Attribute werden in die Daten der Dialogkomponente integriert, sodass diese Attribute direkt in der Dialogkomponente verwendet werden können.

Die Methode createDialog ruft ein Promise-Objekt ab und ihre then-Methode kann das per Confirm zurückgegebene Ergebnis abrufen.

<Vorlage>
  <div>
    <h1>Dies ist eine Showseite</h1>
    <el-button type="primary" @click="openDialog">Öffnen</el-button>
  </div>
</Vorlage>

<Skript>
importiere { createDialog } aus "@/utils/dialogControl";
Standard exportieren {
  Methoden: {
    openDialog() {
      let dialog = createDialog("confirm-dialog.vue");
      dialog.then((v) => {
        wenn (v) {
          console.info("OK");
        }
      });
    },
  },
};
</Skript>

Die Wirkung ist wie folgt:

Wenn Sie zum Aufrufen des Dialogfelds immer noch die Methode vom Anfang des Artikels verwenden, dann beeilen Sie sich und verwenden Sie diese Methode!

siehe:

https://www.freesion.com/article/43311065748/

Dies ist das Ende dieses Artikels über die Vorgehensweise zum dynamischen Erstellen von Dialogen basierend auf Dateinamen in vue+el-element. Weitere relevante Informationen zum dynamischen Erstellen von Dialoginhalten mit el-element finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!