From 1a44964afbb1873166549951ae28d0f1a9f95a75 Mon Sep 17 00:00:00 2001 From: Argo-Cloud Date: Sat, 27 Mar 2021 18:15:15 +0800 Subject: [PATCH 1/4] =?UTF-8?q?refactor:=20=E7=A7=BB=E9=99=A4=E4=B8=8D?= =?UTF-8?q?=E4=BD=BF=E7=94=A8=E7=9A=84=E4=BB=A3=E7=A0=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/BootstrapBlazor.Shared/Pages/Samples/Markdowns.razor.cs | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/BootstrapBlazor.Shared/Pages/Samples/Markdowns.razor.cs b/src/BootstrapBlazor.Shared/Pages/Samples/Markdowns.razor.cs index c06486b43..219492632 100644 --- a/src/BootstrapBlazor.Shared/Pages/Samples/Markdowns.razor.cs +++ b/src/BootstrapBlazor.Shared/Pages/Samples/Markdowns.razor.cs @@ -18,8 +18,6 @@ namespace BootstrapBlazor.Shared.Pages private string? HtmlString { get; set; } - private string ShowHideButtonString { get; set; } = "隐藏 Editor"; - /// /// 获得/设置 版本号字符串 /// -- Gitee From 4dc79d8ecdc75efe2d475ba3a6b4989d35f3e784 Mon Sep 17 00:00:00 2001 From: Argo-Cloud Date: Sat, 27 Mar 2021 20:14:17 +0800 Subject: [PATCH 2/4] =?UTF-8?q?feat:=20Button=20=E5=A2=9E=E5=8A=A0=20IsAsy?= =?UTF-8?q?nc=20=E5=B1=9E=E6=80=A7?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Components/Button/ButtonBase.cs | 78 +++++++++++++++---- 1 file changed, 61 insertions(+), 17 deletions(-) diff --git a/src/BootstrapBlazor/Components/Button/ButtonBase.cs b/src/BootstrapBlazor/Components/Button/ButtonBase.cs index 07e48e0cd..e8a497313 100644 --- a/src/BootstrapBlazor/Components/Button/ButtonBase.cs +++ b/src/BootstrapBlazor/Components/Button/ButtonBase.cs @@ -3,7 +3,6 @@ // Website: https://www.blazor.zone or https://argozhang.github.io/ using Microsoft.AspNetCore.Components; -using Microsoft.AspNetCore.Components.Forms; using Microsoft.AspNetCore.Components.Web; using System; using System.Collections.Generic; @@ -77,6 +76,20 @@ namespace BootstrapBlazor.Components [Parameter] public string? Icon { get; set; } + /// + /// 获得/设置 正在加载动画图标 默认为 fa fa-spin fa-spinner + /// + [Parameter] + public string LoadingIcon { get; set; } = "fa fa-fw fa-spin fa-spinner"; + + /// + /// 获得/设置 是否为异步按钮，默认为 false 如果为 true 表示是异步按钮，点击按钮后禁用自身并且等待异步完成，过程中显示 loading 动画 + /// + [Parameter] + public bool IsAsync { get; set; } + + private bool IsLoading { get; set; } + /// /// 获得/设置 显示文字 /// @@ -119,18 +132,6 @@ namespace BootstrapBlazor.Components [Parameter] public RenderFragment? ChildContent { get; set; } - /// - /// 获得 EditContext 实例 - /// - [CascadingParameter] - protected EditContext? EditContext { get; set; } - - /// - /// 获得 ValidateFormBase 实例 - /// - [CascadingParameter] - public ValidateForm? ValidateForm { get; set; } - /// /// OnInitialized 方法 /// @@ -138,20 +139,55 @@ namespace BootstrapBlazor.Components { base.OnInitialized(); - if (AdditionalAttributes == null) AdditionalAttributes = new Dictionary(); + if (AdditionalAttributes == null) + { + AdditionalAttributes = new Dictionary(); + } if (!AdditionalAttributes.TryGetValue("type", out var _)) { AdditionalAttributes["type"] = "button"; } + } + + /// + /// OnParametersSetAsync 方法 + /// + /// + protected override void OnParametersSet() + { + base.OnParametersSet(); + + if (IsAsync && IsLoading) + { + Icon = LoadingIcon; + } var onClick = OnClick; OnClick = EventCallback.Factory.Create(this, async e => { - if (!IsDisabled) + var icon = Icon; + if (IsAsync) + { + IsLoading = true; + Icon = ""; + IsDisabled = true; + } + if (OnClickWithoutRender != null) + { + await OnClickWithoutRender.Invoke(); + } + + if (onClick.HasDelegate) + { + await onClick.InvokeAsync(e); + } + + if (IsAsync) { - if (OnClickWithoutRender != null) await OnClickWithoutRender.Invoke(); - if (onClick.HasDelegate) await onClick.InvokeAsync(e); + IsLoading = false; + Icon = icon; + IsDisabled = false; } }); } @@ -175,16 +211,24 @@ namespace BootstrapBlazor.Components if (IsDisabled) { if (Tooltip.PopoverType == PopoverType.Tooltip) + { await JSRuntime.InvokeVoidAsync(null, "bb_tooltip", id, "dispose"); + } else + { await JSRuntime.InvokeVoidAsync(null, "bb_popover", id, "dispose"); + } } else { if (Tooltip.PopoverType == PopoverType.Tooltip) + { await ShowTooltip(); + } else + { await ShowPopover(); + } } } } -- Gitee From be51bd62de8c34bd93da6ad4e98fa23ee9c9a08c Mon Sep 17 00:00:00 2001 From: Argo-Cloud Date: Sat, 27 Mar 2021 20:14:30 +0800 Subject: [PATCH 3/4] =?UTF-8?q?docs:=20=E5=A2=9E=E5=8A=A0=E5=BC=82?= =?UTF-8?q?=E6=AD=A5=E5=8A=A0=E8=BD=BD=E7=A4=BA=E4=BE=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Pages/Samples/Buttons.razor | 9 +++++++++ .../Pages/Samples/Buttons.razor.cs | 20 +++++++++++++++++-- 2 files changed, 27 insertions(+), 2 deletions(-) diff --git a/src/BootstrapBlazor.Shared/Pages/Samples/Buttons.razor b/src/BootstrapBlazor.Shared/Pages/Samples/Buttons.razor index ba5de9b7a..fb184d3af 100644 --- a/src/BootstrapBlazor.Shared/Pages/Samples/Buttons.razor +++ b/src/BootstrapBlazor.Shared/Pages/Samples/Buttons.razor @@ -154,6 +154,15 @@ + +

