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

Implementierung von JavaScript zum Herunterladen und Hochladen verknüpfter Bilder

Da wir Bilder hochladen möchten, müssen wir zunäc...

Detaillierte Erklärung des Synchronisierungsmodifikators von Vue

Inhaltsverzeichnis 1. Anweisungen 2. Modifikatore...

Elementui exportiert Daten in XLSX- und Excel-Tabellen

Kürzlich habe ich vom Vue-Projekt erfahren und bi...

Docker Ändern des Docker-Speicherorts Ändern der Größenbeschränkung für Container-Images

Dies scheint mit der neuen Version nicht mehr mög...

JavaScript implementiert Feuerwerkseffekte mit Soundeffekten

Ich habe eine halbe Stunde gebraucht, um den Code...

Eine detaillierte Einführung in den wget-Befehl in Linux

Inhaltsverzeichnis Installieren Sie zuerst wget H...

MySQL Master-Slave-Synchronisationsmechanismus und Tracking-Prozess für Synchronisationsverzögerungsprobleme

Vorwort Als DBA werden Sie bei Ihrer Arbeit häufi...

So verwenden Sie residente Knoten für die Ebenenverwaltung in CocosCreator

CocosCreator-Version: 2.3.4 Die meisten Spiele ve...

Grundlegende Implementierung der AOP-Programmierung in JavaScript

Einführung in AOP Die Hauptfunktion von AOP (Aspe...

So verwenden Sie eine VLAN-getaggte Ethernet-Karte im CentOS/RHEL-System

In einigen Szenarien möchten wir derselben Ethern...

Ausführliches Tutorial zur Installation von MySQL 5.6-ZIP-Paketen

Bisher haben wir alle Dateien mit der Endung .msi...

Detaillierter Informationsaustausch über das MySQL-Protokollsystem

Jeder, der schon einmal an einem großen System ge...

Detaillierte Erklärung des DOM DIFF-Algorithmus in der React-Anwendung

Inhaltsverzeichnis Vorwort Was ist VirtualDOM? Gr...

Lernunterlagen zum Schreiben des ersten Vue-Programms

Inhaltsverzeichnis 1. Schreiben Sie ein HTML, das...

CSS-Beispielcode zur Implementierung von Schiebetüren

Durch die sogenannte Sliding Door-Technologie läs...