Vue3 implementiert ein Beispiel für eine Nachrichtenkomponente

// Nachrichtentyp: Text, Erfolg, Fehler ["Text", "Erfolg", "Fehler"]

// Nachrichtenoptionen
[String]: Nachrichteninhalt [Object]: Nachrichtenkonfiguration // Optionskonfigurationstext [String] "" Nachrichteninhalt Dauer [Zahl] 0 Die Verzögerung in Millisekunden für das automatische Schließen, 0 bedeutet kein automatisches Schließen close [Boolean] false Ob die Schließen-Schaltfläche angezeigt werden soll // Aufrufende Methode Message[type](option);

Message.text("Dies ist eine Nachrichtenaufforderung");
Nachricht.Fehler({
    Text: "Netzwerkfehler, bitte versuchen Sie es später noch einmal",
    Dauer: 3000,
    schließen: wahr
});

|--- Nachricht
 |--- Quelle
 | |--- Message.vue // Komponentenvorlage| |--- Message.less // Unterstützung für Komponentenstil bereitstellen| |--- Message.js // Konfiguration lesen und Komponenteninstanz rendern| |--- Instance.js // Komponenteninstanz|---index.js // Komponente verfügbar machen

<Vorlage>
  <!-- Nachrichtenliste-->
  <Übergangsname="Folie-Überblendung">
    <div Klasse="Nachrichtencontainer" v-show="sichtbar">
      <!-- Inhalt -->
      <div Klasse="Nachrichteninhalt">

        <!-- Nachrichtentypsymbol, wird durch den Nachrichtentyp bestimmt, für den Texttyp wird kein Symbol konfiguriert-->
        <div Klasse="Nachrichtensymbol" v-if="config.icon">
          <i: class="Konfigurationssymbol"></i>
        </div>

  <!-- Nachrichtentext -->
        <span v-text="konfiguration.inhalt"></span>

        <!-- Nachricht manuell schließen -->
        <div Klasse="Option" v-if="!config.close">
          <i class="ri-close-fill" @click="onClose"></i>
        </div>

      </div>
    </div>
  </Übergang>
</Vorlage>

@Radius: 4px;
@normalHeight: 34px;

.Nachricht {
  Position: fest;
  oben: 0;
  links: 0;
  Breite: 100 %;
  Textausrichtung: zentriert;
  Box-Größe: Rahmenbox;
  Z-Index: 9999;
  transformieren: übersetzenZ(9999px);
  Polsterung oben: 28px;
  Übergang: oben 0,4 Sekunden Leichtigkeit;

  .Nachrichtencontainer {
    Rand unten: 14px;

    .Nachrichtensymbol {
      Anzeige: Inline-Block;

      ich {
        Schriftgröße: 18px;
        Schriftstärke: 400;
        Rand oben: -3px;
        Rand rechts: 6px;
        Anzeige: Inline-Block;
        Box-Größe: Rahmenbox;
        vertikale Ausrichtung: Mitte;
      }

      .ri-checkbox-circle-fill {
        Farbe: #58c05b;
      }

      .ri-close-circle-fill {
        Farbe: #fd4f4d;
      }

    .Nachrichteninhalt {
      Anzeige: Inline-Block;
      Polsterung: 4px 18px;
      Höhe: @normalHeight;
      Textausrichtung: links;
      Zeilenhöhe: @normalHeight;
      Schriftgröße: 14px;
      Schriftstärke: 400;
      Rahmenradius: @radius;
      Farbe: #595959;
      Kastenschatten: 0 4px 12px rgba (0, 0, 0, .15);
      Hintergrund: #ffffff;

      .option {
        Anzeige: Inline-Block;
        Zeigerereignisse: alle;
        Rand links: 18px;

        ich {
          Schriftgröße: 18px;
          Schriftstärke: 400;
          Rand oben: -3px;
          Anzeige: Inline-Block;
          Box-Größe: Rahmenbox;
          vertikale Ausrichtung: Mitte;
          Cursor: Zeiger;
          Farbe: #d9d9d9;
          Übergang: Farbe, 0,2 s langsam;

          &:schweben {
            Farbe: #ff7c75;
            Übergang: Farbe, 0,2 s langsam;
          }
        }
      }
    }
  }

  .slide-fade-enter-active {
    Übergang: alle 0,2 s Auslaufen;
  }

  .slide-fade-leave-active {
    Übergang: alle 0,2 Sekunden leicht;
  }

  .schieben-ausblenden-eingeben-von,
  .slide-fade-leave-to {
    transformieren: übersetzenY(-20px);
    Deckkraft: 0;
  }
}

<Skript>
importiere { reaktiv, toRefs } von "vue";
Standard exportieren {
  Requisiten: {
    config: { Typ: Objekt, Standard: () => {} }, // Nachrichtenkonfigurationselement entfernen: { Typ: Funktion, Standard: () => {} }, // Mount-Callback abbrechen },
  setup(Requisiten) {
    const state = reaktiv({
      sichtbar: falsch,
    })

    // Nachricht öffnen const onOpen = (config) => {
      setzeTimeout(() => {
        Zustand.sichtbar = wahr;
      }, 10)

      // Nachricht nach einer angegebenen Zeit entfernen if (config.duration !== 0) {
        setzeTimeout(() => {
          beimSchließen();
        }, Konfigurationsdauer);
      }
    }

    beim Öffnen(props.config)

    //Nachricht schließen const onClose = () => {
      Zustand.sichtbar = falsch;
      setzeTimeout(() => {
        Eigenschaften.entfernen()
      }, 200)
    };

    zurückkehren {
      …toRefs(Zustand),
      beim Öffnen,
      beim Schließen,
    };
  },
};
</Skript>

