解决element-ui input type=password的情况下浏览器自动填充密码问题
前言，当input的type=password,并且前面同时存在一个输入框的情况下，浏览器会出现记录账号密码的弹窗，选择保存记录后下一次会直接填充账号密码框，出现一些前端无法控制的情况，此次修改禁止出现密码自动填充以及选择下拉填充
<el-input v-if="showPass" v-model="loginForm.password" size="small" @change="handlePreLogin" placeholder="请输入密码" :type="((newPwdReadOnly && loginForm.password) || loginForm.password)?'password':'text'" auto-complete="new-password" name="person.user.new_password" @focus="newPwdFocus($event)" :readonly="newPwdReadOnly" @blur="newPwdBlur($event)" ref="newPwdRef">
第一，给各输入项加了auto-complete属性，只能避免保存的时候弹出是否保存密码弹框的问题
内容为空的时候点击type="password"的input框或二次（多次）点击，还是会弹出密码框，所以在上面加了type在password和text之间切换（只能解决第一次多次点击的场景）。
具体解决，给type="password"的输入项增加focus,blur事件和readonly属性，具体focus, blur方法：
具体解决，给type="password"的输入项增加focus,blur事件和readonly属性，具体focus, blur方法：
newPwdFocus(evt, isNew = true) {
if (evt) {
evt.stopPropagation();
evt.preventDefault();
}
setTimeout(() => {
if (isNew) {
this.newPwdReadOnly = false;
} else {
this.rePwdReadOnly = false;
}
}, 100);
},
newPwdBlur(evt, isNew = true) {
if (evt) {
evt.stopPropagation();
}
if (isNew) {
this.newPwdReadOnly = true;
} else {
this.rePwdReadOnly = true;
}
},
关键在于setTimeout 0的延时。
以上还不算完全解决，输入内容，再回车删除内容，发现自动填充框又出来了，所以需要watch以下：
以上还不算完全解决，输入内容，再回车删除内容，发现自动填充框又出来了，所以需要watch以下：
watch: {
"loginForm.password": function () {
if (this.loginForm.password === "") {
this.newPwdReadOnly = true;
this.newPwdFocus(null);
}
},
"loginForm.confirmPwd": function () {
if (this.loginForm.confirmPwd === "") {
this.rePwdReadOnly = true;
this.newPwdFocus(null, false);
}
}
以上还不算完全解决，内容为空的时候点击type="password"的input框或二次（多次）点击，还是会弹出密码框。或者输入密码，回退清空再点击还是会弹出自动填充框。解决办法，加mousedown事件（注意不是keydown，也不是click）
addClickEvt() {
if (this.$refs.newPwdRef) {
this.$refs.newPwdRef.$refs.input.onmousedown = (evt) => {
if (evt) {
evt.preventDefault();
evt.stopPropagation();
}
if (this.loginForm.password === "" || this.newPwdReadOnly) {
this.$refs.newPwdRef.$refs.input.blur();
setTimeout(() => {
this.$refs.newPwdRef.$refs.input.focus();
}, 0);
}
return false;
};
}
if (this.$refs.reNewPwdRef) {
this.$refs.reNewPwdRef.$refs.input.onmousedown = (evt) => {
if (evt) {
evt.preventDefault();
evt.stopPropagation();
}
if (this.loginForm.confirmPwd === "" || this.rePwdReadOnly) {
this.$refs.reNewPwdRef.$refs.input.blur();
setTimeout(() => {
this.$refs.reNewPwdRef.$refs.input.focus();
}, 0);
}
return false;
};
}
},
当点击（或多次点击）密码框的时候会触发mousedown事件，先失焦就阻止了自动填充框的弹出，再聚焦就实现了鼠标还在输入框的功能。
