[Blazor WebAssembly] 学习随笔——组件1.微信弹框（WXDialog）-Toy模板网

这篇具有很好参考价值的文章主要介绍了[Blazor WebAssembly] 学习随笔——组件1.微信弹框（WXDialog）。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

总有以下的需求：

等待用户确认，就是有【确定】和【取消】按钮，有个标题和内容的弹框（比如：您确定要删除吗？）
就是告知一下，就是上面的【取消】按钮不显示（比如：保存成功！）
莫有按钮，几秒钟后自己消失，就是所谓的toast(比如：已完成）
莫有按钮，需要发送命令才能消息（比如：数据加载中）

一开始犯了经验主义错误，还想着要调用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();

    }
}

三、效果

[Blazor WebAssembly] 学习随笔——组件1.微信弹框（WXDialog）