在我的 Blazor 服务器端应用程序中，我想在页面上显示“正在加载”微调器时模糊相关的剃刀页面。我怎样才能做到这一点？

Question

在我的 Blazor 服务器端应用程序中，当我运行需要几秒钟时间的方法时，我正在使用“加载”微调器。这部分正在按预期工作。但是在旋转器打开屏幕期间，我想模糊相关的剃刀页面（除旋转器之外的整个剃刀页面）。我该怎么做？

我的微调器代码如下所示：

剃须刀页面：

  @if (Loading_spinner == true)
  {
     <div class="spinner"></div>
  }

CSS：

.spinner {
    border: 16px solid silver;
    border-top: 16px solid #337AB7;
    border-radius: 50%;
    width: 80px;
    height: 80px;
    animation: spin 700ms linear infinite;
    top: 40%;
    left: 55%;
    position: absolute;
}

Answer 1

一种方法是创建一个可重用的“加载组件”，您可以在页面上使用它，在加载时显示全页模糊叠加：

加载组件.razor：

@if (IsLoading)
{
    <div class="blur-overlay"></div>
    <div class="spinner"></div>
}

@Loaded

@code {
    [Parameter, EditorRequired]
    public required bool IsLoading { get; set; }

    [Parameter, EditorRequired]
    public required RenderFragment Loaded { get; set; } = default!;
}

您的页面：

@attribute [Route(PageRoutes.Index)]

<LoadingComponent IsLoading=@isLoading>
    <Loaded>
        
        <div>
            Here's some content!
        </div>

    </Loaded>
</LoadingComponent>

@code
{
    bool isLoading = true;

    protected async override Task OnInitializedAsync()
    {
        isLoading = true;

        // Load something slow...

        isLoading = false;
    }
}

有关如何实现全页模糊，请参阅另一个问题：CSS 中的全页模糊