应用程序

应用程序

在 Vuetify 中，v-app组件和v-navigation-drawer、v-app-bar、v-footer等组件上的app属性会在您的应用程序启动时帮助<v-content>组件获得正确的大小。这样您就可以在创建独一无二的界面的同时无需为您布局的大小设置而烦恼。所有应用程序都需要v-app。它是许多 Vuetify 组件和功能的挂载点，并可以保证它将默认的应用程序变种（暗色或亮色）传递给子组件，还可以保证跨浏览器支持 Safari 等浏览器中某些点击事件。v-app应该在您的应用程序中仅使用一次。

API

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

为了让您的应用程序正常工作，您必须将其封装在一个v-app组件中。该组件是为保证正常的跨浏览器支持所必需的。Vuetify 不支持在单个页面中使用多个互相隔离的 Vuetify 实例。v-app可以存在于您应用程序 body 元素内的任何地方，但必须一个作为所有 Vuetify 组件的父级元素的v-app。

默认应用程序标记

这是 Vuetify 默认应用程序标记的一个示例。只要您使用 app 属性，您就可以将您的布局元素放在任何地方。此处的关键组件是v-content。它将会根据您分配的 app 组件动态地调整大小。上述的组件的任意组合都可以使用，包括v-bottom-navigation。

当使用 vue-router 时，建议您将您的视图放到v-content内。

<!-- App.vue -->
<v-app>
  <v-navigation-drawer app>
    <!-- -->
  </v-navigation-drawer>
  <v-app-bar app>
    <!-- -->
  </v-app-bar>
  <!-- Sizes your content based upon application components -->
  <v-content>
    <!-- Provides the application the proper gutter -->
    <v-container fluid>
      <!-- If using vue-router -->
      <router-view></router-view>
    </v-container>
  </v-content>
  <v-footer app>
    <!-- -->
  </v-footer>
</v-app>

使用 app 属性会自动应用位置：fixed 到布局元素。如果你得应用程序需要一个 absolute 元素，你可以通过使用 absolute 属性来覆盖此功能。

应用程序组件

下面是支持 app 属性的所有组件列表，并可以在你的应用程序中用作布局元素。这些可以混合和匹配，每个特定组件中仅仅只能同时存在一个。你也可以交换它们的位置，布局会自动适应。有关显示如何构建各种布局的示例请浏览 Pre-made layouts。

这些应用程序组件中的每个组件都有一个指定的位置和优先级，它会影响布局系统中的位置。

v-system-bar: 始终位于优先于 v-app-bar 的应用程序顶部。
v-app-bar: 始终位于优先级低于 v-system-bar 的应用程序顶部。
v-navigation-drawer: 可以放置在应用程序的左侧或右侧，也可以配置为 `v-app-bar’ 的旁边或下面。
v-footer: 始终位于优先级低于 v-bottom-navigation 的应用程序底部。
v-bottom-navigation: 始终位于优先级高于 v-footer 的应用程序底部。

简而言之，这意味着 v-system-bar 始终在 v-app-bar 的顶部，v-navigation-drawer 可以占据左侧或右侧，v-footer 始种在 v-bottom-navigation 的顶部。

Vuetify 应用程序

应用程序服务

application service 用来配置你得 Vuetify 布局。它与 v-content 组件通信，以便能够正确调整应用程序内容的大小。它具有许多可以访问的属性：

{
  bar: number
  bottom: number
  footer: number
  footerInset: number
  left: number
  right: number
  top: number
}

当您使用 app 属性添加和删除组件时，这些值会自动更新。它们是不可编辑并且是只读状态。你可以在 $vuetify 对象上通过引用应用程序属性来访问这些值。

console.log(this.$vuetify.application.top) // 56

无障碍

默认情况下，v-content 被分配到 main 的 TR 作用，这表示它是文档或应用程序 body 的主要内容区域。

Application（应用程序）

应用程序

API

默认应用程序标记

应用程序组件

应用程序服务

无障碍