当尝试使用以下命令创建登录表单时outlinedVutify 中的文本字段，chrome 自动完成功能与labels,
<v-text-field
v-model="email"
label="e-mail"
name="email"
outlined
prepend-icon="mdi-account"
type="text"
required
>
</v-text-field>
你可以重生here https://codepen.io/prajin-tst/pen/NWNWvBZ请填写并提交，然后返回。
这就是我解决这个问题的方法。
看来我们的主要问题如下：
- Chrome 的自动填充在加载页面时不会使界面做出反应，让设计就像您的图像一样。
- 因此，在注入时，我们应该自己进行修复，但 Chrome 中没有任何事件可以通知我们何时自动填充登录名/密码。
有趣的是，从浏览器窗口中的任何点击“FROM USER”都会自动通知反应性，并且一切都再次正常工作，但它不适用于“FROM 触发器/调度”内部方式。
因此，首先，我们需要找到一种在登录/密码自动填充后做出反应的方法。
其次，我们需要自行修复设计，因为只有 FROM USER 操作才能使设计再次正常工作。
1.加载页面自动填充后的反应
- 就像哈克尼斯提到的那样，我们可以尝试检查一下
:-webkit-autofill在安装代码后 X 秒定期查看是否注入了自动填充（根据我的测试，Chrome/Firefox/Edge 工作正常）
- 另一种解决方案是使用
animationstart事件（参见此处：https://github.com/material-components/material-components-web/issues/4447#issuecomment-580401216 https://github.com/material-components/material-components-web/issues/4447#issuecomment-580401216)
我使用第一个解决方案：
export default {
//...
data() {
return {
//...
autofillFix: false,
}
},
//...
mounted() {
this.autoLoginCheckingInterface()
},
//...
autoLoginCheckingInterface() {
// each 100ms we check if the issue was produced
let intervalDetectAutofill = setInterval(() => {
if (
// we target at least one of the stuff that will be affected by autofill
// to do our checking
document.querySelectorAll('input[type="password"]:-webkit-autofill')
.length > 0
) {
// and we inform the system about the issue if it is produced
this.autofillFix = true
// we stop to check if issue was produced
clearInterval(intervalDetectAutofill)
}
}, 100)
// if after 3s nothing appear, means no autofill was made
setTimeout(() => {
if (intervalDetectAutofill) {
clearInterval(intervalDetectAutofill)
intervalDetectAutofill = null
}
}, 3000)
},
//...
}
<!--
we will inject `.autofill-fix` class to be able fix design ourself at time of this bug occur
-->
<v-text-field
...
:class="{ 'autofill-fix': autofillFix }"
...
label="Email address or username"
...
dense
outlined
@focus="autofillFix = false"
/>
<!--
we use @focus to let the normal behavior take again the lead
because we know this USER ACTION will made Chrome work well again
-->
<v-text-field
...
:class="{ 'autofill-fix': autofillFix }"
...
label="Password"
type="password"
...
dense
outlined
@focus="autofillFix = false"
/>
2. 自行修复设计
我们可以看到什么时候发生了变化v-text-field充满。没有内容，我们可以看到：
自动填充后，我们可以看到：
所以从红色部分我们可以看到此时需要注入如下代码
的.autofill-fix存在以正确的方式修复设计
.autofill-fix.v-text-field--outlined.v-input--dense .v-label {
left: -28px!important;
transform: translateY(-16px) scale(.75);
}
注意：如果不使用，则需要更改 CSS 选择器outlined or dense。注意选择器的特殊性https://specificity.keegan.st/ https://specificity.keegan.st/。事实上，您需要根据您的设计调整固定的更改
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
