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

[Blazor WebAssembly] 学习随笔——组件1.微信弹框(WXDialog) WebAssembly (WXDialog) Assembly] WXDialog [Blazor Blazor 学习随笔 微信弹框 Web

总有以下的需求:

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

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

    }
}

三、效果




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

评论