Blazor共享UI Toaster组件

// ToasterService.cs
public interface IToasterService
{
    Task Show(string message, ToastLevel level);
}

public class ToasterService : IToasterService
{
    public async Task Show(string message, ToastLevel level)
    {
        await JsRuntime.InvokeVoidAsync("showToast", message, level.ToString().ToLower());
    }
}

<!-- toaster.razor -->
<div id="toast-container">
    <div id="toast" class="@toastClass">
        @Message
    </div>
</div>

@code {
    [Parameter]
    public string Message { get; set; }

    [Parameter]
    public ToastLevel Level { get; set; }

    private string toastClass => $"toast {Level.ToString().ToLower()}";

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            await JsRuntime.InvokeVoidAsync("initToast");
        }
    }
}

// wwwroot/js/toaster.js
window.initToast = function () {
    document.getElementById('toast-container').style.display = 'none';
};

window.showToast = function (message, level) {
    var toast = document.getElementById('toast');
    toast.innerHTML = message;
    toast.className = 'toast ' + level;
    document.getElementById('toast-container').style.display = 'block';
    setTimeout(function () {
        document.getElementById('toast-container').style.display = 'none';
    }, 3000);
};