导航抽屉

v-navigation-drawer 组件是用户将用来浏览应用程序的组件。 导航抽屉已预先配置为可以在有或没有 vue-router 的情况下使用。 为了显示的目的，一些示例被包装在 v-card 元素中。 在您的应用程序中，通常会将 v-navigation-drawer 直接放置在 v-app 的下面。

如果使用启用了 app 属性的 v-navigation-drawer，则不需要像示例中那样使用 absolute 属性。

用例

导航抽屉主要用于存放指向应用程序页面的链接。 将 null 用作其 v-model 的起始值会将抽屉初始化为在移动设备上关闭，在桌面上打开。 通常使用 nav 属性将抽屉与 v-list 组件配对。

template script

  1. <template>
  2.   <v-card
  3.     height="400"
  4.     width="256"
  5.     class="mx-auto"
  6.   >
  7.     <v-navigation-drawer permanent>
  8.       <v-list-item>
  9.         <v-list-item-content>
  10.           <v-list-item-title class="title">
  11.             Application
  12.           </v-list-item-title>
  13.           <v-list-item-subtitle>
  14.             subtext
  15.           </v-list-item-subtitle>
  16.         </v-list-item-content>
  17.       </v-list-item>
  19.       <v-divider></v-divider>
  21.       <v-list
  22.         dense
  23.         nav
  24.       >
  25.         <v-list-item
  26.           v-for="item in items"
  27.           :key="item.title"
  28.           link
  29.         >
  30.           <v-list-item-icon>
  31.             <v-icon>{{ item.icon }}</v-icon>
  32.           </v-list-item-icon>
  34.           <v-list-item-content>
  35.             <v-list-item-title>{{ item.title }}</v-list-item-title>
  36.           </v-list-item-content>
  37.         </v-list-item>
  38.       </v-list>
  39.     </v-navigation-drawer>
  40.   </v-card>
  41. </template>
  1. <script>
  2.   export default {
  3.     data () {
  4.       return {
  5.         items: [
  6.           { title: 'Dashboard', icon: 'mdi-view-dashboard' },
  7.           { title: 'Photos', icon: 'mdi-image' },
  8.           { title: 'About', icon: 'mdi-help-box' },
  9.         ],
  10.         right: null,
  11.       }
  12.     },
  13.   }
  14. </script>

Navigation drawers（导航抽屉） - 图1

API

从下面选择您想要的组件，并查看可用的属性、插槽、事件和函数。

Navigation drawers（导航抽屉） - 图2

实战场

