Erstellen Sie zuerst eine index.js-Datei im Toastordner, erstellen Sie ein Objekt in der js-Datei und exportieren Sie es
// index.js
konstanter Toast = {}
Standard-Toast exportieren
Importieren Sie diese Datei in main.js und verwenden Sie sie
// main.js Toast aus ‚toast/index.js‘ importieren Vue.use(Toast)
Wir wissen, dass die Verwendung darin besteht, die Installationsmethode des Objekts aufzurufen, also müssen wir die Installationsmethode in index.js schreiben
// index.js
konstanter Toast = {}
toast.install = funktion() {
// console.log() Hier können Sie selbst eine Ausgabe machen, um zu sehen, ob sie aufgerufen wird
}
Standard-Toast exportieren
Nachdem Sie die Ausgabe durchgeführt haben, sollten Sie wissen, dass diese Methode tatsächlich aufgerufen wird. Zu diesem Zeitpunkt können wir einige Dinge in dieser Installationsmethode tun:
Holen Sie sich die Toastkomponente
Fügen Sie der Seite Komponenten hinzu
Geben Sie der vue-Instanz die Anzeigemethode der Komponente
Erklären Sie die Idee hier
Sie müssen die Komponente zuerst erhalten, bevor Sie die Komponente bedienen können.
Zweitens, finden Sie einen Weg, die Komponente der Seite hinzuzufügen, sodass sie nicht in anderen Komponenten eingeführt werden muss und eine Codezeile das kleine Kästchen auf der Seite anzeigen kann.
Als Nächstes müssen wir die Anzeigemethode der Komponente dem Prototypattribut der vue-Instanz übergeben, damit wir dies direkt tun können. $toast.show()
Um den Code für die Installation zu schreiben
toast.install = Funktion (Vue) {
console.log('verwendet')
// 1. Erstellen Sie einen Komponentenkonstruktor
const toastConstructor = Vue.extend(Toast)
// 2. Erstellen Sie eine Komponente mit dem Komponentenkonstruktor
const toast = new toastConstructor()
// 3. Montieren Sie die Komponente manuell auf einem Element
toast.$mount(document.createElement('div'))
// 4. Fügen Sie den Knoten in die Seite ein, $el ist der Knoten der Komponente
document.body.appendChild(toast.$el)
// 5. Fügen Sie die Komponente der vue-Instanz hinzu
Vue.prototype.$toast = Toast
}
Um den Code hier zu erklären:
Die install-Methode übergibt automatisch einen Parameter, der ein Objekt von Vue ist
Es ist für uns nicht möglich, Toast direkt in die Seite einzufügen, da die Komponente ein virtueller Dom und kein Knotenknoten ist
Wir müssen also über die Komponente einen echten Dom erstellen und ihn dann in die Seite einbinden
Die Schritte lauten: Verwenden Sie extend zum Erstellen eines Komponentenkonstruktors, verwenden Sie den Komponentenkonstruktor zum Instanziieren eines Komponentenobjekts, stellen Sie das Komponentenobjekt manuell an ein Element und fügen Sie es dann in die Seite ein
Geben Sie diese Komponenteninstanz schließlich an Vue.prototype.$toast weiter, und wir können this.$toast an anderer Stelle verwenden