vuetify解决input自动填充重叠问题

问题重现

解决办法

浏览器一般都自带密码填充功能，但是在密码自动输入时，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;
  }
}