解决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方法：

 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: {

    "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事件，先失焦就阻止了自动填充框的弹出，再聚焦就实现了鼠标还在输入框的功能。