当按钮为异步请求按钮时，点击按钮后自身状态会改变为禁用状态，同时显示 Loading 小图标，异步请求结束后恢复正常，本例中点击 异步请求按钮后，显示请求加载动画，5 秒后恢复正常

+
+
+
+
+ + diff --git a/src/BootstrapBlazor.Shared/Pages/Samples/Buttons.razor.cs b/src/BootstrapBlazor.Shared/Pages/Samples/Buttons.razor.cs index 4f53d4c19..aecf952c8 100644 --- a/src/BootstrapBlazor.Shared/Pages/Samples/Buttons.razor.cs +++ b/src/BootstrapBlazor.Shared/Pages/Samples/Buttons.razor.cs @@ -58,11 +58,13 @@ namespace BootstrapBlazor.Shared.Pages return Task.CompletedTask; } + private static Task ClickAsyncButton() => Task.Delay(5000); + /// /// 获得事件方法 /// /// - private IEnumerable GetEvents() => new EventItem[] + private static IEnumerable GetEvents() => new EventItem[] { new EventItem() { @@ -82,7 +84,7 @@ namespace BootstrapBlazor.Shared.Pages /// 获得属性方法 /// /// - private IEnumerable GetAttributes() => new AttributeItem[] + private static IEnumerable GetAttributes() => new AttributeItem[] { // TODO: 移动到数据库中 new AttributeItem() { @@ -99,6 +101,13 @@ namespace BootstrapBlazor.Shared.Pages ValueList = "", DefaultValue = "" }, + new AttributeItem() { + Name = "LoadingIcon", + Description = "异步加载时的动画图标", + Type = "string", + ValueList = "", + DefaultValue = "fa fa-fw fa-spin fa-spinner" + }, new AttributeItem() { Name = "Text", Description = "显示文字", @@ -141,6 +150,13 @@ namespace BootstrapBlazor.Shared.Pages ValueList = " — ", DefaultValue = "false" }, + new AttributeItem() { + Name = "IsAsync", + Description = "是否为异步按钮", + Type = "boolean", + ValueList = " — ", + DefaultValue = "false" + }, new AttributeItem() { Name = "ChildContent", Description = "内容", -- Gitee From 8d314dad7de3bcfa0a110c6b604b0fa5e6e8ffd1 Mon Sep 17 00:00:00 2001 From: Argo-Cloud Date: Sat, 27 Mar 2021 20:16:44 +0800 Subject: [PATCH 4/4] =?UTF-8?q?docs:=20=E6=9B=B4=E6=96=B0=E6=8C=89?= =?UTF-8?q?=E9=92=AE=E8=8F=9C=E5=8D=95=E7=8A=B6=E6=80=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/BootstrapBlazor.Shared/Shared/NavMenu.razor.cs | 1 + 1 file changed, 1 insertion(+) diff --git a/src/BootstrapBlazor.Shared/Shared/NavMenu.razor.cs b/src/BootstrapBlazor.Shared/Shared/NavMenu.razor.cs index 6383e4567..2b310da4d 100644 --- a/src/BootstrapBlazor.Shared/Shared/NavMenu.razor.cs +++ b/src/BootstrapBlazor.Shared/Shared/NavMenu.razor.cs @@ -168,6 +168,7 @@ namespace BootstrapBlazor.Shared.Shared }); item.AddItem(new DemoMenuItem() { + IsUpdate = true, Text = "按钮 Button", Url = "buttons" }); -- Gitee