template script

  1. <template>
  2.   <v-container>
  3.     <v-row justify="space-around">
  4.       <v-col cols="12">
  5.         <v-select
  6.           v-model="color"
  7.           :items="colors"
  8.           label="Color"
  9.         ></v-select>
  10.       </v-col>
  12.       <v-switch
  13.         v-model="drawer"
  14.         class="ma-2"
  15.         label="v-model"
  16.       ></v-switch>
  18.       <v-switch
  19.         v-model="permanent"
  20.         class="ma-2"
  21.         label="Permanent"
  22.       ></v-switch>
  24.       <v-switch
  25.         v-model="miniVariant"
  26.         class="ma-2"
  27.         label="Mini variant"
  28.       ></v-switch>
  30.       <v-switch
  31.         v-model="expandOnHover"
  32.         class="ma-2"
  33.         label="Expand on hover"
  34.       ></v-switch>
  36.       <v-switch
  37.         v-model="background"
  38.         class="ma-2"
  39.         label="Background"
  40.       ></v-switch>
  42.       <v-switch
  43.         v-model="right"
  44.         class="ma-2"
  45.         label="Right"
  46.       ></v-switch>
  47.     </v-row>
  49.     <v-card
  50.       height="400"
  51.       class="overflow-hidden"
  52.     >
  53.       <v-navigation-drawer
  54.         v-model="drawer"
  55.         :color="color"
  56.         :expand-on-hover="expandOnHover"
  57.         :mini-variant="miniVariant"
  58.         :right="right"
  59.         :permanent="permanent"
  60.         :src="bg"
  61.         absolute
  62.         dark
  63.       >
  64.         <v-list
  65.           dense
  66.           nav
  67.           class="py-0"
  68.         >
  69.           <v-list-item two-line :class="miniVariant && 'px-0'">
  70.             <v-list-item-avatar>
  71.               <img src="https://randomuser.me/api/portraits/men/81.jpg">
  72.             </v-list-item-avatar>
  74.             <v-list-item-content>
  75.               <v-list-item-title>Application</v-list-item-title>
  76.               <v-list-item-subtitle>Subtext</v-list-item-subtitle>
  77.             </v-list-item-content>
  78.           </v-list-item>
  80.           <v-divider></v-divider>
  82.           <v-list-item
  83.             v-for="item in items"
  84.             :key="item.title"
  85.             link
  86.           >
  87.             <v-list-item-icon>
  88.               <v-icon>{{ item.icon }}</v-icon>
  89.             </v-list-item-icon>
  91.             <v-list-item-content>
  92.               <v-list-item-title>{{ item.title }}</v-list-item-title>
  93.             </v-list-item-content>
  94.           </v-list-item>
  95.         </v-list>
  96.       </v-navigation-drawer>
  97.     </v-card>
  98.   </v-container>
  99. </template>
  1. <script>
  2.   export default {
  3.     data () {
  4.       return {
  5.         drawer: true,
  6.         items: [
  7.           { title: 'Dashboard', icon: 'mdi-view-dashboard' },
  8.           { title: 'Photos', icon: 'mdi-image' },
  9.           { title: 'About', icon: 'mdi-help-box' },
  10.         ],
  11.         color: 'primary',
  12.         colors: [
  13.           'primary',
  14.           'blue',
  15.           'success',
  16.           'red',
  17.           'teal',
  18.         ],
  19.         right: false,
  20.         permanent: true,
  21.         miniVariant: false,
  22.         expandOnHover: false,
  23.         background: false,
  24.       }
  25.     },
  26.     computed: {
  27.       bg () {
  28.         return this.background ? 'https://cdn.vuetifyjs.com/images/backgrounds/bg-2.jpg' : undefined
  29.       },
  30.     },
  31.   }
  32. </script>

Navigation drawers（导航抽屉） - 图3

示例

下面是一些简单到复杂的例子。

彩色的抽屉

导航抽屉可以定制，以适应任何应用程序的设计。这里，我们使用 append 插槽应用自定义背景颜色和附加的内容区域。

template script

  1. <template>
  2.   <v-card
  3.     class="mx-auto"
  4.     height="400"
  5.     width="256"
  6.   >
  7.     <v-navigation-drawer
  8.       class="deep-purple accent-4"
  9.       dark
  10.       permanent
  11.     >
  12.       <v-list>
  13.         <v-list-item
  14.           v-for="item in items"
  15.           :key="item.title"
  16.           link
  17.         >
  18.           <v-list-item-icon>
  19.             <v-icon>{{ item.icon }}</v-icon>
  20.           </v-list-item-icon>
  22.           <v-list-item-content>
  23.             <v-list-item-title>{{ item.title }}</v-list-item-title>
  24.           </v-list-item-content>
  25.         </v-list-item>
  26.       </v-list>
  28.       <template v-slot:append>
  29.         <div class="pa-2">
  30.           <v-btn block>Logout</v-btn>
  31.         </div>
  32.       </template>
  33.     </v-navigation-drawer>
  34.   </v-card>
  35. </template>
  1. <script>
  2.   export default {
  3.     data () {
  4.       return {
  5.         items: [
  6.           { title: 'Dashboard', icon: 'dashboard' },
  7.           { title: 'Account', icon: 'account_box' },
  8.           { title: 'Admin', icon: 'gavel' },
  9.         ],
  10.       }
  11.     },
  12.   }
  13. </script>

Navigation drawers（导航抽屉） - 图4

永久浮动抽屉

默认情况下，导航抽屉的右边框为 1px，将其与内容分开。 在此示例中，我们要从左侧拆下抽屉，让它自己浮动。 floating 属性删除右边框（如果使用 right，则删除左边框）。

