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

Question

我将以下helper classes应用于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控制台中以1024 x 767尺寸查看iPad视图时，它不会显示任何导航。它与v-if="showmenu"没有任何关系，因为该功能仅检查用户所在的URL（注册/登录）。但是，如果我正在查看这些帮助程序类，它应该向我显示Navigation组件对吗？

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

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

感谢您的帮助，在此先感谢。

Answer 1

您的问题不是帮助程序类。他们工作正常。

v-navigation-drawer正在平板电脑视图中隐藏自己。尝试添加mobile-break-point="959"属性。

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

您可能必须根据需要调整价值。