Einfache Schritte zum Kapseln von Komponenten in Vue-Projekten

vm.$toast('Netzwerkstörung!')

* Nachricht: Inhalt der Eingabeaufforderung* Dauer: Verweildauer in Millisekunden* Position: Anzeigeposition: oben, Mitte, unten
* Klassenname Stilname vm.$toast({
    Meldung: ,Netzwerkanomalie!‘ ',
    Dauer: 2000,
    Position: 'Mitte',
    Klassenname: "groß"
})

vm.$toast({
    Meldung: ‚Fehler beim Bestätigungscode! ',
    Dauer: 2000,
    Typ: "Fehler"
})

<Vorlage>
    <Übergangsname="Toast-Pop">
        <div v-show="sichtbar" class="toast" :class="customClass" @click="handleClose">
            <span class="text">{{Nachricht}}</span>
        </div>
    </Übergang>
</Vorlage>

<Skript>
    Standard exportieren {
        Name: 'Toast',
        Requisiten: {
            Nachricht: String, // Eingabeaufforderungsinformationen Inhalt Klassenname: { // Stilname Typ: String,
                Standard: ''
            },
            position: { // Position: oben, Mitte, unten
                Typ: Zeichenfolge,
                Standard: „Mitte“
            },
            Typ: { // Eingabeaufforderungstyp: normal, Fehler
                Typ: Zeichenfolge,
                Standard: „normal“
            }
        },
        Daten () {
            zurückkehren {
                // Ob sichtbar angezeigt werden soll: false
            }
        },
        berechnet: {
            // Stil customClass abrufen () {
                let Klassen = []
                Klassen.push('Toast-' + dieser.Typ)
                Schalter (diese.Position) {
                    Fall 'oben':
                        Klassen.push('ist-placetop')
                        brechen
                    Fall 'unten':
                        Klassen.push('ist-Placebottom')
                        brechen
                    Standard:
                        Klassen.push('ist-placemiddle')
                }
                dieser.Klassenname && Klassen.push(dieser.Klassenname)
                Rückgabeklassen
            }
        },
        Methoden: {
            handleSchließen () {
                dies.$emit('schließen')
            }
        }
    }

</Skript>

<style lang="scss" scoped px2rem="false">
    .toast {
        Position: fest;
        Box-Größe: Rahmenbox;
        Mindestbreite: 200px;
        maximale Breite: 50 %;
        max. Höhe: 85 %;
        Rand oben: 0;
        Polsterung: 18px 30px;
        Rahmenradius: 10px;
        Hintergrund: rgba(0, 0, 0, 0,7);
        Farbe: #fff;
        Textausrichtung: zentriert;
        Überlauf-y: automatisch;
        Z-Index: 2000;
        .text {
            Anzeige: Block;
            Schriftgröße: 16px;
            Zeilenhöhe: 1,5;
            Textausrichtung: zentriert;
            Zeilenumbruch: Wort umbrechen;
        }
    }

    .ist-placetop {
        oben: 50px;
        links: 50%;
        transformieren: übersetzen(-50 %, 0);
    }
    .ist-placemiddle {
        oben: 50 %;
        links: 50%;
        transformieren: übersetzen(-50 %, -50 %);
    }
    .ist-placebottom {
        unten: 50px;
        links: 50%;
        transformieren: übersetzen(-50 %, 0);
    }
    .ist-placetop.toast-pop-enter-active, .ist-placetop.toast-pop-leave-active,
    .is-placemiddle.toast-pop-enter-active, .is-placemiddle.toast-pop-leave-active {
        Übergang: Deckkraft 0,3 s linear, oberer Rand 0,3 s Leichtigkeit;
    }

    .ist-placetop.toast-pop-enter, .ist-placetop.toast-pop-leave-to,
    .is-placemiddle.toast-pop-enter, .is-placemiddle.toast-pop-leave-to {
        Rand oben: 30px;
        Deckkraft: 0;
    }
    .is-placebottom.toast-pop-enter-active, .is-placebottom.toast-pop-leave-active {
        Übergang: Deckkraft 0,3 s linear, Rand unten 0,3 s Leichtigkeit;
    }

    .is-placebottom.toast-pop-enter, .is-placebottom.toast-pop-leave-to {
        Rand unten: -30px;
        Deckkraft: 0;
    }
    .toast-Fehler {
        Hintergrund: rgba(255,102,104,.9);
    }
</Stil>

Vue von „vue“ importieren
Toast aus „./toast.vue“ importieren

// Toast-Konstruktor const ToastConstructor = Vue.extend({
    erweitert: Toast
})

// Toast-Instanzpool let toastPool = []

/** Toast-Instanz holen (wenn eine im Instanzpool vorhanden ist, diese aus dem Pool nehmen, wenn keine vorhanden ist, eine neue erstellen) */
let getInstance = () => {
    // konsole.log('toastPool:', toastPool)
    wenn (toastPool.length > 0) {
        toastPool.shift() zurückgeben
    }
    returniere neuen ToastConstructor({
        el: document.createElement('div')
    })
}

/** Die Instanz an den Instanzpool zurückgeben */
let returnInstance = Instanz => {
    wenn (Instanz) {
        toastPool.push(Instanz)
        // console.log('Instanz zurückgeben:', Instanz, ToastPool)
    }
}

/**Entfernen Sie den DOM-Knoten von Toast aus dem Dokument*/
Funktion removeDom (Ereignis) {
    wenn (Ereignis.Ziel.übergeordneterKnoten) {
        Ereignis.Ziel.ParentNode.RemoveChild(Ereignis.Ziel)
    }
}

// Schließen ToastConstructor.prototype.close = function () {
    this.visible = false // Unsichtbar this.closed = true // Geschlossener Zustand this.$el.addEventListener('transitionend', removeDom) // Entferne den DOM-Knoten, nachdem die Animation abgeschlossen ist returnInstance(this) // Das Instanzobjekt wird an den Instanzpool zurückgegeben und die Instanz kann wiederverwendet werden }

// Toast-Eingabeaufforderungsinformationen anzeigen export default function (options = {}) {
    // Anzeigedauer, Standard ist 3 Sekunden let duration = options.duration || 3000
    let Instanz = getInstance()
    // console.log('Instanz=', Instanz)
    // Anzeigetyp Instanztyp = Optionentyp || 'normal'
    // Inhalt anzeigen instance.message = typeof options === 'string' ? options : options.message
    // Anzeigeposition: oben, Mitte, unten
    Instanz.position = Optionen.position || 'Mitte'
    Instanz.Klassenname = Optionen.Klassenname || ''
    //Entfernen Sie die Eventinstanz zur Beendigung der Animation.$el.removeEventListener('transitionend', removeDom)
    Instanz.$on('close', () => {
        Instanz.schließen()
    })
    // konsole.log('instanz.$el=', Instanz.$el)
    // Fügen Sie den Knoten zum Dokument hinzu. document.body.appendChild(instance.$el)
    Instanz.sichtbar = true
    Instanz.geschlossen = falsch

    // Lösche den Timer instance.timer && clearTimeout(instance.timer)
    // Stellen Sie den Timer ein und schließen Sie den Toast
    Instanz.Timer = setTimeout(() => {
        // console.log('schließen', Instanz)
        !Instanz.geschlossen && Instanz.schließen()
        Instanz.Timer = null
    }, Dauer)
}

ToastPlugin aus „./plugins/toastPlugin.js“ importieren

// Plugin für Toast-Eingabeaufforderungsinformationen Vue.use(ToastPlugin)