diff --git a/src/BootstrapBlazor/Components/Mask/Mask.razor.cs b/src/BootstrapBlazor/Components/Mask/Mask.razor.cs index a7a0827bc40..c2d5d0fe0cc 100644 --- a/src/BootstrapBlazor/Components/Mask/Mask.razor.cs +++ b/src/BootstrapBlazor/Components/Mask/Mask.razor.cs @@ -43,7 +43,12 @@ protected override async Task OnAfterRenderAsync(bool firstRender) if (!firstRender) { - await InvokeVoidAsync("update", Id, new { Show = _options != null, _options?.ContainerId }); + await InvokeVoidAsync("update", Id, new + { + Show = _options != null, + _options?.ContainerId, + _options?.Selector + }); } } diff --git a/src/BootstrapBlazor/Components/Mask/Mask.razor.js b/src/BootstrapBlazor/Components/Mask/Mask.razor.js index 02bb9ed79ae..dce4973193e 100644 --- a/src/BootstrapBlazor/Components/Mask/Mask.razor.js +++ b/src/BootstrapBlazor/Components/Mask/Mask.razor.js @@ -1,20 +1,17 @@ export function update(id, options) { const mask = document.getElementById(id); if (mask) { - const { show, containerId } = options; + const { show } = options; const el = document.querySelector(`[data-bb-mask="${id}"]`); - if (containerId) { - const container = document.getElementById(containerId); - if (container) { - const position = container.style.getPropertyValue('position'); - if (position === '' || position === 'static') { - container.style.setProperty('position', 'relative'); - } - - if (show) { - el.style.setProperty('--bb-mask-position', 'absolute'); - container.appendChild(el); - } + const container = getContainerBySelector(options); + if (container) { + const position = container.style.getPropertyValue('position'); + if (position === '' || position === 'static') { + container.style.setProperty('position', 'relative'); + } + if (show) { + el.style.setProperty('--bb-mask-position', 'absolute'); + container.appendChild(el); } } else { @@ -31,3 +28,10 @@ } } } + +const getContainerBySelector = options => { + const selector = getContainerById(options.containerId) ?? options.selector; + return selector ? document.querySelector(selector) : null; +} + +const getContainerById = id => id ? `#${id}` : null; diff --git a/src/BootstrapBlazor/Components/Mask/MaskOption.cs b/src/BootstrapBlazor/Components/Mask/MaskOption.cs index 1b02b26a56e..bab742d697a 100644 --- a/src/BootstrapBlazor/Components/Mask/MaskOption.cs +++ b/src/BootstrapBlazor/Components/Mask/MaskOption.cs @@ -34,4 +34,9 @@ public class MaskOption /// 获得/设置 遮罩父容器 id 默认 null 未设置 /// public string? ContainerId { get; set; } + + /// + /// 获得/设置 遮罩父容器选择器 Selector 默认 null 未设置 + /// + public string? Selector { get; set; } } diff --git a/test/UnitTest/Services/MaskServiceTest.cs b/test/UnitTest/Services/MaskServiceTest.cs index 9f6fbdcd570..c0ff333dff9 100644 --- a/test/UnitTest/Services/MaskServiceTest.cs +++ b/test/UnitTest/Services/MaskServiceTest.cs @@ -66,7 +66,8 @@ await maskService.Show(new MaskOption() Opacity = 0.5f, ZIndex = 1050, ChildContent = builder => builder.AddContent(0, "test-mask-content"), - ContainerId = "test-9527" + ContainerId = "test-9527", + Selector = "test-mask-selector" }); }); });