如何更改 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>

Answer 1

由于工具栏是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

Answer 2

您可以通过 scoped 样式的 css 来实现：

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

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

Answer 3

Vuetify 的答案如下：将你的v-text-field包裹在v-responsive中，如下所示：

<v-responsive class="ma-0 pa-0" :width="`${input.length}.5rem`">
   <v-text-field v-model="input"/>
</v-responsive>

您当然可以将宽度计算更改为任意 javascript，这样文本字段将始终适合键入的输入。

Answer 4

我想你可以在你的 v-text-field 标签中使用 width="...px" 这样：

<v-text-field
    ...

    width="...px"
    
    ...     
 ></v-text-field>