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

MySQL wählt den passenden Datentyp für die ID

Inhaltsverzeichnis Zusammenfassung der Distribute...

React-Konfiguration px-Konvertierung rem-Methode

Installieren Sie zugehörige Abhängigkeiten npm ic...

Eine kurze Diskussion über die Lösung von Axios zum Entfernen doppelter Anfragen

Inhaltsverzeichnis 1. Doppelte Anfragen storniere...

Eine kurze Analyse der Netzwerkprogrammierfunktionen von Linux

Inhaltsverzeichnis 1. Erstellen Sie einen Socket ...

So verwenden Sie die ES6-Klassenvererbung, um einen wunderschönen Balleffekt zu erzielen

Inhaltsverzeichnis einführen Implementierungsschr...

Detaillierte Erläuterung der Mybatis-Sonderzeichenverarbeitung

Vorwort: Mybatis-Sonderzeichenverarbeitung, Verar...

Ausführliche Erklärung der Sonderberechtigungen SUID, SGID und SBIT in Linux

Vorwort Für die Berechtigungen von Dateien oder V...

Tutorial zur Verwendung von Docker Compose zum Erstellen von Confluence

Dieser Artikel verwendet die Lizenzvereinbarung „...

HTML+CSS+jQuery imitiert den Such-Hotlist-Tab-Effekt mit Screenshots

Code kopieren Der Code lautet wie folgt: <!DOC...

Detaillierte Erklärung des JQuery-Selektors

Inhaltsverzeichnis Grundlegende Selektoren: Ebene...

Beispielcode von Vue + Element UI zur Realisierung der Player-Funktion

Die Anzeige ohne Effektbild ist nur leeres Gerede...

Eine einfache Methode zum regelmäßigen Löschen abgelaufener Datensätze in MySQL

1. Überprüfen Sie nach der Verbindung und Anmeldu...

Einführung in die gängigen Festplattenverwaltungsbefehle von Linux

Inhaltsverzeichnis 1. df-Befehl 2. du-Befehl 3. B...

So verwenden Sie React-Slots

Inhaltsverzeichnis brauchen Kernidee Zwei Möglich...

Detaillierte Erläuterung der ActiveMQ-Bereitstellungsmethode in der Linux-Umgebung

Dieser Artikel beschreibt die Bereitstellungsmeth...