Условный рендеринг компонента NuxtJS на основе области просмотра - PullRequest
Новая
       8

Условный рендеринг компонента NuxtJS на основе области просмотра

0 голосов
/ 13 января 2019

Интересно, как условно рендерить 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}
}

Но с таким решением isDesktop и isMobile divs отображаются в dom в любом случае.

Я не хочу этого делать: 

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

и управляйте этим в компоненте beforeMount, или если пользователь изменит размер окна.

Я вижу такой плагин, как [https://github.com/dotneet/nuxt-device-detect][1] но для меня нет понятного readme.

у кого-нибудь есть предложения?

1 Ответ

0 голосов
/ 13 января 2019

Вы не можете определить ширину просмотра с сервера, потому что ... ну ... это сервер. Nuxt-device-Detective использует пользовательский агент, чтобы выяснить, какое устройство запрашивает страницу, и устанавливает некоторые предопределенные переменные на основе этого.

Использование $device.isMobile и $device.isDesktop в v-if гарантирует, что вы будете обслуживать только те узлы DOM, которые хотите использовать для мобильных устройств и компьютеров. Однако он не будет реагировать на изменение размера браузера. В конце концов, обнаружение выполняется на основе пользовательского агента, а не на основе ширины просмотра.

...