如何在 Vuetify 中更改 v-text-field 的宽度？

Question

我将 v-text-field 组件放在工具栏内，但它几乎占用了所有可用空间。如何更改此文本字段的宽度以减少空间？

 <v-toolbar
    dense
  >
    <v-app-bar-nav-icon></v-app-bar-nav-icon>
    <v-toolbar-title>Title</v-toolbar-title>
    <v-text-field
      hide-details
      label="Filled"
      placeholder="Search"
      filled
      rounded
      dense
      single-line
      append-icon="mdi-magnify"
    ></v-text-field>
    <v-btn rounded>Button 1</v-btn>
    <v-btn icon>
      <v-icon></v-icon>
    </v-btn>
    <v-btn icon>
      <v-icon>mdi-dots-vertical</v-icon>
    </v-btn>
  </v-toolbar>

原文由 Alex T 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您可以通过 css 以范围样式执行此操作：

 <style scoped>
/deep/ .v-text-field{
      width: 400px;
}
</style>

有关详细信息，请阅读 Vuetify 文档。

原文由 Sherzod 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

由于工具栏是 display:flex 你可以使用 class="shrink" …

       <v-text-field
            hide-details
            label="Filled"
            placeholder="Search"
            filled
            rounded
            dense
            single-line
            append-icon="mdi-magnify" class="shrink">
      </v-text-field>

演示： https ://codeply.com/p/h3Y8u3nK7P

原文由 Zim 发布，翻译遵循 CC BY-SA 4.0 许可协议