为什么我不能将<v-app-bar>高度设置为自动？

Question

非常简单的代码。

<div>

  <v-app-bar
    app
    flat
  >
    <v-app-bar-title>
      Page Title
    </v-app-bar-title>
  </v-app-bar>

  <v-container fluid>
    <v-card
      height="400"
      outlined
      flat
    >
      <v-card-title>
        Card Title
      </v-card-title>
    </v-card>
  </v-container>

</div>

一切都按预期进行，但如果我将

height="auto"

添加到我的

<v-app-bar>

，就会发生这种情况。

看起来

<v-main>

不再正确计算。如何避免这个问题？

Answer 1

回答“为什么你无法将

<v-app-bar>

高度设置为自动”这个问题，你需要深入了解 Vuetify 源代码。

所以，基本上

<v-app-bar>

是

<v-toolbar>

组件的扩展。 查看源码，我们可以发现 height style prop 是通过以下代码计算的：

genContent () {
  return this.$createElement('div', {
    staticClass: 'v-toolbar__content',
    style: {
      height: convertToUnit(this.computedContentHeight),
    },
  }, getSlot(this))
},

我们对

this.computedContentHeight

的计算方式感兴趣。看这段代码：

computedContentHeight (): number {
  if (this.height) return parseInt(this.height)
  if (this.isProminent && this.dense) return 96
  if (this.isProminent && this.short) return 112
  if (this.isProminent) return 128
  if (this.dense) return 48
  if (this.short || this.$vuetify.breakpoint.smAndDown) return 56
  return 64
},

答案是：每次当你将一些字符串传递给

height

属性时，Vuetify 都会尝试将其转换为整数值。您试图传递

auto

值，但

parseInt("auto")

是

NaN

。这就是为什么你不能传递这个值。我认为，Vuetify 文档中没有很好地解释。

如果您真的想要设置

height:auto

，您可以为您的

style="height: auto"

组件设置

<v-app-bar>

。但是，正如 @yoduh 已经说过的，这可能不是你想要的。

Answer 2

使用 height="auto"，v-main 不再知道使用多少填充来从应用程序栏偏移页面内容，因为它无法提前知道 height=auto 最终会以像素为单位，因此v-main 最终位于应用栏后面的视口顶部。为了避免这个问题，不要使用 height="auto"。如果您想要较小的应用程序栏，vuetify 提供了您可以使用的

dense

属性，或者您始终可以指定特定的高度像素值

Answer 3

我使用的解决方法是在 css 中显式设置高度。简单地在组件上设置

style="height: auto"

是行不通的，因为 vuetify 会覆盖它。为您的组件提供一个 ID，并将类似以下内容添加到您的 css 中：

<style lang="scss">
#journal-toolbar {
  height: auto !important;
}

!important

将覆盖vetify添加的计算值。

注意：重写样式可能会产生意想不到的后果，所以要好好测试。它适用于我的场景，其中涉及动态大小的工具栏扩展。