当导航栏宽度未知时，如何在移动导航栏和桌面导航栏之间进行选择？

Question

我有一个 Vue 应用程序，其顶部有导航栏样式的菜单项。菜单项的数量根据登录用户的类型而变化。有时可能是 3 项，有时可能多达 6 项。 我试图弄清楚如何确定何时在此导航栏的桌面版本（其中项目被布置为一排按钮）和菜单隐藏在类型抽屉的幻灯片中的移动版本之间切换。

我已经覆盖了 updated() 生命周期钩子以在启动时选择适当的视图。我在包含菜单按钮的 div 上使用 ref。从中我可以得到 scrollWidth（显示所有按钮所需的像素数量）和 clientWidth（给定 div 的像素数量）。我有溢出：隐藏。

据此，我可以确定何时需要从桌面视图切换到移动视图。我正在使用 resizeObserver 来捕捉调整大小。这对于从桌面切换到移动非常有用。

但问题是，一旦我在移动设备中，桌面导航栏就不是 dom 的一部分，所以我不知道渲染它需要多少像素，所以我不知道什么时候从移动设备切换回来到桌面，因为用户将窗口调整得更大。

我也不知道不同语言的菜单按钮会有多宽。

有什么建议吗？ 谢谢 格雷格

Answer 1

但问题是，一旦我在移动设备中，桌面导航栏就不是 dom 的一部分，所以我不知道渲染它需要多少像素，所以我不知道什么时候从移动设备切换回来当用户将窗口大小调整为更大时到桌面。

所以只需使用visibility 隐藏它们：

<div class='wrapper' :class='[mode]'>
  <div class='items' ref='items'>
    <div class='item' v-for='item in items'>Item {{ item }}</div>
  </div>
</div>

.wrapper {
  overflow-x: hidden;
  pointer-events: none;
  visibility: hidden;

  &.desktop {
    visibility: visible;
    pointer-events: all;
  }
}

.items {
  display: inline-flex;
}

.item {
  margin: 0 10px;
  white-space: nowrap;
}

JSFiddle

编辑以添加更多信息：

这个答案让我重新思考我对这个问题的处理方法。我正在考虑在两个不同的导航栏内容之间切换。但这与建议的答案不兼容。答案的关键是移动和桌面导航栏元素将同时出现。不同之处在于桌面元素将被压缩到越来越小的空间中，然后使用可见性属性使其不可见。

关于可见性属性的注意事项：它将元素留在 DOM 和屏幕上。屏幕仍然呈现页面，就好像元素是可见的但具有透明像素一样。理解这一点很重要。这也是为什么必须处理指针事件（打开和关闭）的原因，因为元素仍然存在并且仍然可以与之交互。所以当它们被隐藏时，我们必须禁用指针事件。当元素恢复可见时，我们必须启用指针事件。

您可能需要注意的另一件事是答案使用了 offsetWidth。对于简单的导航栏内容，这很好。但在我的情况下，我有多层 flexbox，最后包含菜单的 div 由于 flexbox 而被压扁，即使溢出内容被隐藏，offsetWidth 也被缩小了。我切换到 scrollWidth 以获取菜单的真实宽度，然后它再次工作得很好。