Vollständiges Beispiel der Kapselung der globalen Toast-Komponente durch Vue

Vollständiges Beispiel der Kapselung der globalen Toast-Komponente durch Vue

Vorwort

Ich habe kürzlich Erfahrungen mit Vue gemacht. Toast ist eine häufig verwendete Komponente im Frontend. Dieser Artikel stellt ausführlich den Prozess vor, mit dem Vue die globale Toast-Komponente kapselt. Werfen wir einen Blick auf die ausführliche Einführung.

1. Mit vue-cli

1. Definieren Sie die Toast-Komponente

// Komponenten/Toast

<Vorlage>
  <Übergangsname="Überblenden">
    <div v-show="sichtbar">{{Nachricht}}</div>
  </Übergang>
</Vorlage>

<Skript>
Standard exportieren {
  Daten () {
    zurückkehren {
      sichtbar: falsch,
      Nachricht: ''
    }
  }
}
</Skript>

<Stilbereich>
div {
  Position: fest;
  oben: 30%;
  links: 50%;
  Polsterung: 5px 20px;
  Farbe: #fff;
  Hintergrundfarbe: #424242;
  Rahmenradius: 5px;
  Textausrichtung: zentriert;
  transformieren: übersetzen(-50 %, -50 %);
}
/* Einstellungen für Übergangseffekte in Vue-Animationen */
.fade-enter-active,
.fade-leave-active {
  Übergang: Deckkraft 0,5 s;
}
.fade-enter, .fade-leave-to {
  Deckkraft: 0;
}
</Stil>

2. In main.js konfigurieren

Vue von „vue“ importieren
App aus „./App.vue“ importieren
Toast aus „./components/Toast“ importieren

// Plugin-Objekt definieren const ToastObj = {
  installieren: Funktion (Vue) {
    // Erstellen Sie eine Vue-„Unterklassen“-Komponente const ToastConstructor = Vue.extend(Toast)
    // Erstellen Sie eine Instanz dieser Unterklasse und hängen Sie sie an ein Element an const instance = new ToastConstructor()
    console.log(Instanz)
    // Mounten Sie diese Instanz in das dynamisch erstellte Element und fügen Sie das Element zur globalen Strukturinstanz hinzu. $mount(document.createElement('div'))
    Dokument.Body.AppendChild(Instanz.$el)

    // Methode in der Prototypkette von Vue registrieren, um die Komponente Vue.prototype.$toast = (msg, duration = 1500) => { zu steuern.
      Instanz.Nachricht = Nachricht
      Instanz.sichtbar = true
      setzeTimeout(() => {
        Instanz.sichtbar = false
      }, Dauer)
    }
  }
}
Vue.use(ToastObj)

Vue.config.productionTip = falsch

neuer Vue({
  rendern: h => h(App),
}).$mount('#app')

3. Verwendung in anderen Komponenten

<Vorlage>
  <div Klasse="hallo">
    <h1>{{ msg }}</h1>
  </div>
</Vorlage>

<Skript>
Standard exportieren {
  Name: "Hallo Welt",
  Daten: () => {
    zurückkehren {
      Nachricht: 'HalloWord'
    }
  },
  montiert () {
  	//Toast-Komponente this.$toast('Komponente erfolgreich gemountet') verwenden
  }
}
</Skript>

2. Ohne vue-cli

Mithilfe von vue-cli ist es einfach, Komponenten zu importieren und zu exportieren, aber ohne die Hilfe von Build-Tools sind andere Methoden erforderlich.

1. Registrieren Sie die Toast-Komponente

<!DOCTYPE html>
<html lang="de">
<Kopf>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
  <title>Dokument</title>
  <script src="./static/vue/vue.min.js"></script>
</Kopf>
<Text>
  <div id="app">
    <meine-Schaltfläche></meine-Schaltfläche>
  </div>
  <div id="toast"></div>
  <Skript>
    // Globale Toast-Komponente definieren const Toast = Vue.component('toast', {
      Daten() {
        zurückkehren {
          isShow: false,
          Meldung: „Globale Eingabeaufforderung“,
          Wrapper-Stil: {
            Position: 'fest',
            oben: '20%',
            links: '50%',
            zIndex: 10000,
            Polsterung: '6px 12px',
            Hintergrundfarbe: '#424242',
            Rahmenradius: '5px',
            transform: 'übersetzen(-50 %, -50 %)'
          },
          Textstil: {
            Farbe: '#fff',
            Schriftgröße: '14px'
          }
        }
      },
      Vorlage: `<div v-show="isShow" :style="wrapperStyle">
                  <span :style="textStyle">{{ Nachricht }}</span>
                </div>`
    })

