Vuetify solves the problem of input autofill overlap

problem reproduction

Solution

Browsers generally have their own password filling function, but when the password is automatically entered, vuetifythe labelsum valueis easy to overlap, so record the solution

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)
    })

Overriding styles in overrides.scss, limited to webkit browser core implementation

// 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;
  }
}