Vuetify отображения вспомогательных классов не работает - PullRequest
Новая
       8

Vuetify отображения вспомогательных классов не работает

1 голос
/ 08 января 2020

У меня есть следующие вспомогательные классы, примененные к компонентам Navigation и BottomNavigation.

Я хочу, чтобы BottomNavigation отображался только на смартфонах, Navigation должен отображаться на планшетах и ​​все больше чем это. Поэтому я применил следующие классы: 

<template>
  <v-app>
    <div class="hidden-sm-and-down">
      <NavigationDrawer v-if="showMenu" />
    </div>

    <v-content>
      <v-container fluid>
        <router-view></router-view>
      </v-container>
    </v-content>

    <div class="hidden-md-and-up">
      <BottomNavigation v-if="showMenu" />
    </div>
    <Snackbar />
    <Loader v-if="isLoading"></Loader>
  </v-app>
</template>

Но когда я смотрю, например, в консоли Google Chrome в виде iPad с размерами 1024 x 767, он не показывает никакой навигации. Он не имеет ничего общего с v-if="showmenu", потому что эта функция проверяет только то, по какой ссылке пользователь (регистрация / логин). Но если я смотрю на эти вспомогательные классы, это должно показать мне Navigation компонент, верно?

Я попытался создать CodeSandBox, чтобы показать вам, что на определенных экранах он не показывает никакой навигации, хотя я думаю, что должен ,

https://codesandbox.io/s/hopeful-merkle-4kgoj?fontsize=14&hidenavigation=1&theme=dark

Любая помощь приветствуется, спасибо заранее.

1 Ответ

1 голос
/ 08 января 2020

Ваша проблема не в вспомогательных классах. Они работают нормально.

Это v-navigation-drawer, который прячется в виде планшета. Попробуйте добавить mobile-break-point="959" prop. 

<v-navigation-drawer app mini-variant mobile-break-point="959">

Возможно, вам придется настроить значение в соответствии с вашими потребностями.

...