代码之家 › 专栏 › 技术社区 › user3348410

基于viewport的nuxtjs组件条件渲染

nuxt.js responsive vue.js

1

user3348410 · 技术社区 · 7 年前

我想知道如何有条件地呈现 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}
}

但是使用这个解决方案,无论如何都可以在dom中呈现isdesktop和ismobile divs。

我不想那样做:

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

并在beforemount组件中进行控制,或者用户是否要调整窗口大小。

我看到一些插件[ https://github.com/dotneet/nuxt-device-detect][1] 但我无法理解自述文件。

有人有什么建议吗?

1 回复 | 直到 7 年前

1

0

Sumurai8 7 年前

无法从服务器检测到视图宽度,因为…好。。。是服务器。nuxt device detect使用用户代理找出请求页面的设备类型,并基于此设置一些预定义变量。

使用 $device.isMobile 和 $device.isDesktop 在一个 v-if 将确保只为移动和桌面服务所需的dom节点。但是,它不会对调整浏览器大小做出响应。毕竟,检测是基于用户代理而不是基于视图宽度完成的。