template script

  1. <template>
  2.   <v-card
  3.     class="pa-12"
  4.     color="indigo darken-2"
  5.     flat
  6.   >
  7.     <v-card
  8.       elevation="12"
  9.       width="256"
  10.     >
  11.       <v-navigation-drawer
  12.         floating
  13.         permanent
  14.       >
  15.         <v-list
  16.           dense
  17.           rounded
  18.         >
  19.           <v-list-item
  20.             v-for="item in items"
  21.             :key="item.title"
  22.             link
  23.           >
  24.             <v-list-item-icon>
  25.               <v-icon>{{ item.icon }}</v-icon>
  26.             </v-list-item-icon>
  28.             <v-list-item-content>
  29.               <v-list-item-title>{{ item.title }}</v-list-item-title>
  30.             </v-list-item-content>
  31.           </v-list-item>
  32.         </v-list>
  33.       </v-navigation-drawer>
  34.     </v-card>
  35.   </v-card>
  36. </template>
  1. <script>
  2.   export default {
  3.     data () {
  4.       return {
  5.         items: [
  6.           { title: 'Home', icon: 'dashboard' },
  7.           { title: 'About', icon: 'question_answer' },
  8.         ],
  9.       }
  10.     },
  11.   }
  12. </script>

Navigation drawers（导航抽屉） - 图5

迷你

当使用 mini-variant prop 时，抽屉会缩小（默认 56px），并隐藏 v-list 中除了第一个元素之外的所有内容。在这个例子中，我们使用了 .sync 修改器，它允许我们以程序化的方式绑定抽屉的扩展/收缩。

template script

  1. <template>
  2.   <v-card>
  3.     <v-navigation-drawer
  4.       v-model="drawer"
  5.       :mini-variant.sync="mini"
  6.       permanent
  7.     >
  8.       <v-list-item class="px-2">
  9.         <v-list-item-avatar>
  10.           <v-img src="https://randomuser.me/api/portraits/men/85.jpg"></v-img>
  11.         </v-list-item-avatar>
  13.         <v-list-item-title>John Leider</v-list-item-title>
  15.         <v-btn
  16.           icon
  17.           @click.stop="mini = !mini"
  18.         >
  19.           <v-icon>mdi-chevron-left</v-icon>
  20.         </v-btn>
  21.       </v-list-item>
  23.       <v-divider></v-divider>
  25.       <v-list dense>
  26.         <v-list-item
  27.           v-for="item in items"
  28.           :key="item.title"
  29.           link
  30.         >
  31.           <v-list-item-icon>
  32.             <v-icon>{{ item.icon }}</v-icon>
  33.           </v-list-item-icon>
  35.           <v-list-item-content>
  36.             <v-list-item-title>{{ item.title }}</v-list-item-title>
  37.           </v-list-item-content>
  38.         </v-list-item>
  39.       </v-list>
  40.     </v-navigation-drawer>
  41.   </v-card>
  42. </template>
  1. <script>
  2.   export default {
  3.     data () {
  4.       return {
  5.         drawer: true,
  6.         items: [
  7.           { title: 'Home', icon: 'mdi-home-city' },
  8.           { title: 'My Account', icon: 'mdi-account' },
  9.           { title: 'Users', icon: 'mdi-account-group-outline' },
  10.         ],
  11.         mini: true,
  12.       }
  13.     },
  14.   }
  15. </script>

Navigation drawers（导航抽屉） - 图6

临时的

临时抽屉位于其应用之上，并使用稀松布（叠加）来使背景变暗。这个抽屉的行为是模仿在移动设备时的持续抽屉。点击抽屉外部会导致关闭。

