如何将输入标签固定到字段顶部？

Question

有没有办法修复标签，使其不会进入字段并有效地成为占位符？

我希望它保持这样，即使在字段未聚焦且没有输入时也是如此：

我不想这样下去:

官方组件 API 似乎不支持开箱即用，我很难使用 scss 定位它并将其固定在顶部。有没有办法只使用 scss 来做到这一点？（我不想为了覆盖标签的行为而将所有 Vuetify 输入组件包装到自定义组件中）。

我找到了 this 并尝试做与那里所做的类似的事情，但没有成功。

谢谢

Answer 1

你可以像下面的例子那样使用persistent-placeholder

        <v-text-field
          value=""
          label="Outlined"          
          outlined
          persistent-placeholder
         ></v-text-field>

https://codepen.io/nilesh9836/pen/mdqPXOd?editors=101

如何将输入标签固定到字段顶部？

How to pin an input label to the top of the field?

sass

label

vuetify.js