como pueden ver, he creado un componente. Y estoy informando a mi secuencia de comandos que estoy escuchando un detector de eventos de ventana (mensaje). De hecho, quiero hacer que cada vez que se llame a este EventListnere, agregue una nueva Notificación en el cuadro de notificación dorado. ¿Cómo archivaría eso en esbelto? ?
<script> import Notification from './Components/Notification.svelte'; let type,text,time,title,icon,position,top,progress let slideIn = true; let showNoti; $: if(!slideIn) { slideIn === false; } window.addEventListener('message', (event) => { showNoti = true; if(showNoti) { let data = event.data; type = data.type text = data.text time = data.time title = data.title icon = data.icons; top = data.top; progress = data.progress; position = data.position; if(type == "success") { type = "success" }else if(type == "error") { type = "error" }else if(type == "money") { type = "money" } setTimeout(() => { slideIn = false; }, time); } }); </script> <main> {#if showNoti} <div class="notif-container {position}" style="top: {top}"> <div class="notify_box"> <Notification text={text} type={type} time={time} title={title} icon={icon} position={position} top={top} progress={progress} slideIn={slideIn} /> </div> </div> {/if} </main> <style> </style>Si desea tener una serie de bloques de notificación, debe usar una matriz. Agregue las notificaciones a esta matriz y simplemente recorra para mostrarlas.
<script> let notifications = [] window.addEventlistener() { // create here a new notifications object and add it to the array // make sure to have an assignment to 'notifications' notifciation = [...notifications, newNotification]; } </script> {#each notification as notification} <!-- add markup here --> <Notification {...notification} /> {/each} El código aquí usa {...notification} para pasar los accesorios a los componentes, esto funciona siempre que la propiedad en el componente y la propiedad en el objeto sean exactamente las mismas.