Vue3 manuelle Kapselung Popup-Box-Komponente Nachrichtenmethode

<Vorlage>
  <Übergangsname="nach unten">
    <div Klasse="xtx-message" :style="Stil[Typ]" v-show='isShow'>
      <!-- Der Stil ist oben gebunden -->
      <!-- Verschiedene Eingabeaufforderungssymbole ändern sich-->
      <i Klasse = "Iconfont": Klasse = "[Stil[Typ].Icon]"></i>
      <span class="text">{{text}}</span>
    </div>
  </Übergang>
</Vorlage>
<Skript>
importiere { onMounted, ref } von 'vue'

Standard exportieren {
  Name: "XtxMessage",
  Requisiten: {
    text: {
      Typ: Zeichenfolge,
      Standard: ''
    },
    Typ: {
      Typ: Zeichenfolge,
      // warnen Warnung Fehler Fehler Erfolg Erfolg Standard: „warnen“
    }
  },
  aufstellen () {
    // Definieren Sie ein Objekt, das drei Stile enthält. Der Objektschlüssel ist vom Typ String const style = {
      warnen:
        Symbol: „Symbol-Warnung“,
        Farbe: '#E6A23C',
        Hintergrundfarbe: 'rgb(253, 246, 236)',
        Rahmenfarbe: 'rgb(250, 236, 216)'
      },
      Fehler: {
        Symbol: „Symbol-Shanchu“,
        Farbe: '#F56C6C',
        Hintergrundfarbe: 'rgb(254, 240, 240)',
        Rahmenfarbe: 'rgb(253, 226, 226)'
      },
      Erfolg: {
        Symbol: 'icon-queren2',
        Farbe: '#67C23A',
        Hintergrundfarbe: 'rgb(240, 249, 235)',
        Rahmenfarbe: 'rgb(225, 243, 216)'
      }
    }
    // Animation steuern const isShow = ref(false)
    // Auslösen bei Mounted(() => {
      isShow.value = true
    })
    return { Stil, istAnzeigen }
  }
}
</Skript>
<style scoped lang="weniger">
.runter {
  &-eingeben {
    &-aus {
      transformieren: übersetzen3d(0, -75px, 0);
      Deckkraft: 0;
    }
    &-aktiv {
      Übergang: alle 0,5 s;
    }
    &-Zu {
      transformieren: keine;
      Deckkraft: 1;
    }
  }
}
.xtx-Nachricht {
  Breite: 300px;
  Höhe: 50px;
  Position: fest;
  Z-Index: 9999;
  links: 50%;
  Rand links: -150px;
  oben: 25px;
  Zeilenhöhe: 50px;
  Polsterung: 0 25px;
  Rand: 1px durchgezogen #e4e4e4;
  Hintergrund: #f5f5f5;
  Farbe: #999;
  Rahmenradius: 4px;
  ich {
    Rand rechts: 4px;
    vertikale Ausrichtung: Mitte;
  }
  .text {
    vertikale Ausrichtung: Mitte;
  }
}
</Stil>

// Die folgende Methode muss einen Eingabeaufforderungseffekt rendern: import { createVNode, render } from 'vue'
XtxMessage aus „./xtx-message.vue“ importieren

//DOM-Container dynamisch erstellen const div = document.createElement('div')
div.setAttribute('Klasse', 'xtx-Nachrichtencontainer')
Dokument.Body.AnhängenKind(div)

export default ({ Text, Typ }) => {
  let timer = null
  // createVNode wird verwendet, um einen virtuellen Knoten zu erstellen // Parameter 1 unterstützt die Komponente // Parameter 2 stellt die an die Komponente übergebenen Optionen dar const vnode = createVNode(XtxMessage, { text, type })
  // Rendere den virtuellen Knoten in das DOM der Seite // Parameter der Renderfunktion // Parameter 1: gibt den zu rendernden Inhalt an (virtueller Knoten)
  // Parameter 2: gibt den Zielort des Renderings an (DOM-Element)
  rendern(vnode, div)

  // Hoffe, dass die Eingabeaufforderung nach 1 Sekunde verschwindet clearTimeout(timer)
  Timer = setzeTimeout(() => {
    // Lösche den Inhalt von div render(null, div)
  }, 1000)
}

// $message({ text: 'Anmeldung fehlgeschlagen', type: 'error'})

Nachricht aus './Message' importieren
Standard exportieren {
  installieren(App) {
    // Wenn Sie globale Eigenschaften bereitstellen möchten, können Sie die Eigenschaft this.$message über die Komponenteninstanz aufrufen.
    app.config.globalProperties.$message = Nachricht // Prototypfunktion}
}

Nachricht aus '@/components/library/Message' importieren
aufstellen () {
    // Anmeldung auslösen const handleLogin = async () => {
      // Manuelle Formularvalidierung const flag = await target.value.validate()
      wenn (Flagge) {
        // Überprüfung erfolgreich, rufe die Schnittstelle zum Anmelden auf // Wenn die Anmeldung fehlschlägt, melde dich mit der Meldung „Message({ type: 'error', text: 'Login failed' })“ an.
      }
    }
    montiert () {
      this.$message({ Typ: 'Fehler', Text: 'Anmeldung fehlgeschlagen' })
    }
}

// Holen Sie sich das Instanzobjekt der Komponente: ähnlich wie beim vorherigen this
    const Instanz = getCurrentInstance()
     // Klicken Sie hier, um sich anzumelden const handleLogin = async () => {
      const valid = warte auf Ziel.Wert.Validieren()
      if (gültig) {
        // Formularüberprüfung erfolgreich abgeschlossen. Rufen Sie die Schnittstelle zum Anmelden auf. // Message({ text: 'Anmeldung fehlgeschlagen', type: 'error' })
        instance.proxy.$message({ text: 'Anmeldung fehlgeschlagen', type: 'error' })
      }
    }