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>