diff --git a/src/BootstrapBlazor.Server/Components/Samples/Masks.razor.cs b/src/BootstrapBlazor.Server/Components/Samples/Masks.razor.cs index 819f1a90d97..5d3a1671c07 100644 --- a/src/BootstrapBlazor.Server/Components/Samples/Masks.razor.cs +++ b/src/BootstrapBlazor.Server/Components/Samples/Masks.razor.cs @@ -1,4 +1,4 @@ -// Licensed to the .NET Foundation under one or more agreements. +// Licensed to the .NET Foundation under one or more agreements. // The .NET Foundation licenses this file to you under the Apache 2.0 License // See the LICENSE file in the project root for more information. // Maintainer: Argo Zhang(argo@live.ca) Website: https://www.blazor.zone diff --git a/src/BootstrapBlazor/BootstrapBlazor.csproj b/src/BootstrapBlazor/BootstrapBlazor.csproj index 4acbd54ad8d..3b05380e730 100644 --- a/src/BootstrapBlazor/BootstrapBlazor.csproj +++ b/src/BootstrapBlazor/BootstrapBlazor.csproj @@ -1,7 +1,7 @@  - 10.5.1-beta02 + 10.5.1-beta05 diff --git a/src/BootstrapBlazor/Components/Mask/Mask.razor b/src/BootstrapBlazor/Components/Mask/Mask.razor index a273b6dda1e..5e67cedd1d8 100644 --- a/src/BootstrapBlazor/Components/Mask/Mask.razor +++ b/src/BootstrapBlazor/Components/Mask/Mask.razor @@ -1,4 +1,4 @@ -@namespace BootstrapBlazor.Components +@namespace BootstrapBlazor.Components @inherits BootstrapModuleComponentBase @attribute [BootstrapModuleAutoLoader(AutoInvokeInit = false, AutoInvokeDispose = false)] diff --git a/src/BootstrapBlazor/Components/Mask/Mask.razor.cs b/src/BootstrapBlazor/Components/Mask/Mask.razor.cs index 52febe229df..fdd5d6a7d9a 100644 --- a/src/BootstrapBlazor/Components/Mask/Mask.razor.cs +++ b/src/BootstrapBlazor/Components/Mask/Mask.razor.cs @@ -22,6 +22,7 @@ public partial class Mask .Build(); private MaskOption? _options; + private bool _show = false; /// /// @@ -45,22 +46,46 @@ protected override async Task OnAfterRenderAsync(bool firstRender) { await InvokeVoidAsync("update", Id, new { - Show = _options != null, + Show = _show, _options?.ContainerId, - _options?.Selector + _options?.Selector, + _options?.AppendToBody }); } } private Task Show(MaskOption? option) { - _options = option; + if (option == null) + { + // 服务关闭遮罩调用 + _options?.ChildContent = null; + _show = false; + } + else + { + // 服务打开遮罩调用 + _options = option; + _show = true; + } StateHasChanged(); return Task.CompletedTask; } - private Task CloseAsync() + private Task CloseAsync() => Show(null); + + /// + /// + /// + /// + /// + protected override async ValueTask DisposeAsync(bool disposing) { - return Show(null); + await base.DisposeAsync(disposing); + + if (disposing) + { + MaskService.UnRegister(this); + } } } diff --git a/src/BootstrapBlazor/Components/Mask/Mask.razor.js b/src/BootstrapBlazor/Components/Mask/Mask.razor.js index dce4973193e..8766dd1e174 100644 --- a/src/BootstrapBlazor/Components/Mask/Mask.razor.js +++ b/src/BootstrapBlazor/Components/Mask/Mask.razor.js @@ -1,7 +1,7 @@ -export function update(id, options) { +export function update(id, options) { const mask = document.getElementById(id); if (mask) { - const { show } = options; + const { show, appendToBody } = options; const el = document.querySelector(`[data-bb-mask="${id}"]`); const container = getContainerBySelector(options); if (container) { @@ -9,23 +9,22 @@ if (position === '' || position === 'static') { container.style.setProperty('position', 'relative'); } - if (show) { - el.style.setProperty('--bb-mask-position', 'absolute'); - container.appendChild(el); - } + reset(el, mask, container, show); } - else { - document.body.appendChild(el); + else if (appendToBody === true) { + reset(el, mask, document.body, show); } + } +} - if (show) { - el.classList.add('show'); - } - else { - el.classList.remove('show'); - el.style.removeProperty('--bb-mask-position'); - mask.appendChild(el); - } +const reset = (el, mask, container, status) => { + if (status) { + container.appendChild(el); + el.classList.add('show'); + } + else { + el.classList.remove('show'); + mask.appendChild(el); } } diff --git a/src/BootstrapBlazor/Components/Mask/Mask.razor.scss b/src/BootstrapBlazor/Components/Mask/Mask.razor.scss index 203e1e40d56..4f90f913ac5 100644 --- a/src/BootstrapBlazor/Components/Mask/Mask.razor.scss +++ b/src/BootstrapBlazor/Components/Mask/Mask.razor.scss @@ -1,11 +1,10 @@ -@use "../../wwwroot/scss/variables" as *; +@use "../../wwwroot/scss/variables" as *; .bb-mask { --bb-mask-zindex: #{$bb-mask-zindex}; --bb-mask-bg: #{$bb-mask-bg}; --bb-mask-opacity: #{$bb-mask-opacity}; - --bb-mask-position: fixed; - position: var(--bb-mask-position); + position: absolute; top: 0; right: 0; bottom: 0; diff --git a/src/BootstrapBlazor/Components/Mask/MaskOption.cs b/src/BootstrapBlazor/Components/Mask/MaskOption.cs index 13f416e32e6..b0ac1ac590b 100644 --- a/src/BootstrapBlazor/Components/Mask/MaskOption.cs +++ b/src/BootstrapBlazor/Components/Mask/MaskOption.cs @@ -46,4 +46,11 @@ public class MaskOption /// Gets or sets Mask Parent Container Selector. Default null /// public string? Selector { get; set; } + + /// + /// 获得/设置 是否将遮罩追加到 body 元素 默认 true + /// Gets or sets whether to append the mask to the body element. Default true + /// v10.5.1 + /// + public bool AppendToBody { get; set; } = true; } diff --git a/src/BootstrapBlazor/Extensions/MaskServiceExtensions.cs b/src/BootstrapBlazor/Extensions/MaskServiceExtensions.cs index 89ee4d8be0f..8176b013f6e 100644 --- a/src/BootstrapBlazor/Extensions/MaskServiceExtensions.cs +++ b/src/BootstrapBlazor/Extensions/MaskServiceExtensions.cs @@ -11,46 +11,50 @@ namespace BootstrapBlazor.Components; /// public static class MaskServiceExtensions { - - /// - /// Show 扩展方法 - /// Show extension method - /// - /// - /// - /// - /// - /// - /// - /// - public static Task Show(this MaskService maskService, IDictionary? parameters = null, string? containerId = null, string? backgroundColor = null, float opacity = 0.5f, int zIndex = 1050, Mask? mask = null) where TComponent : ComponentBase => maskService.Show(new MaskOption() + extension(MaskService maskService) { - BackgroundColor = backgroundColor, - Opacity = opacity, - ZIndex = zIndex, - ContainerId = containerId, - ChildContent = BootstrapDynamicComponent.CreateComponent(parameters).Render() - }, mask); + /// + /// Show 扩展方法 + /// Show extension method + /// + /// + /// + /// + /// + /// + /// + /// + public Task Show(IDictionary? parameters = null, string? containerId = null, string? backgroundColor = null, float opacity = 0.5f, int zIndex = 1050, bool appendToBody = true, Mask? mask = null) where TComponent : ComponentBase => maskService.Show(new MaskOption() + { + BackgroundColor = backgroundColor, + Opacity = opacity, + ZIndex = zIndex, + ContainerId = containerId, + ChildContent = BootstrapDynamicComponent.CreateComponent(parameters).Render(), + AppendToBody = appendToBody + }, mask); - /// - /// Show 扩展方法 - /// Show extension method - /// - /// - /// - /// - /// - /// - /// - /// - /// - public static Task Show(this MaskService maskService, Type type, IDictionary? parameters = null, string? containerId = null, string? backgroundColor = null, float opacity = 0.5f, int zIndex = 1050, Mask? mask = null) => maskService.Show(new MaskOption() - { - BackgroundColor = backgroundColor, - Opacity = opacity, - ZIndex = zIndex, - ContainerId = containerId, - ChildContent = BootstrapDynamicComponent.CreateComponent(type, parameters).Render() - }, mask); + /// + /// Show 扩展方法 + /// Show extension method + /// + /// + /// + /// + /// + /// + /// + /// + /// + public Task Show(Type type, IDictionary? parameters = null, string? containerId = null, string? backgroundColor = null, float opacity = 0.5f, int zIndex = 1050, bool appendToBody = true, Mask? mask = null) => maskService.Show(new MaskOption() + { + BackgroundColor = backgroundColor, + Opacity = opacity, + ZIndex = zIndex, + ContainerId = containerId, + ChildContent = BootstrapDynamicComponent.CreateComponent(type, parameters).Render(), + AppendToBody = appendToBody + }, mask); + } } diff --git a/test/UnitTest/Services/MaskServiceTest.cs b/test/UnitTest/Services/MaskServiceTest.cs index 054ab6fb89a..f254eef5704 100644 --- a/test/UnitTest/Services/MaskServiceTest.cs +++ b/test/UnitTest/Services/MaskServiceTest.cs @@ -25,7 +25,8 @@ await maskService.Show(new MaskOption() BackgroundColor = "#000", Opacity = 0.5f, ZIndex = 1050, - ChildContent = builder => builder.AddContent(0, "test-mask-content") + ChildContent = builder => builder.AddContent(0, "test-mask-content"), + AppendToBody = true }); }); }); @@ -116,6 +117,26 @@ public async Task Show_Type() await cut.InvokeAsync(() => button.Click()); } + [Fact] + public async Task Show_Ok() + { + var maskService = Context.Services.GetRequiredService(); + var cut = Context.Render(pb => + { + pb.AddChildContent