问题重现
解决办法
浏览器一般都自带密码填充功能,但是在密码自动输入时,vuetify
的label
和value
很容易重叠,故记录一下解决方案
const addActiveClass = () => {
const targetNode = document.querySelectorAll(
'input:-internal-autofill-selected',
)
targetNode.forEach(el => {
const textField = el.parentNode
// el.parentNode
const label = textField.querySelector('.v-label')
if (label) {
label.classList.add('v-label--active')
}
if (textField.MDCTextField) {
textField.MDCTextField.foundation_.notchOutline(true)
}
})
}
onMounted(async () => {
let timeId = setTimeout(() => {
clearTimeout(timeId)
addActiveClass()
}, 600)
})
在overrides.scss
中覆盖样式,仅限于webkit浏览器内核实现
// Browser Autofill styles
.v-application.theme--light {
input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill {
-webkit-transition-delay: 111111s;
-webkit-transition: color 11111s ease-out, background-color 111111s ease-out;
}
}