javascript - Vuetify 在应用栏中垂直居中自动完成？

Question

如果我在 v-app-bar 中添加一个 v-autocomplete 它会出现在应用栏的顶部，那里的其他所有内容都居中。

    <v-app-bar app color="primary" dark>
      <v-icon class="mr-3">mdi-chart-line</v-icon>
      <v-toolbar-title>Centered title</v-toolbar-title>
      <v-autocomplete
        filled
      ></v-autocomplete>
      <v-spacer />
      <v-btn to="/products" nuxt text>
        Centered button
      </v-btn>
    </v-app-bar>

我是否缺少某些选项？或者我应该在自动完成周围包装一些其他元素？我尝试添加尽可能少的自定义 CSS，以便以后可以轻松更新。

看起来像这样:

Answer 1

这是因为此组件提供的详细信息。例如错误信息或提示。因此，如果您想要这些功能，您可以使用 height 属性增加应用栏的 height。

如果您不需要它们，您可以将hide-details 添加到v-autocomplete。这将使组件适合应用栏，如果你想要更小的输入，你可以添加 dense 到它。变小或增加应用栏的高度。

所以最终代码是:

<div id="app">
  <v-app id="inspire">
    <v-app-bar app color="primary" dark>
      <v-icon class="mr-3">mdi-chart-line</v-icon>
      <v-toolbar-title>Centered title</v-toolbar-title>
      <v-autocomplete
        filled dense hide-details
      ></v-autocomplete>
      <v-spacer />
      <v-btn to="/products" nuxt text>
        Centered button
      </v-btn>
    </v-app-bar>
  </v-app>
</div>