fix(CountUp): not show the Value when set value to 0 (#2236)

* refactor: 重构代码逻辑 * doc: 更新示例
dotnetcore · Oct 7, 2023 · 15b2c2d · 15b2c2d
1 parent 00115c7
commit 15b2c2d
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 12 deletions.
diff --git a/src/BootstrapBlazor.Shared/Samples/CountUps.razor b/src/BootstrapBlazor.Shared/Samples/CountUps.razor
@@ -7,6 +7,11 @@
 
 <DemoBlock Title="@Localizer["CountUpsNormalTitle"]" Introduction="@Localizer["CountUpsNormalIntro"]" Name="Normal">
     <section ignore>
+        <div class="row mb-2">
+            <div class="col-12">
+                更改配置后，改变 Value 值后生效
+            </div>
+        </div>
         <div class="row mb-2">
             <div class="col-12 col-sm-6 col-md-4 col-lg-3">
                 <BootstrapInputGroup>
@@ -89,9 +94,13 @@
         </div>
     </section>
     <div class="mb-2">
-        <CountUp TValue="double" Value="@Value2" Option="_option" OnCompleted="OnCompleted" class="fw-bold fs-1"></CountUp>
+        <CountUp TValue="double" Value="@Value" Option="_option" OnCompleted="OnCompleted" class="fw-bold fs-1"></CountUp>
     </div>
-    <Button Icon="fa-solid fa-gear" Text="Update" OnClick="OnUpdate"></Button>
+    <BootstrapInputGroup>
+        <BootstrapInputGroupLabel DisplayText="Value"></BootstrapInputGroupLabel>
+        <BootstrapInput @bind-Value="Value2"></BootstrapInput>
+        <Button Icon="fa-solid fa-gear" Text="Update" OnClick="OnUpdate"></Button>
+    </BootstrapInputGroup>
     <ConsoleLogger @ref="_logger" class="mt-2" />
 </DemoBlock>
 

diff --git a/src/BootstrapBlazor.Shared/Samples/CountUps.razor.cs b/src/BootstrapBlazor.Shared/Samples/CountUps.razor.cs
@@ -9,12 +9,12 @@ namespace BootstrapBlazor.Shared.Samples;
 /// </summary>
 public partial class CountUps
 {
-    private static Random Rnd { get; } = new();
-
     private static readonly CountUpOption _option = new() { DecimalPlaces = 2 };
 
     private double Value2 { get; set; }
 
+    private double Value { get; set; }
+
     private ConsoleLogger? _logger;
 
     private bool _useOnCompleted;
@@ -31,7 +31,7 @@ protected override void OnInitialized()
 
     private void OnUpdate()
     {
-        Value2 = Rnd.Next(12345, 999999) / 100.0;
+        Value = Value2;
     }
 
     private Task OnCompleted()

diff --git a/src/BootstrapBlazor/Components/CountUp/CountUp.razor b/src/BootstrapBlazor/Components/CountUp/CountUp.razor
@@ -1,6 +1,6 @@
 @namespace BootstrapBlazor.Components
 @inherits BootstrapModuleComponentBase
-@attribute [BootstrapModuleAutoLoader(JSObjectReference = true, AutoInvokeInit = false, AutoInvokeDispose = false)]
+@attribute [BootstrapModuleAutoLoader(JSObjectReference = true, AutoInvokeDispose = false)]
 @typeparam TValue
 
 <span @attributes="AdditionalAttributes" class="@ClassString" id="@Id"></span>
diff --git a/src/BootstrapBlazor/Components/CountUp/CountUp.razor.cs b/src/BootstrapBlazor/Components/CountUp/CountUp.razor.cs
@@ -57,17 +57,20 @@ protected override async Task OnAfterRenderAsync(bool firstRender)
     {
         await base.OnAfterRenderAsync(firstRender);
 
-        if (Module != null)
+        if (!firstRender && !PreviousValue.Equals(Value))
         {
-            if (!PreviousValue.Equals(Value))
-            {
-                PreviousValue = Value;
+            PreviousValue = Value;
 
-                await Module.InvokeVoidAsync("init", Id, Interop, Value, OnCompleted != null ? nameof(OnCompleteCallback) : null, Option);
-            }
+            await InvokeInitAsync();
         }
     }
 
+    /// <summary>
+    /// <inheritdoc/>
+    /// </summary>
+    /// <returns></returns>
+    protected override Task InvokeInitAsync() => InvokeVoidAsync("init", Id, Interop, Value, OnCompleted != null ? nameof(OnCompleteCallback) : null, Option);
+
     /// <summary>
     /// OnCompleted 回调方法
     /// </summary>