importiere { createApp } von 'vue'
Nachricht aus „./Message.vue“ importieren

/**
 * Nachrichteninstanzvorgang * @param {Object} cfg-Instanzkonfiguration */
const createInstance = cfg => {
 const config = cfg || {}
 // 1. Erzeugen Sie einen Paketcontainer und legen Sie das äußere Klassenattribut und die Nachrichtenanzahl fest. // 2. Erzeugen Sie eine Instanz und hängen Sie diese in den Body ein.
 
 // 3. Implementieren Sie die Methode zum Abbrechen des Mountens und zum Neustarten der Zählung nach dem Abbrechen des Mountens}
Standardmäßig exportieren: Instanz erstellen

let messageNode = document.createElement('div')
let attr = document.createAttribute("Klasse")
attr.value = "Nachricht"
messageNode.setAttributeNode(attr)

const height = 54 // Höhe eines einzelnen Nachrichtenfelds const messageList = document.getElementsByClassName('message')
messageNode.style.top = `${messageList.length * Höhe}px`

const app = createApp(Nachricht, {
  Konfiguration,
  entfernen() {
    handleRemove()//Entfernen Sie das Element. Nachdem die Nachricht geschlossen wurde, heben Sie die Bereitstellung auf und entfernen Sie es aus dem Dom.}
})

// Mounten Sie die Instanz und hängen Sie sie an das Ende des Textkörpers an. app.vm = app.mount(messageNode)
Dokument.Body.AnhängenUntergeordnetesElement(messageNode)

app.schließen = () => {
  handleEntfernen()
}

Rückgabe-App

const handleRemove = ()=>{
  app.unmount(Nachrichtenknoten)
  Dokument.Body.RemoveChild(Nachrichtenknoten)
  ResetMsgTop()
 }

const resetMsgTop = () => {
  für (lass i = 0; i < Nachrichtenliste.Länge; i++) {
    Nachrichtenliste[i].style.top = `${i * Höhe}px`
  }
}

importiere createInstance aus „./Instance.js“

/**
 * Konfiguration lesen und Nachricht rendern
 * @param {Object} typeCfg Typkonfiguration * @param {Object/String} cfg benutzerdefinierte Konfiguration */
Funktion renderMsg(typeCfg = {}, cfg = '') {
  // Ermöglicht die direkte Übergabe des Nachrichteninhalts, daher muss der Typ der übergebenen CFG bestimmt werden const isContent = typeof cfg === 'string'

  // Benutzerdefinierte Konfiguration integrieren cfg = isContent ? {
    Inhalt: cfg
  } : cfg

  const config = Object.assign({}, typeCfg, cfg) // Konfiguration zusammenführen const {
    Typ = 'Text', // Nachrichtentyp Inhalt = '', // Nachrichteninhalt Dauer = 3000, // automatische Schließverzögerungszeit schließen = false // ob die Schaltfläche „Schließen“ angezeigt werden soll } = config

  // Eine Instanz erstellen return createInstance({
    Typ,
    Inhalt,
    Dauer,
    schließen
  })
}

Standard exportieren {
  // Nur-Text-Nachricht text(cfg = "") {
    const textCfg = {
      Typ: "Text",
      Symbol: ''
    }

    gibt RenderMsg zurück (TextCfg, CFG);
  },
  // Erfolgsaufforderung success(cfg = "") {
    const ErfolgCfg = {
      Typ: „Erfolg“,
      Symbol: „ri-checkbox-circle-fill“
    }

    gibt RenderMsg zurück (ErfolgsCfg, cfg);
  },
  // Fehlermeldung error(cfg = "") {
    const FehlerCfg = {
      Typ: "Fehler",
      Symbol: „ri-Kreis schließen-füllen“
    }

    gibt RenderMsg zurück (FehlerCfg, cfg);
  },
}

Nachricht aus „./src/Message.js“ importieren;

Standardnachricht exportieren;