如何解决 chrome 自动与 vuetify 中的标签重叠的问题？

Question

尝试outlined在 Vutify 中创建带有文本字段的登录表单时，chrome 自动完成与labels,

<v-text-field
  v-model="email"
  label="e-mail"
  name="email"
  outlined
  prepend-icon="mdi-account"
  type="text"
  required
>
</v-text-field>

您可以在这里重新生成，请填写并提交，然后返回。

Answer 1

好吧，我所做的是这样的：

在输入上

:placeholder="!autofilled ? ' ' : ''"

在脚本中

data() {
        return {
            form: {
                email: '',
                password: '',
            },
            error: null,
            autofilled: false,
        };
},
watch: {
    'form.email'() {
        this.autofilled = true;
     },
},

它的作用：基本上将占位符设置为一个空格总是“升高”标签。不幸的是，静态设置它将使标签无法返回，即使您在填充后清空输入。所以我所做的就是使占位符动态化，并且在占位符恢复为空之后，在对输入进行任何更改之前将其设置为空白。它并不完美，因为在用户保存密码之前的初始加载时，标签将被提升，但我还没有发现比这更好的东西。