解决使用input 框的自动填充和浏览器缓存密码问题

        最近在开发前端项目时遇到这个问题，在输入框使用类型为password时浏览器会自动填充已缓存的密码，还会显示保存的密码，这对设置密码时是非必要的，这个问题找了几个小时都没有合适的解决方法，最终通过监听字段的方法解决了这个问题，解决如下

<el-input
    v-model="changePassword.checkPassword"
    type="text"
    autocomplete="new-password"//防止浏览器自动填充密码
    placeholder="请输入新密码"
></el-input>

        将类型换为text，主要原理就是通过watch监听密码的变化，定义一个字段保存输入的数据，然后将输入的字符换成‘*’，就能做到密文输入密码的效果，当然如果不需要密文就直接加上属性autocomplete="new-password"就解决了。

监听方法如下： 

 watch: {
    "checkPassword": function (newval, oldval) {
      //如果是删除字符
      if (newval.length < oldval.length) {
        password = password.substr( 0 , password.length - 1);
      } else {
        //如果是添加字符
        //因为在将显示密码最后一位设置为*时又走进了一遍监听方法，所以要添加这个判断条件
        if (newval.charAt(newval.length - 1) != "*") {
          //password保存用户输入的密码，每添加一个字符修改一次
          password += newval.charAt(newval.length - 1);
          //将最后一位设置成*
          let res = newval.split("");
          res.forEach((element, index) => {
            res.splice(index, 1, "*");
          });
          checkPassword = res.join("");
        }
      }
    }
  }

       其中password就是最终的输入结果，checkPassword是显示的密码，完美解决

---

       在测试的时候发现一个问题，如果使用鼠标多选了删除，那删除的数据就不是一个，以上的监听代码就会出现问题，需要添加计算删除的字符个数，解决如下：

 watch: {
    "checkPassword": function (newval, oldval) {
      //如果是删除字符
      if (newval.length < oldval.length) {
        //计算删除的个数
        let delLength = oldval.length - newval.length;
        password = password.substr( 0 , password.length - delLength);
      } else {
        //如果是添加字符
        //因为在将显示密码最后一位设置为*时又走进了一遍监听方法，所以要添加这个判断条件
        if (newval.charAt(newval.length - 1) != "*") {
          //password保存用户输入的密码，每添加一个字符修改一次
          password += newval.charAt(newval.length - 1);
          //将最后一位设置成*
          let res = newval.split("");
          res.forEach((element, index) => {
            res.splice(index, 1, "*");
          });
          checkPassword = res.join("");
        }
      }
    }
  }