vuetify.js - 如何将类名添加到 v-text-fields 标签标签

Question

Vuetify 有一个 v-text-field 输入，它基本上结合了 HTML 表单 <input type=text...> 和一个 <label> 并将其打包在各种嵌套的 <div> 标签中（https://vuetifyjs.com/ en/components/text-fields/）。

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

有一个名为“单行”的属性可以防止标签浮动。我想要相反的效果，无论是否有输入，标签总是浮动在文本字段上方。这可能吗？

当我检查 HTML 时，我注意到标签（浮动时）附加了一个名为“v-label--active”的类。我不确定如何将该类名附加到标签上，因为我无法直接访问标签标签。相反，我有一个 <v-text-field > HTML 标签，它在编译时会自动生成 HTML <label> 标签。

标签： vuetify.js

Answer 1

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

---

但是，解决方法可能如下：

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

使用您自己的自定义 css/scss，您可以定位v-label该类并将其应用于transform: translateY(-18px) scale(.75)它。这将产生您想要的效果。当您专注于输入字段时，文本将变为蓝色（或您设置的任何活动状态颜色）。

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