fix: 修复 Toast 组件定位及状态管理逻辑
This commit is contained in:
1 parent
20d9ea92fc
commit
8af6ae8864
2 files changed
+16
-10
No files matched your search
@@ -8,7 +8,7 @@
|
||||
<!-- Use fly in and fade out for a sleek animation -->
|
||||
<div
|
||||
class="toast-msg type-{msg.type}"
|
||||
in:fly={{ y: -20, duration: 300 }}
|
||||
in:fly={{ y: 20, duration: 300 }}
|
||||
out:fade={{ duration: 200 }}
|
||||
>
|
||||
{#if msg.type === 'success'}
|
||||
@@ -43,7 +43,7 @@
|
||||
<style>
|
||||
.toast-container {
|
||||
position: fixed;
|
||||
top: 25px;
|
||||
bottom: 25px;
|
||||
right: 25px;
|
||||
z-index: 9999;
|
||||
display: flex;
|
||||
|
||||
@@ -1,3 +1,5 @@
|
||||
import { untrack } from 'svelte';
|
||||
|
||||
export type ToastType = 'success' | 'error' | 'info';
|
||||
|
||||
export interface ToastMessage {
|
||||
@@ -11,18 +13,22 @@ class ToastState {
|
||||
private nextId = 0;
|
||||
|
||||
add(text: string, type: ToastType = 'info', duration: number = 3000) {
|
||||
const id = this.nextId++;
|
||||
this.messages.push({ id, text, type });
|
||||
untrack(() => {
|
||||
const id = this.nextId++;
|
||||
this.messages.push({ id, text, type });
|
||||
|
||||
if (duration > 0) {
|
||||
setTimeout(() => {
|
||||
this.remove(id);
|
||||
}, duration);
|
||||
}
|
||||
if (duration > 0) {
|
||||
setTimeout(() => {
|
||||
this.remove(id);
|
||||
}, duration);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
remove(id: number) {
|
||||
this.messages = this.messages.filter((msg) => msg.id !== id);
|
||||
untrack(() => {
|
||||
this.messages = this.messages.filter((msg) => msg.id !== id);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Reference in new issue
Block a user