谷歌浏览器79左右版本取消自动填充

vue中的实现

html

<template>
	<el-form>
		<!-- 旧版本用这个就可以 -->
       <input type="text" class='hide' id="loginUserName"/>
       <input type="password" class='hide' id="loginPassword"/>
		<!-- 旧版本用这个就可以 -->
		
       <el-input
         ref="text1"
         @input="changeUser"
         placeholder="账号"
         v-model.trim="formData.user"
         maxlength="100"
       />
       <el-input
      	 ref="password1"
         @input="changePwd"
         placeholder="密码"
         type="password"
         v-model.trim="formData.pwd"
         maxlength="100"
         autocomplete="new-password"
       >
       </el-input>
	</el-form>
</template>

javascript

var flag1 = true
var flag2 = true
export default {
data(){
	return {
		formData: {
			user: '',
			pwd: '',
		}
	}
},
    .....
	methods: {
		changeUser(v) {
	      // 去掉谷歌浏览器的填充
	      if (!v && flag1 ) {
	        flag1 = false
	        setTimeout(() => {
	          this.$refs.text1.blur()
	          this.$refs.text1.focus()
	          flag1 = true
	        }, 20)
	      }
	    },
	    changePwd(v) {
	      // 去掉谷歌浏览器的填充
	      if (!v && flag2 ) {
	        flag2 = false
	        setTimeout(() => {
	          this.$refs.password1.blur()
	          this.$refs.password1.focus()
	          flag2 = true
	        }, 20)
	      }
	    },
	}
    .....
    mounted() {
        // 这里是为了适应element-ui的el-input组件的元素结构 请根据实际情况调整 如果可以请使用 @mousedown='changeUser(formData.pwd)'
    	setTimeout(() => {
	        let vm = this
	        if (vm.$refs.password1 && vm.$refs.password1.$refs.input) { 
	          vm.$refs.password1.$refs.input.onmousedown = function() {
	            vm.changeUser(vm.formData.pwd)
	          }
	        }
	        if (vm.$refs.text1 && vm.$refs.text1.$refs.input) {
	          vm.$refs.text1.$refs.input.onmousedown = function() {
	            vm.changePayeeNme(vm.formData.user)
	          }
	        }
	     }, 100);
	}
}

css

.hide{
  width: 0;
  border: none;
  position: absolute
}