Blazor Webassembly - 处理视口/设备宽度更改

Question

最近我在我的 Blazor WebAssembly 项目中创建了一个自定义导航菜单（使用 TailwindCSS）。 根据设备宽度，显示/隐藏侧边栏（使用 Tailwind hidden 和 device-with CSS 类）。

在特定的设备宽度上显示一个菜单按钮，一个特定于移动侧边栏的 div 始终隐藏（显示：无），在 Blazor 中我创建了一个 @onclick 函数来设置样式移动侧边栏清空（因此显示：没有被删除），反之亦然。

这一切都很完美，但是这种方法存在一个问题。单击菜单按钮时，将显示移动侧边栏，如果我现在增加设备宽度，则菜单按钮将自动隐藏，移动侧边栏也是如此，如果我再次减小设备宽度，则菜单按钮再次显示，但“打开”侧边栏 div 也被显示（因为在最后一个较小的设备宽度也被打开（显示样式：无被删除）。

行为应该是，当设备宽度增加时，移动侧栏应该始终保持其样式属性 display:none。

不过，据我所知，Blazor 中没有在changed device width 上触发的事件？有什么办法可以让它工作吗？

下面是一些显示“问题”的图片和 HTML 代码：

普通尺寸视图：

移动端视图：

移动侧边栏打开视图：

所以问题是当我从Mobile sidebar opened view回到Normal size view再回到Mobile view时，它会显示Mobile sidebar opened view而不是（因为它仍然有一个空的样式属性，相当于display: block)

HTML / Blazor C# 代码：

 <div class="md:hidden" style=@mobileSideBarDisplay> <!-- Blazor C# string that sets the display to display: none, or removes the display entirely to show it)
    <div class="fixed inset-0 flex z-40">

    <!--
      Off-canvas menu overlay, show/hide based on off-canvas menu state.

      Entering: "transition-opacity ease-linear duration-300"
        From: "opacity-0"
        To: "opacity-100"
      Leaving: "transition-opacity ease-linear duration-300"
        From: "opacity-100"
        To: "opacity-0"
    -->
        <div class="fixed inset-0">
            <div class="absolute inset-0 bg-gray-600 opacity-75"></div>
        </div>

        <!-- The menu item with is Blazor onclick event -->
        <div class="relative flex-1 flex flex-col max-w-xs w-full pt-5 pb-4 bg-gray-800">
            <div class="absolute top-0 right-0 -mr-14 p-1">
                <button class="flex items-center justify-center h-12 w-12 rounded-full focus:outline-none focus:bg-gray-600" aria-label="Close sidebar" @onclick="ToggleSidebar">
                    <svg class="h-6 w-6 text-white" stroke="currentColor" fill="none" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
                    </svg>
                </button>
            </div>


            <! -- rest of HTML, left out for readability -->
        </div>
     </div>
</div>



<!-- Static sidebar for desktop -->
<div class="hidden md:flex md:flex-shrink-0">
    <div class="flex flex-col w-64">

        <! -- rest of HTML, left out for readability -->


    </div>
</div>


<!-- Horizontal navbar with the Menu button -->
<div class="flex flex-col w-0 flex-1 overflow-hidden">
    <div class="relative z-10 flex-shrink-0 flex h-16 bg-white shadow">

        <!-- menu button becomes visible at a certain device-width > done with the TailWind CSS class md:hidden -->
        <button class="px-4 border-r border-gray-200 text-gray-500 focus:outline-none focus:bg-gray-100 focus:text-gray-600 md:hidden" aria-label="Open sidebar" @onclick="ToggleSidebar">
            <svg class="h-6 w-6" stroke="currentColor" fill="none" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h7" />
            </svg>
        </button>

    <! -- rest of HTML, left out for readability -->

    </div>
</div>



<!-- C# code for viewing mobile sidebar on Menu button press -->
@code {

    private bool showMobileSideBar = false;

    private string mobileSideBarDisplay => showMobileSideBar ? "" : "display: none;";

    private void ToggleSidebar()
    {
        showMobileSideBar = !showMobileSideBar;
    }
}

Answer 1

你需要 js 互操作和 window.resize 事件。

有一些库可以提供帮助，例如 https://github.com/EdCharbeneau/BlazorSize