[Blazor WebAssembly] 学习随笔——组件1.微信弹框（WXDialog）
总有以下的需求：[*]等待用户确认，就是有【确定】和【取消】按钮，有个标题和内容的弹框（比如：您确定要删除吗？）
[*]就是告知一下，就是上面的【取消】按钮不显示（比如：保存成功！）
[*]莫有按钮，几秒钟后自己消失，就是所谓的toast(比如：已完成）
[*]莫有按钮，需要发送命令才能消息（比如：数据加载中）
一开始犯了经验主义错误，还想着要调用js啥的，有点头大；后来醒悟过来的，所谓显示与否，不就加一个bool的参数，然后设置true或者false吗?so easy,so方便！
一、组件（WXDialog.razor）
@if (IsShowConfirm){ @Title @Body @if (IsShowBtnCancel) { 取消 } 确定 }@if (IsShowToast){ @Title
}@if (IsShowLoading){ @Title
}@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）
@page "/test"测试Dialg
测试一下@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://img2024.cnblogs.com/blog/10915/202402/10915-20240212201204519-1326505223.png
https://img2024.cnblogs.com/blog/10915/202402/10915-20240212201256572-1905082757.png
https://img2024.cnblogs.com/blog/10915/202402/10915-20240212201431749-2029700307.png
https://img2024.cnblogs.com/blog/10915/202402/10915-20240212201507124-1178929278.png
最后
总要有最后的，最后感觉调用不是太方便，要写两行，折腾过级联参数，变成一行。不知道有没有象静态方法一样的调用方式？知道的吱一声。
来源:https://www.cnblogs.com/catzhou/p/18014102
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！
页:
[1]