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

寒童

总有以下的需求：

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

一开始犯了经验主义错误，还想着要调用js啥的，有点头大；后来醒悟过来的，所谓显示与否，不就加一个bool的参数，然后设置true或者false吗?so easy,so方便！
一、组件（WXDialog.razor）

1. @if (IsShowConfirm){                                [b]@Title[/b]            @Body                            @if (IsShowBtnCancel)                {                    取消                }                确定                        }@if (IsShowToast){                                            @Title
2.             }@if (IsShowLoading){                                            @Title
3.             }@code {    private string? Title;    private string? Body;    private bool IsShowConfirm;    private bool IsShowToast;    private bool IsShowLoading;    private bool IsShowBtnCancel;    private TaskCompletionSource TaskClick = default!;    public Task ConfirmAsync(string body="您确定要删除吗？", string title = "忆客科技")    {        TaskClick = new TaskCompletionSource();        IsShowConfirm = true;        IsShowBtnCancel = true;        Title = title;        Body = body;        StateHasChanged();        return TaskClick.Task;    }    public Task MessageAsync(string body="保存成功！", string title = "忆客科技")    {        TaskClick = new TaskCompletionSource();        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）

1. @page "/test"[size=4]测试Dialg[/size]
3. [url=https://www.cnblogs.com/javascript:;]测试一下[/url]@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();    }}

复制代码

三、效果

最后
总要有最后的，最后感觉调用不是太方便，要写两行，折腾过级联参数，变成一行。不知道有没有象静态方法一样的调用方式？知道的吱一声。

来源:https://www.cnblogs.com/catzhou/p/18014102
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！