如何将类名添加到v-text-fields标签标记中

Question

Vuetify有一个v-text-field输入，它基本上是一个HTML表单带有并将其打包到各种嵌套的

标签(https://vuetifyjs.com/en/components/text-fields/) .

默认情况下，它的标签与输入值的位置共享相同的空间。他们开发了一种行为，当用户开始在文本字段中输入时，标签会浮在文本字段的上方。

有一个叫做'single-line'的属性可以防止标签的浮动。我想要相反的效果，无论是否有输入，标签总是浮动在文本字段上方。这可能吗?

当我检查HTML时，我注意到标签(浮动时)附加了一个名为"v-label—active"的类。我不确定如何将该类名称附加到标签，因为我没有直接访问标签标记。取而代之的是标签，自动生成HTML

Answer 1

从我在文档中阅读的内容来看，似乎没有您想要的行为选项。

---

然而，一个解决方案可以如下:

当聚焦文本字段时，这将在您提到的label元素上应用v-label--active类。这个类应用css属性transform: translateY(-18px) scale(.75)。

使用您自己的自定义css/scss，您可以针对v-label类并在其上应用相同的transform: translateY(-18px) scale(.75)。这将产生你想要的效果。当你把焦点放在输入框上时，文本将变成蓝色(或任何你设置的激活状态颜色)。

参见示例:https://codepen.io/jt-totty/pen/WNoKNmM