Vuetify.js:<v-text-field>圆角

每当我需要更改Vuetify样式时,我都会向包含元素添加一个类,然后添加样式。使用Vuetify(像任何框架一样)可能会因其特殊性而令人沮丧。在这种情况下,你至少需要3级的特异性。

模板

<v-text-field
  label="Text field"
  solo
  class="my-input"
></v-text-field>

.my-input.v-input .v-input__slot {
  border-radius: 100px;
}

您可以添加 属性转换为v文本字段( vuetify docs

<v-text-field
  label="Text field"
  solo
  rounded
></v-text-field>

<v-text-field
  label="Text field"
  solo
  class="rounded-lg"
></v-text-field>

可以添加以下类来控制边界半径:

• 圆形sm
• 四舍五入
• 圆形lg

v-text-field .

Full documentation here .