template script

  1. <template>
  2.   <v-sheet
  3.     height="400"
  4.     class="overflow-hidden"
  5.     style="position: relative;"
  6.   >
  7.     <v-container class="fill-height">
  8.       <v-row
  9.         align="center"
  10.         justify="center"
  11.       >
  12.         <v-btn
  13.           color="pink"
  14.           dark
  15.           @click.stop="drawer = !drawer"
  16.         >
  17.           Toggle
  18.         </v-btn>
  19.       </v-row>
  20.     </v-container>
  22.     <v-navigation-drawer
  23.       v-model="drawer"
  24.       absolute
  25.       temporary
  26.     >
  27.       <v-list-item>
  28.         <v-list-item-avatar>
  29.           <v-img src="https://randomuser.me/api/portraits/men/78.jpg"></v-img>
  30.         </v-list-item-avatar>
  32.         <v-list-item-content>
  33.           <v-list-item-title>John Leider</v-list-item-title>
  34.         </v-list-item-content>
  35.       </v-list-item>
  37.       <v-divider></v-divider>
  39.       <v-list dense>
  41.         <v-list-item
  42.           v-for="item in items"
  43.           :key="item.title"
  44.           link
  45.         >
  46.           <v-list-item-icon>
  47.             <v-icon>{{ item.icon }}</v-icon>
  48.           </v-list-item-icon>
  50.           <v-list-item-content>
  51.             <v-list-item-title>{{ item.title }}</v-list-item-title>
  52.           </v-list-item-content>
  53.         </v-list-item>
  54.       </v-list>
  55.     </v-navigation-drawer>
  56.   </v-sheet>
  57. </template>
  1. <script>
  2.   export default {
  3.     data () {
  4.       return {
  5.         drawer: null,
  6.         items: [
  7.           { title: 'Home', icon: 'dashboard' },
  8.           { title: 'About', icon: 'question_answer' },
  9.         ],
  10.       }
  11.     },
  12.   }
  13. </script>

Navigation drawers（导航抽屉） - 图7

右侧

导航抽屉也可以位于应用程序（或元素）的右侧。 这对于创建带有辅助信息（可能没有任何导航链接）的侧页很有用。 使用 RTL 时，必须为抽屉明确定义 right。

template script

  1. <template>
  2.   <v-card height="350px">
  3.     <v-navigation-drawer
  4.       absolute
  5.       permanent
  6.       right
  7.     >
  8.       <template v-slot:prepend>
  9.         <v-list-item two-line>
  10.           <v-list-item-avatar>
  11.             <img src="https://randomuser.me/api/portraits/women/81.jpg">
  12.           </v-list-item-avatar>
  14.           <v-list-item-content>
  15.             <v-list-item-title>Jane Smith</v-list-item-title>
  16.             <v-list-item-subtitle>Logged In</v-list-item-subtitle>
  17.           </v-list-item-content>
  18.         </v-list-item>
  19.       </template>
  21.       <v-divider></v-divider>
  23.       <v-list dense>
  24.         <v-list-item
  25.           v-for="item in items"
  26.           :key="item.title"
  27.           @click=""
  28.         >
  29.           <v-list-item-icon>
  30.             <v-icon>{{ item.icon }}</v-icon>
  31.           </v-list-item-icon>
  33.           <v-list-item-content>
  34.             <v-list-item-title>{{ item.title }}</v-list-item-title>
  35.           </v-list-item-content>
  36.         </v-list-item>
  37.       </v-list>
  38.     </v-navigation-drawer>
  39.   </v-card>
  40. </template>
  1. <script>
  2.   export default {
  3.     data () {
  4.       return {
  5.         items: [
  6.           { title: 'Home', icon: 'mdi-home-city' },
  7.           { title: 'My Account', icon: 'mdi-account' },
  8.           { title: 'Users', icon: 'mdi-account-group-outline' },
  9.         ],
  10.       }
  11.     },
  12.   }
  13. </script>

Navigation drawers（导航抽屉） - 图8

Freelancer Free

A Free single page Vuetify theme for new developers.

