Vuetify 显示帮助程序类不起作用答案

【问题标题】：Vuetify display helper classes not workingVuetify 显示帮助程序类不起作用
【发布时间】：2020-04-25 18:58:22
【问题描述】：

我将以下帮助类应用于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>

但是，例如，当我在具有1024 x 767 尺寸的 iPad 视图中查看 Google Chrome 控制台时，它没有显示任何导航。它与v-if="showmenu" 无关，因为该函数仅检查用户所在的网址（注册/登录）。但是，如果我正在查看那些帮助程序类，它应该向我显示 Navigation 组件，对吗？

我尝试创建一个 CodeSandBox 来向您展示在某些屏幕尺寸上它不显示任何导航，而我认为它应该显示。

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

任何帮助表示赞赏，在此先感谢。

【问题讨论】：

标签： vue.js vuetify.js breakpoints

【解决方案1】：

您的问题不在于辅助类。他们工作正常。

v-navigation-drawer 隐藏在平板电脑视图中。尝试添加mobile-break-point="959" 道具。

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

您可能需要根据需要调整值。

【讨论】：