[Blazor WebAssembly] 學習隨筆——組件1.微信彈框（WXDialog）

總有以下的需求：

1. 等待用戶確認，就是有【確定】和【取消】按鈕，有個標題和內容的彈框（比如：您確定要刪除嗎？）
2. 就是告知一下，就是上面的【取消】按鈕不顯示（比如：保存成功！）
3. 莫有按鈕，幾秒鐘後自己消失，就是所謂的toast(比如：已完成）
4. 莫有按鈕，需要發送命令才能消息（比如：數據載入中）

一開始犯了經驗主義錯誤，還想著要調用js啥的，有點頭大；後來醒悟過來的，所謂顯示與否，不就加一個bool的參數，然後設置true或者false嗎?so easy,so方便！

一、組件（WXDialog.razor）

@if (IsShowConfirm)
{
    <div class="js_dialog" style="opacity: 1;">
        <div class="weui-mask"></div>
        <div class="weui-dialog">
            <div class="weui-dialog__hd"><strong class="weui-dialog__title">@Title</strong></div>
            <div class="weui-dialog__bd">@Body</div>
            <div class="weui-dialog__ft">
                @if (IsShowBtnCancel)
                {
                    <a @onclick="()=>OnClick(false)" href="javascript:;" class="weui-dialog__btn weui-dialog__btn_default">取消</a>
                }
                <a @onclick="()=>OnClick(true)" href="javascript:;" class="weui-dialog__btn weui-dialog__btn_primary">確定</a>
            </div>
        </div>
    </div>
}
@if (IsShowToast)
{
    <div style="opacity: 1;">
        <div class="weui-mask_transparent"></div>
        <div class="weui-toast">
            <i class="weui-icon-success-no-circle weui-icon_toast"></i>
            <p class="weui-toast__content">@Title</p>
        </div>
    </div>

}
@if (IsShowLoading)
{
    <div style="opacity: 1;">
        <div class="weui-mask_transparent"></div>
        <div class="weui-toast">
            <i class="weui-loading weui-icon_toast"></i>
            <p class="weui-toast__content">@Title</p>
        </div>
    </div>

}


@code {
    private string? Title;
    private string? Body;
    private bool IsShowConfirm;
    private bool IsShowToast;
    private bool IsShowLoading;
    private bool IsShowBtnCancel;
    private TaskCompletionSource<bool> TaskClick = default!;

    public Task<bool> ConfirmAsync(string body="您確定要刪除嗎？", string title = "憶客科技")
    {
        TaskClick = new TaskCompletionSource<bool>();
        IsShowConfirm = true;
        IsShowBtnCancel = true;
        Title = title;
        Body = body;
        StateHasChanged();
        return TaskClick.Task;
    }

    public Task<bool> MessageAsync(string body="保存成功！", string title = "憶客科技")
    {
        TaskClick = new TaskCompletionSource<bool>();
        IsShowConfirm = true;
        IsShowBtnCancel = false;
        Title = title;
        Body = body;
        StateHasChanged();
        return TaskClick.Task;
    }
    public void Toast(string title = "已完成", int secondsDelay = 3)
    {
        IsShowToast = true;
        Title = title;
        StateHasChanged();
        Task.Run(async () =>
        {
            await Task.Delay(secondsDelay * 1000);
            IsShowToast = false;
            StateHasChanged();
        });
    }
    public void Loading(string title = "數據載入中")
    {
        IsShowLoading = true;
        Title = title;
        StateHasChanged();
    }
    public void HideLoading()
    {
        IsShowLoading = false;
        StateHasChanged();
    }
    private void OnClick(bool result)
    {
        IsShowConfirm = false;
        TaskClick.SetResult(result);
    }
}

二、測試（Test.razor）

@page "/test"

<h3>測試Dialg</h3>
<WXDialog @ref="MessageBox" />
<a href="javascript:;" @onclick="OnClickAsync">測試一下</a>
@code {
    private WXDialog MessageBox = default!;

    private async Task OnClickAsync()
    {
        var ret = await MessageBox!.ConfirmAsync();
        await MessageBox.MessageAsync();
        MessageBox.Toast();
        MessageBox.Loading();
        await Task.Delay(2000);
        MessageBox.HideLoading();

    }
}

三、效果

最後
總要有最後的，最後感覺調用不是太方便，要寫兩行，折騰過級聯參數，變成一行。不知道有沒有象靜態方法一樣的調用方式？知道的吱一聲。