Vuetify 在工具栏中添加单独的文本字段失败

Question

我正在尝试在工具栏中添加一个单独的文本字段，但这失败了

所以我有

 <v-toolbar dense flat dark color="primary">
        <v-app-bar-nav-icon></v-app-bar-nav-icon>
        <v-toolbar-title>Title</v-toolbar-title>
        <v-text-field

                light
                solo
                placeholder="Search an item here"
        ></v-text-field>

        <v-spacer></v-spacer>

        <v-divider inset
                   vertical
        ></v-divider>

        <v-btn text class="text-none">
            Action Menu
        </v-btn>

    </v-toolbar>

以上产生

我希望在工具栏上垂直居中（如标题）

我也尝试在单独的文本字段中添加一个边距，但它仍然没有在工具栏上居中。

我已经为上述问题制作了一个Codepen 链接

我需要添加什么才能使它居中

Answer 1

你必须在你的v-text-field上有hide-details ，并且dense工具栏的高度对于里面的v-text-field很小（除非你使用 css 来自定义v-text-field高度）。

这是一个简单的例子：

<div id="app">
  <v-app>
    <v-content>
      <v-container style="margin-top:40px">

        <v-toolbar flat dark color="primary">
            <v-app-bar-nav-icon></v-app-bar-nav-icon>
            <v-toolbar-title>Title</v-toolbar-title>
            <v-text-field hide-details solo single-line class="ml-5" light></v-text-field>

            <v-spacer></v-spacer>

            <v-divider inset
                       vertical
            ></v-divider>

            <v-btn text class="text-none">
                Action Menu
            </v-btn>

        </v-toolbar>
      </v-container>
    </v-content>
  </v-app>
</div>