[Blazor WebAssembly] 学习随笔——组件1.微信弹框(WXDialog) WebAssembly (WXDialog) Assembly] WXDialog [Blazor Blazor 学习随笔 微信弹框 Web
总有以下的需求:
- 等待用户确认,就是有【确定】和【取消】按钮,有个标题和内容的弹框(比如:您确定要删除吗?)
- 就是告知一下,就是上面的【取消】按钮不显示(比如:保存成功!)
- 莫有按钮,几秒钟后自己消失,就是所谓的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();
}
}
三、效果
最后
总要有最后的,最后感觉调用不是太方便,要写两行,折腾过级联参数,变成一行。不知道有没有象静态方法一样的调用方式?知道的吱一声。