如您所見，我創建了一個組件。我正在向我的腳本報告我正在偵聽一個視窗事件偵聽器（訊息）。實際上，我希望每次呼叫此 EventListnere 時都在黃金通知框下添加一個新通知。我將如何將其歸檔為 svelte。?
<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>
uj5u.com熱心網友回復：
如果你想有一系列的通知塊，你需要使用一個陣列。將通知添加到此陣列并簡單地回圈顯示它們。
<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}
此處的代碼用于{...notification}將 props 傳遞給組件，只要組件上的屬性和物件中的屬性完全相同即可。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/442495.html
標籤：javascript 苗条