Verwenden Sie Vue3, um eine Komponente zu implementieren, die mit js aufgerufen werden kann

Vorwort

Komponentenbibliotheken werden grundsätzlich bei der Projektentwicklung verwendet, aber der Stil und die Funktionen des Designentwurfs stimmen möglicherweise nicht mit denen der Komponentenbibliothek überein, insbesondere bei Popups mit Nachrichtenaufforderungen und Bestätigungs-Popups. Jedes Projekt und jeder Designer hat seinen eigenen Stil. Wir können jedoch die Komponenten in der Komponentenbibliothek verwenden, um ihren Stil zu überschreiben. Einige benutzerdefinierte Funktionen lassen sich jedoch immer noch nicht einfach ändern. In diesem Fall wählen wir benutzerdefinierte Komponenten aus, führen sie dann über das Komponentenattribut in die Seite ein und schreiben explizit Tag-Aufrufe. Für Nachrichtenaufforderungen, die Benutzern einfache Eingabeaufforderungen oder Vorgänge bieten, unterstützen die am häufigsten verwendeten UI-Bibliotheken ähnliche Funktionen über JS-Aufrufe. Wir können uns auch auf die Aufrufmethode der UI-Bibliothek beziehen, um eine benutzerdefinierte Komponente zu implementieren, die von einer JS-Funktion aufgerufen wird.

1. Herkömmliche Vue-Komponenten

Angenommen, wir müssen ein Bestätigungsfeld implementieren, auf eine Schaltfläche klicken, um das Bestätigungsfeld zu öffnen, auf die Schaltflächen „OK“ und „Abbrechen“ des Bestätigungsfelds klicken, um das Bestätigungsfeld zu schließen, und die entsprechende Methode aufrufen.

1. Hauptkomponentencode:

src/Komponenten/Bestätigen/Bestätigen.vue

2. Nutzung

3. Ergebnisse erzielen

2. Wechseln Sie zur JS-Aufrufkomponente

Die obige Methode zum Aufrufen von Komponenten ist sehr umständlich. Sie erfordert sowohl die Einführung als auch die Verarbeitung von Rückrufen verschiedener Vorgänge. Darüber hinaus wird der Komponenten-DOM-Knoten unter der aktuellen Seite eingefügt, und der Stil kann durch den Komponenteninhalt überschrieben oder durch andere Faktoren beeinflusst werden.

Das Ergebnis, das wir erreichen möchten, ist: Aufruf der Komponente über eine JS-Funktion, die Funktion gibt ein Versprechen zurück, bestätigt dann und bricht „catch“ ab, zum Beispiel:

Bestätigen({
  Titel: '',
  Nachricht: ''
}).then(() => {
  // Zur Bestätigung klicken}).catch(() => {
  // Zum Abbrechen klicken })

1. Schritte zur Umsetzung:

• Bestätigen Sie zunächst, dass ein Promise-Objekt zurückgegeben werden muss. Erstellen Sie eine Methode, die zuerst ein Promise-Objekt zurückgibt.
• Verwenden Sie die createApp-Methode von Vue, um eine Confirm-Komponenteninstanz zu erstellen. Mit dem zweiten Argument für createApp können wir die Root-Eigenschaft an die Anwendung übergeben und dabei die Daten weitergeben, die die Komponente benötigt.
• Erstellen Sie einen Knoten, der als Container zum Einbinden von Komponenteninstanzen verwendet werden soll, und hängen Sie den Knoten an den Textkörper an.
• Durch das Einbinden der Komponenteninstanz in den erstellten Knoten ist das übergeordnete Element der Komponente der Hauptteil und wird von der aufrufenden Seite nicht beeinflusst.
• Wenn Sie auf „OK“ klicken, wird „Resolve“ aufgerufen, die aktuelle Komponente deinstalliert und das DOM entfernt. Klicken Sie auf „Abbrechen“, um die Ablehnung aufzurufen und die aktuelle Komponente zu deinstallieren, wobei das DOM entfernt wird.

2. Spezifischer Implementierungscode:

Ändern Sie den JS-Teil der Confirm-Komponente und übergeben Sie onConfirm und onCancel von Props, um die Verwendung von Komponenteninstanzen zu erleichtern.

// src/components/Bestätigen/Bestätigen.vue
<Skript>
Standard exportieren {
  Name: 'Bestätigen',
  Requisiten: {
    Titel:
      Typ: Zeichenfolge,
      Standard: „Eingabeaufforderung“
    },
    Nachricht: {
      Typ: Zeichenfolge,
      Standard: „Standard-Eingabeaufforderungsnachricht“
    },
    bestätigenBtnText: {
      Typ: Zeichenfolge,
      Standard: „Bestätigen“
    },
    cancelBtnText: {
      Typ: Zeichenfolge,
      Standard: „Abbrechen“
    },
    beiBestätigung: {
      Typ: Funktion,
      Standard: () => {}
    },
    beimAbbrechen: {
      Typ: Funktion,
      Standard: () => {}
    }
  }
}
</Skript>

Erstellen Sie eine neue Datei index.js im selben Verzeichnis, übergeben Sie Parameter wie onConfirm und onCancel über Props an die Komponente, und Sie können Ereignisrückrufe in der Instanz empfangen.

// src/components/Bestätigen/index.js
importiere { createApp } von 'vue'
Bestätigen aus „./Confirm“ importieren
Funktion bestätigen ({Titel, Nachricht, Bestätigungs-BtnText, Abbrechen-BtnText}) {
  returniere neues Promise((lösen, ablehnen) => {
    // Instanziieren Sie die Komponente, der zweite Parameter von createApp ist props
    const confirmInstance = createApp(Bestätigen, {
      Titel: Titel || 'Tipps',
      Nachricht: Nachricht || 'Nachricht bestätigen',
      confirmBtnText: confirmBtnText || 'Bestätigen',
      cancelBtnText: cancelBtnText || 'Abbrechen',
      beiBestätigung: () => {
        aushängen()
        lösen()
      },
      beiAbbrechen: () => {
        aushängen()
        ablehnen(neuer Fehler())
      }
    })
    // Komponente aushängen const unmount = () => {
      bestätigenInstance.unmount()
      Dokument.Body.RemoveChild(übergeordneter Knoten)
    }
    // Einen Einbindungscontainer erstellen const parentNode = document.createElement('div')
    Dokument.Body.AnhängenUntergeordnetesElement(übergeordneterKnoten)
    //Komponente mounten confirmInstance.mount(parentNode)
  })
}

Exportieren Standard Bestätigen

Verwenden von Komponenten

aufstellen () {
  const showConfirm = () => {
    Bestätigen({
      Titel: 'Titel',
      Nachricht: ‚Inhalt‘
    }).then(() => {
      console.log('Klicken Sie hier, um zu bestätigen')
    }).catch(() => {
      console.log('Zum Abbrechen klicken')
    })
  }
  zurückkehren {
    anzeigenBestätigen
  }
}

3. Realisieren Sie die Effektanzeige

Zusammenfassen

Dies ist das Ende dieses Artikels über die Verwendung von Vue3 zum Implementieren einer Komponente, die von js aufgerufen werden kann. Weitere relevante Inhalte zur Implementierung von Komponenten, die von js aufgerufen werden, durch Vue3 finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder durchsuchen Sie die folgenden verwandten Artikel weiter. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!