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

Posted 2023-02-19

【中文标题】如何将类名添加到 v-text-fields 标签标签

【英文标题】：How does one add a class name to a v-text-fields label tag

【发布时间】：2021-06-02 06:56:42

【问题描述】：

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

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

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

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

【参考方案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