Vuetify.js：<v-文本字段>圆角

Question

如何在竞技场中获得的圆角？

<v-flex xs12>
    <v-text-field  style="border-radius:50px"
        label="Text field"
        solo
    ></v-text-field>
</v-flex>

我尝试了border-radius属性来干扰容器<v-flex>和<v-text-field>本身，但是它没有工作。

科德芬。

Answer 1

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

模板

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

css

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

Answer 2

可以将圆形属性添加到v-text-字段(辩证法)中。

​

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

​

Answer 3

你可以这样做：

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

可以添加这些类来控制边框半径：

• 圆-sm
• 舍入
• 四舍五入
• 四舍五入
• 舍入-0

我经常使用“四舍五入”来消除像v-text-field这样的组件中令人讨厌的边界半径。

这里有完整的文档。