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的永久道具上使用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>

隐藏vuetify导航抽屉

1 个答案: