Detaillierte Erläuterung der Vue3-Kapselungsfunktion für Nachrichtenaufforderungsinstanzen

<Vorlage>
  <Übergangsname="nach unten">
    <div class="meine-Nachricht" :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: 'meineNachricht',
  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;
    }
  }
}
.meine-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>

//Symbol//Textimport { createVNode,render } von 'vue'
importiere meineNachricht aus „./message.vue“
//DOM-Container dynamisch erstellen const div = document.createElement('div')
div.setAttribute('Klasse','mein-Nachrichtencontainer')
Dokument.Body.AnhängenKind(div)
exportiere Standard ({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(myMessage,{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, es verschwindet nach 1s clearTimeout(timer)
   Timer = setzeTimeout(()=>{
     // Lösche den Inhalt von div render(null,div)
   },1000)
}
// $message({ text: 'Anmeldung fehlgeschlagen', type: 'error'})

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

Nachricht aus „./message.js“ importieren
aufstellen(){
  Nachricht ({Text: „Anmeldung fehlgeschlagen“, Typ: „Fehler“})
}

// Greifen Sie auf das Komponenteninstanzobjekt in der Setup-Funktion zu. Importieren Sie { getCurrentInstance } von „vue“.
   aufstellen(){
     const Instanz = getCurrentInstance()
     instance.proxy.$message({ text: 'Anmeldung fehlgeschlagen', type: 'error' })
   } 

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