隐藏 vuetify 导航抽屉

Question

如果显示等于或大于 md ，我尝试使用以下代码中的类隐藏导航抽屉，但没有成功：

<template>
 <v-app>
   <v-navigation-drawer
     v-model="drawer"
     class="hidden-md-and-up"
     :mini-variant="miniVariant"
     :clipped="clipped"
     fixed
     app
   >
     <v-list class="hidden-md-and-up">
       <v-list-item
         v-for="(item, i) in items"
         :key="i"
         :to="item.to"
         router
         exact
       >
         <v-list-item-action>
           <v-icon>{{ item.icon }}</v-icon>
         </v-list-item-action>
         <v-list-item-content>
           <v-list-item-title v-text="item.title" />
         </v-list-item-content>
       </v-list-item>
     </v-list>
   </v-navigation-drawer>

我缺少什么？

Answer 1

一种选择是在 v-navigation-drawer 的 permanent 属性上使用 vuetify 断点，因为您希望它永久显示在除中号和更大号之外的所有版本中。

https://vuetifyjs.com/en/features/breakpoints/

替换class="hidden-md-and-up"为:permanent="!$vuetify.breakpoint.mdAndUp"和 “！” 因为您希望它不显示在 mdAndUp 中。

<template>
 <v-app>
  <v-navigation-drawer
   v-model="drawer"
   :permanent="!$vuetify.breakpoint.mdAndUp"
   :mini-variant="miniVariant"
   :clipped="clipped"
   fixed
   app
  >
 <v-list class="hidden-md-and-up">
   <v-list-item
     v-for="(item, i) in items"
     :key="i"
     :to="item.to"
     router
     exact
   >
     <v-list-item-action>
       <v-icon>{{ item.icon }}</v-icon>
     </v-list-item-action>
     <v-list-item-content>
       <v-list-item-title v-text="item.title" />
     </v-list-item-content>
   </v-list-item>
 </v-list>