基于视口有条件地渲染 NuxtJS 组件

Question

我想知道如何根据视口宽度有条件地渲染NuxtJs组件。

所以;

在传统的 CSS 方式中，我们可以让它像这样：

<div class="isMobile">
<!-- mobile content -->
</div>
<div class="isDesktop">
<!-- desktop content -->
</div>

在这种情况下，此解决方案有效。

@media only screen and (max-width: 768px) {
  .isDesktop {display:none;}
  .isMobile {display:block}
}

但是有了这个解决方案，无论如何都是桌面和移动divs在dom中呈现的。

我不想那样做：

  <div v-if="isMobile"></div>
    <div v-if="isDesktop"></div>

并在 beforeMount 组件中控制它，或者如果用户将调整窗口大小。

我看到一些插件，例如[https://github.com/dotneet/nuxt 设备检测][1]但是对我来说没有可以理解的自述文件。

有人有什么建议吗？

Answer 1

您无法从服务器检测到视图宽度，因为...井。。。它是服务器。nuxt-device-detect使用用户代理来确定哪种设备正在请求页面，并基于此设置一些预定义的变量。

在v-if中使用$device.isMobile和$device.isDesktop将确保您只为要为移动和桌面服务的 DOM 节点提供服务。但是，它不会响应调整浏览器大小。毕竟，检测是基于用户代理而不是视图宽度完成的。