v-navigation-drawer 组件是用户将用来浏览应用程序的组件。 导航抽屉已预先配置为可以在有或没有 vue-router 的情况下使用。 为了显示的目的，一些示例被包装在 v-card 元素中。 在您的应用程序中，通常会将 v-navigation-drawer 直接放置在 v-app 的下面。
如果使用启用了 app 属性的 v-navigation-drawer，则不需要像示例中那样使用 absolute 属性。
从下面选择您想要的组件，并查看可用的属性、插槽、事件和函数。
给组件应用 position: absolute
指定该组件作为应用程序布局的一部分。用于动态调整内容的大小。使用此 prop 的组件应该位于 v-main组件的 外 部，才能正常运行。你可以在 应用程序页面 上获得更多关于布局的信息。注意： 这个 prop 会自动将 position: fixed 应用到布局元素上。你可以使用 absolute prop 来覆盖这个功能。
在移动设备上从屏幕底部展开
剪切的抽屉位于应用程序工具栏下方
将指定的颜色应用于控件 - 它可以是 material color 的名称（例如 success 或者 purple）或 css 颜色 (#033 或 rgba(255, 0, 0, 0.5))。 你可以在 colors page 中找到内置类的列表。
将暗色主题变量应用到组件。你可以在 dark themes 的 Material Design 文档中找到更多有关信息。
调整大小时将自动打开/关闭抽屉，具体取决于手机还是桌面
当路由改变时禁止打开抽屉导航
将抽屉折叠成 mini-variant，直到用鼠标悬停
给组件应用 position: fixed
浮动抽屉没有可见的容器（没有右边框）
设置导航抽屉高度
隐藏遮罩层的显示.
为组件设置浅色主题。
凝结导航抽屉宽度，也接受.sync修饰符。这样，抽屉在点击时会重新打开
指定mini属性开期时指定的宽度
为组件设置指定的移动断点。这将为移动设备应用替代样式，如 temporary prop，或在满足断点值时激活 bottom prop。将值设置为 0 将禁用此功能。
设置遮罩层的颜色。
设置遮罩层的透明度。
不管屏幕尺寸如何，抽屉都可以看到
将抽屉放置在右侧
删除所有自动状态功能（调整大小、移动、路由）并手动控制抽屉状态。
指定在根元素上使用的自定义标签。
临时抽屉位于其应用之上，并使用稀松布（叠加）来使背景变暗
禁用移动触摸功能
控制组件可见还是隐藏。
设定组件的宽度。
抽屉底部的插槽
默认Vue 插槽。
用于修改 v-img 属性时使用 src 属性
{
height: string
src: string | srcObject
}抽屉顶部的插槽
被绑定模型的更新
boolean过渡完成后，发出事件对象。
objectmini-variant.sync 事件
boolean1px !default;16 !default;下面是一些简单到复杂的例子。
导航抽屉可以定制，以适应任何应用程序的设计。这里，我们使用 append 插槽应用自定义背景颜色和附加的内容区域。
默认情况下，导航抽屉的右边框为 1px，将其与内容分开。 在此示例中，我们要从左侧拆下抽屉，让它自己浮动。 floating 属性删除右边框（如果使用 right，则删除左边框）。
当使用 mini-variant prop 时，抽屉会缩小（默认 56px），并隐藏 v-list 中除了第一个元素之外的所有内容。在这个例子中，我们使用了 .sync 修改器，它允许我们以程序化的方式绑定抽屉的扩展/收缩。
临时抽屉位于其应用之上，并使用稀松布（叠加）来使背景变暗。这个抽屉的行为是模仿在移动设备时的持续抽屉。点击抽屉外部会导致关闭。
导航抽屉也可以位于应用程序（或元素）的右侧。 这对于创建带有辅助信息（可能没有任何导航链接）的侧页很有用。 使用 RTL 时，必须为抽屉明确定义 right。
将组件置于 mini-variant 模式，并在悬停后展开。 不更改内容区域。 宽度可以通过 mini-variant-width 属性进行控制。
将自定义背景应用于抽屉。 如果您需要自定义 v-img 的属性，则可以使用 img 插槽。
在此示例中，我们定义了一个自定义宽度来容纳我们的嵌套抽屉。 使用 v-row，我们确保抽屉和列表在水平方向上彼此相邻。
使用 bottom 属性，我们可以在移动设备上重新定位我们的抽屉，让它从屏幕的底部出来。这是另一种样式，只在遇到 mobile-breakpoint 时激活。