Appearance
好的,按你的偏好我只给"需要修改的代码片段",并在复杂逻辑上一行加注释。
1) 模板:建议在父组件使用时传入 autocomplete="new-password"(这行不必改你组件)
vue
<!-- 父组件调用时这样传,减少浏览器自动填充触发概率 -->
<a-password-input v-model:value="pwd" autocomplete="new-password" />2) 组件样式:覆盖浏览器自动填充的黄底样式(放"非 scoped"样式块里)
vue
<style lang="less">
/* 复杂逻辑:覆盖 Chrome/Safari 的自动填充黄底 —— 用超长过渡+内阴影"涂抹"背景 */
.ant-input:-webkit-autofill,
.ant-input-password input:-webkit-autofill,
input[type="password"]:-webkit-autofill {
-webkit-text-fill-color: var(--ink-950) !important;
/* 将背景过渡到透明,避免黄底一闪 */
transition: background-color 9999s ease-out 0s !important;
/* 用内阴影把背景"刷"为你主题的输入背景色(按需替换为你的变量或颜色) */
box-shadow: 0 0 0 1000px var(--indicator-model) inset !important;
caret-color: var(--ink-950);
}
/* 复杂逻辑:覆盖 Firefox 的自动填充黄底 */
input:-moz-autofill,
.ant-input:-moz-autofill,
.ant-input-password input:-moz-autofill {
-moz-text-fill-color: var(--ink-950) !important;
box-shadow: 0 0 0 1000px var(--indicator-model) inset !important;
caret-color: var(--ink-950);
}
/* 复杂逻辑:获得焦点或悬停时也保持一致 */
.ant-input:-webkit-autofill:focus,
.ant-input-password input:-webkit-autofill:focus,
input[type="password"]:-webkit-autofill:focus,
input:-moz-autofill:focus {
box-shadow: 0 0 0 1000px var(--indicator-model) inset !important;
}
</style>要点
- 这段样式请放在不加 scoped的
<style>中(或单独的全局样式文件)。- 若你必须用 scoped,请改成
:deep选择器版本(见下一段)。
3) 如果你的样式必须 scoped:用 :deep() 包裹
vue
<style lang="less" scoped>
/* 复杂逻辑:scoped 环境下使用 :deep() 穿透到原生 input 伪类 */
:deep(.ant-input:-webkit-autofill),
:deep(.ant-input-password input:-webkit-autofill),
:deep(input[type="password"]:-webkit-autofill) {
-webkit-text-fill-color: var(--ink-950) !important;
transition: background-color 9999s ease-out 0s !important;
box-shadow: 0 0 0 1000px var(--indicator-model) inset !important;
caret-color: var(--ink-950);
}
:deep(input:-moz-autofill),
:deep(.ant-input:-moz-autofill),
:deep(.ant-input-password input:-moz-autofill) {
-moz-text-fill-color: var(--ink-950) !important;
box-shadow: 0 0 0 1000px var(--indicator-model) inset !important;
caret-color: var(--ink-950);
}
</style>4)(可选)进一步降低被自动填充概率的属性
vue
<!-- 复杂逻辑:若你确实不希望浏览器自动填充,可在父组件这样传递;注意并非 100% 有效,密码管理器可能忽略 -->
<a-password-input
v-model:value="pwd"
autocomplete="new-password"
:name="'password_'+Date.now()" <!-- 动态 name,降低命中历史记录 -->
/>这样处理后,浏览器仍可自动填充,但黄底样式会被你主题色"刷掉"。如果你的输入背景不是 var(--indicator-model),把上面 box-shadow 里的颜色换成你真实的输入背景色即可。