ads by Vuetify

](https://store.vuetifyjs.com/product/freelancer-theme-free?ref=vuetifyjs.com)

悬停扩展

将组件置于 mini-variant 模式，并在悬停后展开。 不更改内容区域。 宽度可以通过 mini-variant-width 属性进行控制。

template script

  1. <template>
  2.   <div class="ma-12 pa-12">
  3.     <template>
  4.       <v-card>
  5.         <v-navigation-drawer
  6.           permanent
  7.           expand-on-hover
  8.         >
  9.           <v-list>
  10.             <v-list-item class="px-2">
  11.               <v-list-item-avatar>
  12.                 <v-img src="https://randomuser.me/api/portraits/women/85.jpg"></v-img>
  13.               </v-list-item-avatar>
  14.             </v-list-item>
  16.             <v-list-item link>
  17.               <v-list-item-content>
  18.                 <v-list-item-title class="title">Sandra Adams</v-list-item-title>
  19.                 <v-list-item-subtitle>sandra_a88@gmail.com</v-list-item-subtitle>
  20.               </v-list-item-content>
  21.             </v-list-item>
  22.           </v-list>
  24.           <v-divider></v-divider>
  26.           <v-list
  27.             nav
  28.             dense
  29.           >
  30.             <v-list-item link>
  31.               <v-list-item-icon>
  32.                 <v-icon>mdi-folder</v-icon>
  33.               </v-list-item-icon>
  34.               <v-list-item-title>My Files</v-list-item-title>
  35.             </v-list-item>
  36.             <v-list-item link>
  37.               <v-list-item-icon>
  38.                 <v-icon>mdi-account-multiple</v-icon>
  39.               </v-list-item-icon>
  40.               <v-list-item-title>Shared with me</v-list-item-title>
  41.             </v-list-item>
  42.             <v-list-item link>
  43.               <v-list-item-icon>
  44.                 <v-icon>mdi-star</v-icon>
  45.               </v-list-item-icon>
  46.               <v-list-item-title>Starred</v-list-item-title>
  47.             </v-list-item>
  48.           </v-list>
  49.         </v-navigation-drawer>
  50.       </v-card>
  51.     </template>
  52.   </div>
  53. </template>
  1. <script>
  2.   export default {
  3.     //
  4.   }
  5. </script>

Navigation drawers（导航抽屉） - 图9

背景

将自定义背景应用于抽屉。 如果您需要自定义 v-img 的属性，则可以使用 img 插槽。

template script

  1. <template>
  2.   <v-card
  3.     class="mx-auto"
  4.     height="300"
  5.     width="300"
  6.   >
  7.     <v-navigation-drawer
  8.       absolute
  9.       dark
  10.       src="https://cdn.vuetifyjs.com/images/backgrounds/bg-2.jpg"
  11.       width="100%"
  12.       permanent
  13.     >
  14.       <v-list>
  15.         <v-list-item
  16.           v-for="([icon, text], i) in items"
  17.           :key="i"
  18.           link
  19.         >
  20.           <v-list-item-icon>
  21.             <v-icon>{{ icon }}</v-icon>
  22.           </v-list-item-icon>
  24.           <v-list-item-content>
  25.             <v-list-item-title>{{ text }}</v-list-item-title>
  26.           </v-list-item-content>
  27.         </v-list-item>
  28.       </v-list>
  29.     </v-navigation-drawer>
  30.   </v-card>
  31. </template>
  1. <script>
  2.   export default {
  3.     data: () => ({
  4.       items: [
  5.         ['mdi-email', 'Inbox'],
  6.         ['mdi-account-supervisor-circle', 'Supervisors'],
  7.         ['mdi-clock-start', 'Clock-in'],
  8.       ],
  9.     }),
  10.   }
  11. </script>

Navigation drawers（导航抽屉） - 图10

组合抽屉

在此示例中，我们定义了一个自定义宽度来容纳我们的嵌套抽屉。 使用 v-row，我们确保抽屉和列表在水平方向上彼此相邻。

template script

  1. <template>
  2.   <v-card
  3.     class="mx-auto"
  4.     height="300"
  5.     width="330"
  6.   >
  7.     <v-navigation-drawer
  8.       permanent
  9.       width="100%"
  10.     >
  11.       <v-row class="fill-height" no-gutters>
  12.         <v-navigation-drawer
  13.           dark
  14.           mini-variant
  15.           mini-variant-width="56"
  16.           permanent
  17.         >
  18.           <v-list-item class="px-2">
  19.             <v-list-item-avatar>
  20.               <v-img src="https://randomuser.me/api/portraits/women/75.jpg"></v-img>
  21.             </v-list-item-avatar>
  22.           </v-list-item>
  24.           <v-divider></v-divider>
  26.           <v-list
  27.             dense
  28.             nav
  29.           >
  31.             <v-list-item
  32.               v-for="item in items"
  33.               :key="item.title"
  34.               @click=""
  35.             >
  36.               <v-list-item-action>
  37.                 <v-icon>{{ item.icon }}</v-icon>
  38.               </v-list-item-action>
  40.               <v-list-item-content>
  41.                 <v-list-item-title>{{ item.title }}</v-list-item-title>
  42.               </v-list-item-content>
  43.             </v-list-item>
  44.           </v-list>
  45.         </v-navigation-drawer>
  47.         <v-list class="grow">
  48.           <v-list-item
  49.             v-for="link in links"
  50.             :key="link"
  51.             link
  52.           >
  53.             <v-list-item-title v-text="link"></v-list-item-title>
  54.           </v-list-item>
  55.         </v-list>
  56.       </v-row>
  57.     </v-navigation-drawer>
  58.   </v-card>
  59. </template>
  1. <script>
  2.   export default {
  3.     data () {
  4.       return {
  5.         items: [
  6.           { title: 'Home', icon: 'dashboard' },
  7.           { title: 'About', icon: 'question_answer' },
  8.         ],
  9.         links: ['Home', 'Contacts', 'Settings'],
  10.         mini: true,
  11.       }
  12.     },
  13.   }
  14. </script>

Navigation drawers（导航抽屉） - 图11

底部抽屉

使用 bottom 属性，我们可以在移动设备上重新定位我们的抽屉，让它从屏幕的底部出来。这是另一种样式，只在遇到 mobile-break-point 时激活。

template script

  1. <template>
  2.   <v-card
  3.     class="mx-auto overflow-hidden"
  4.     height="400"
  5.     width="344"
  6.   >
  7.     <v-system-bar color="deep-purple darken-3"></v-system-bar>
  9.     <v-app-bar
  10.       color="deep-purple accent-4"
  11.       dark
  12.       prominent
  13.     >
  14.       <v-app-bar-nav-icon @click.stop="drawer = !drawer"></v-app-bar-nav-icon>
  16.       <v-toolbar-title>My files</v-toolbar-title>
  18.       <v-spacer></v-spacer>
  20.       <v-btn icon>
  21.         <v-icon>mdi-magnify</v-icon>
  22.       </v-btn>
  24.       <v-btn icon>
  25.         <v-icon>mdi-filter</v-icon>
  26.       </v-btn>
  28.       <v-btn icon>
  29.         <v-icon>mdi-dots-vertical</v-icon>
  30.       </v-btn>
  31.     </v-app-bar>
  33.     <v-navigation-drawer
  34.       v-model="drawer"
  35.       absolute
  36.       bottom
  37.       temporary
  38.     >
  39.       <v-list
  40.         nav
  41.         dense
  42.       >
  43.         <v-list-item-group
  44.           v-model="group"
  45.           active-class="deep-purple--text text--accent-4"
  46.         >
  47.           <v-list-item>
  48.             <v-list-item-title>Foo</v-list-item-title>
  49.           </v-list-item>
  51.           <v-list-item>
  52.             <v-list-item-title>Bar</v-list-item-title>
  53.           </v-list-item>
  55.           <v-list-item>
  56.             <v-list-item-title>Fizz</v-list-item-title>
  57.           </v-list-item>
  59.           <v-list-item>
  60.             <v-list-item-title>Buzz</v-list-item-title>
  61.           </v-list-item>
  62.         </v-list-item-group>
  63.       </v-list>
  64.     </v-navigation-drawer>
  66.     <v-card-text>
  67.       The navigation drawer will appear from the bottom on smaller size screens.
  68.     </v-card-text>
  69.   </v-card>
  70. </template>
  1. <script>
  2.   export default {
  3.     data: () => ({
  4.       drawer: false,
  5.       group: null,
  6.     }),
  8.     watch: {
  9.       group () {
  10.         this.drawer = false
  11.       },
  12.     },
  13.   }
  14. </script>

Navigation drawers（导航抽屉） - 图12