2. Registrieren Sie das Toast-Plugin

// Plugin-Objekt definieren const ToastObj = {
  installieren: Funktion (Vue) {
    //Eine Toast-Komponenteninstanz erstellen und an ein Element anhängen const instance = new Toast()
    //Diese Instanz in die DOM-Instanz einbinden.$mount('#toast')

    // Methode in der Prototypkette von Vue registrieren, um die Komponente Vue.prototype.$toast = ({message, duration = 2000} = {}) => { zu steuern
      Instanz.Nachricht = Nachricht
      Instanz.isShow = true

      setzeTimeout(() => {
        Instanz.isShow = false
      }, Dauer)
    }
  }
}
//Toast-Plugin registrieren Vue.use(ToastObj)

3. Verwendung in anderen Komponenten

    Vue.component('mein-Button', {
      Daten() {
        zurückkehren {
          Wrapper-Stil: {
            Breite: '70px',
            Polsterung: '20px',
            Hintergrundfarbe: „grün“
          },
          Textstil: {
            Farbe: '#fff',
            Schriftgröße: '16px'
          }
        }
      },
      Methoden: {
        handleKlick() {
          dies.$toast({
            Nachricht: „Ich habe geklickt“
          })
        }
      },
      Vorlage: `<div :style="wrapperStyle" @click="handleClick">
                  <span :style="textStyle">Klickaufforderung</span>
                </div>`
    })

    const vm = neuer Vue({
      el: '#app'
    })
  </Skript>
</body>
</html>

Zusammenfassen

Dies ist das Ende dieses Artikels über die Vue-Kapselung globaler Toast-Komponenten. Weitere relevante Informationen zur Vue-Kapselung globaler Toast-Komponenten finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!

Das könnte Sie auch interessieren:
  • Vue-gekapselte Komponenten sind global registriert und referenziert

<<:  Detaillierte Erläuterung der Konfiguration der Alibaba Cloud-Sicherheitsregeln

>>:  Python stellt eine Verbindung zur Datenbank her MySQL dekomprimierte Version Installationskonfiguration und aufgetretene Probleme

Artikel empfehlen

Docker-Compose erstellt schnell Schritte für ein privates Docker-Warehouse

Erstellen Sie docker-compose.yml und füllen Sie d...

Lösungen für häufige Probleme bei der Verwendung von Elasticsearch

1. Die Verwendung mit Redis führt zu Startkonflik...

Vue3.x verwendet mitt.js für die Komponentenkommunikation

Inhaltsverzeichnis Schnellstart Anwendung Grundpr...

Detaillierte Erklärung des Overlay-Netzwerks in Docker

Übersetzt aus der offiziellen Docker-Dokumentatio...

Detaillierte Darstellung des MySQL 5.7.33-Installationsprozesses

Inhaltsverzeichnis Download des Installationspake...

Docker ändert die Konfigurationsinformationen eines nicht gestarteten Containers

Als ich Docker zum ersten Mal verwendete, habe ic...

Sprechen Sie über nextTick in Vue

Wenn sich die Daten ändern, wird die DOM-Ansicht ...

JavaScript-Canvas zum Erzielen eines Code-Rain-Effekts

In diesem Artikel wird der spezifische Code für C...

Beheben Sie die Fallstricke beim Speichern von Booleschen Werten im lokalen Speicher

LocalStorage speichert Boolesche Werte Als ich he...

Die Element-UI-Tabelle realisiert die Dropdown-Filterfunktion

In diesem Artikelbeispiel wird der spezifische Co...

Tutorials der MySQL-Reihe für Anfänger

Inhaltsverzeichnis 1. Grundkonzepte und Grundbefe...

Lösung für das MySQL-Fehlerproblem 1045 (28000)

Ich bin auf den MySQL-FEHLER 1045 gestoßen und ha...

Ein grafisches Tutorial zur Installation des Redhat 8.0-Systems (ein Muss für Anfänger)

Inhaltsverzeichnis 1. Einleitung 2. Installation ...

Detaillierte Erläuterung der Vorverarbeitungsmethode für WeChat-Applet-Anforderungen

Frage Da einige unserer Seiten Daten im Onload-Mo...

Erstellen, Einschränkungen und Löschen von Fremdschlüsseln in MySQL

Vorwort Ab MySQL-Version 3.23.44 unterstützen Inn...