Vuetify 应用栏太高 - 占据屏幕的一半答案

【问题标题】：Vuetify App Bar too tall - takes up half the screenVuetify 应用栏太高 - 占据屏幕的一半
【发布时间】：2019-12-09 13:50:21
【问题描述】：

当我在v-app 容器内有一个带有v-app-bar 的空应用程序时，应用程序栏会占据页面的一半。

<v-app>

  <v-app-bar color="deep-purple" dark >
    <v-toolbar-title>Page title</v-toolbar-title>
  </v-app-bar>

  <v-content>
    Hello Vue
  </v-content>

</v-app>

Demo in Codepen

我尝试为dense、short 和height 添加选项，但它们似乎没有任何影响。

文档中有大量带有这种精确应用栏标记的代码示例，所以我试图找出问题所在。

【问题讨论】：

标签： vue.js vuetify.js

【解决方案1】：

您需要像这样将app 属性添加到v-app-bar：

<v-app>

  <v-app-bar color="deep-purple" dark app >
    <v-toolbar-title>Page title</v-toolbar-title>
  </v-app-bar>

  <v-content>
    Hello Vue
  </v-content>

</v-app>

这里的关键是App组件中的所有子元素都必须表明它们是否应该使用应用布局

来自Vuetify > Components > Application > Default Markup：

只要应用 app 属性，您就可以将布局元素放置在任何位置。

来自Vuetify > Components > App Bar > API：

app
将组件指定为应用程序布局的一部分。用于动态调整内容大小。使用此属性的组件应位于v-content 组件的外部，才能正常运行。

【讨论】：

v-content 现在已弃用。请改用v-main。

【解决方案2】：

将 class="flex-grow-0" 添加到您的应用栏。这样可以避免您的问题。

【讨论】：

这是一种解决问题的老套方法。按照 KyleMit 的回答中的说明使用“app”属性。