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

总有以下的需求：

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

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

1. @if (IsShowConfirm)
2. {
3.    
4.         
5.         
6.             <strong >@Title</strong>
7.             @Body
8.             
9.                 @if (IsShowBtnCancel)
10.                 {
11.                     <a @onclick="()=>OnClick(false)" href="javascript:;" >取消</a>
12.                 }
13.                 <a @onclick="()=>OnClick(true)" href="javascript:;" >确定</a>
14.             
15.         
16.    
17. }
18. @if (IsShowToast)
19. {
20.    
21.         
22.         
23.             <i ></i>
24.             <p >@Title</p>
25.         
26.    
28. }
29. @if (IsShowLoading)
30. {
31.    
32.         
33.         
34.             <i ></i>
35.             <p >@Title</p>
36.         
37.    
39. }
42. @code {
43.     private string? Title;
44.     private string? Body;
45.     private bool IsShowConfirm;
46.     private bool IsShowToast;
47.     private bool IsShowLoading;
48.     private bool IsShowBtnCancel;
49.     private TaskCompletionSource<bool> TaskClick = default!;
51.     public Task<bool> ConfirmAsync(string body="您确定要删除吗？", string title = "忆客科技")
52.     {
53.         TaskClick = new TaskCompletionSource<bool>();
54.         IsShowConfirm = true;
55.         IsShowBtnCancel = true;
56.         Title = title;
57.         Body = body;
58.         StateHasChanged();
59.         return TaskClick.Task;
60.     }
62.     public Task<bool> MessageAsync(string body="保存成功！", string title = "忆客科技")
63.     {
64.         TaskClick = new TaskCompletionSource<bool>();
65.         IsShowConfirm = true;
66.         IsShowBtnCancel = false;
67.         Title = title;
68.         Body = body;
69.         StateHasChanged();
70.         return TaskClick.Task;
71.     }
72.     public void Toast(string title = "已完成", int secondsDelay = 3)
73.     {
74.         IsShowToast = true;
75.         Title = title;
76.         StateHasChanged();
77.         Task.Run(async () =>
78.         {
79.             await Task.Delay(secondsDelay * 1000);
80.             IsShowToast = false;
81.             StateHasChanged();
82.         });
83.     }
84.     public void Loading(string title = "数据加载中")
85.     {
86.         IsShowLoading = true;
87.         Title = title;
88.         StateHasChanged();
89.     }
90.     public void HideLoading()
91.     {
92.         IsShowLoading = false;
93.         StateHasChanged();
94.     }
95.     private void OnClick(bool result)
96.     {
97.         IsShowConfirm = false;
98.         TaskClick.SetResult(result);
99.     }
100. }

复制代码

二、测试（Test.razor）

1. @page "/test"
3. <h3>测试Dialg</h3>
4. <WXDialog @ref="MessageBox" />
5. <a target="_blank" href="https://www.cnblogs.com/javascript:;" @onclick="OnClickAsync">测试一下</a>
6. @code {
7.     private WXDialog MessageBox = default!;
9.     private async Task OnClickAsync()
10.     {
11.         var ret = await MessageBox!.ConfirmAsync();
12.         await MessageBox.MessageAsync();
13.         MessageBox.Toast();
14.         MessageBox.Loading();
15.         await Task.Delay(2000);
16.         MessageBox.HideLoading();
18.     }
19. }

复制代码

三、效果




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

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！