Question

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

我已覆盖了update（）生命周期挂钩，以在启动时选择适当的视图。我在包含菜单按钮的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，最后由于flexbox压缩了包含菜单的div，即使隐藏了溢出内容，offsetWidth也被缩小了。我切换到scrollWidth来获取菜单的真实宽度，然后再次起作用。

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

1 个答案: