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 -->
|
<!-- Use fly in and fade out for a sleek animation -->
|
||||||
<div
|
<div
|
||||||
class="toast-msg type-{msg.type}"
|
class="toast-msg type-{msg.type}"
|
||||||
in:fly={{ y: -20, duration: 300 }}
|
in:fly={{ y: 20, duration: 300 }}
|
||||||
out:fade={{ duration: 200 }}
|
out:fade={{ duration: 200 }}
|
||||||
>
|
>
|
||||||
{#if msg.type === 'success'}
|
{#if msg.type === 'success'}
|
||||||
@@ -43,7 +43,7 @@
|
|||||||
<style>
|
<style>
|
||||||
.toast-container {
|
.toast-container {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
top: 25px;
|
bottom: 25px;
|
||||||
right: 25px;
|
right: 25px;
|
||||||
z-index: 9999;
|
z-index: 9999;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|||||||
@@ -1,3 +1,5 @@
|
|||||||
|
import { untrack } from 'svelte';
|
||||||
|
|
||||||
export type ToastType = 'success' | 'error' | 'info';
|
export type ToastType = 'success' | 'error' | 'info';
|
||||||
|
|
||||||
export interface ToastMessage {
|
export interface ToastMessage {
|
||||||
@@ -11,18 +13,22 @@ class ToastState {
|
|||||||
private nextId = 0;
|
private nextId = 0;
|
||||||
|
|
||||||
add(text: string, type: ToastType = 'info', duration: number = 3000) {
|
add(text: string, type: ToastType = 'info', duration: number = 3000) {
|
||||||
const id = this.nextId++;
|
untrack(() => {
|
||||||
this.messages.push({ id, text, type });
|
const id = this.nextId++;
|
||||||
|
this.messages.push({ id, text, type });
|
||||||
|
|
||||||
if (duration > 0) {
|
if (duration > 0) {
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
this.remove(id);
|
this.remove(id);
|
||||||
}, duration);
|
}, duration);
|
||||||
}
|
}
|
||||||
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
remove(id: number) {
|
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