VUE阻止浏览器记住密码若依CLOUD（INPUT框密码替换圆点）

网上找的要不就是缺少方法要不就是不好用,故发一个完整的
粘贴可用版本

javascript 复制代码

  <el-form-item prop="password">
        <el-input v-model="loginForm.pwdCover" type="text" name="pwd" id="pwd" placeholder="密码" autocomplete="off" @input="setPassword"><i slot="prefix" class="el-icon-lock"></i></el-input>
      </el-form-item>

javascript 复制代码

      loginForm: {
        username: "",
        password: "",
        pwdCover:"",
      },
      password: "",

javascript 复制代码

setPassword(val) {
      let realarr = this.password.split(''); // 真实密码
      let coverarr = val.split(''); // 覆盖的密码数组
      let coverlen = coverarr.length; // 覆盖的密码数组
      let realLen = realarr.length; // 覆盖的密码数组
      let lastchar = ''; // 新输入的字符 
      let index = -1; // 新输入的字符位置
      coverarr.forEach((el, elIndex) => {

      if (el !== '●') {
        // 截取未被替换为·的字符串，即为本次键入的内容
          index = elIndex;
          lastchar = lastchar + el; // 因为监听的是每次输入框的变化值，所以插入的一定是连贯的字符串
        }
      });
      if (lastchar.length) {
        index = ( index + 1 ) - lastchar.length // 有输入的字符串，计算真正的插入位置
      }
      if (realLen +lastchar.length === coverlen) {
        // 未删除字符串且新增字符，直接插入
        realarr.splice(index, 0, lastchar);
      } else if (index === -1) {
        //index = -1 即未找到非*号字符，没有新增，无法通过该方法判断在哪个位置删除的
        // 使用selectionStart获取光标位置,确定位置，删去缺少的元素个数
        let pos = document.getElementById('pwd').selectionStart; 
        realarr.splice(pos, realLen - coverlen);
      } else {
        // 替换字符
        realarr.splice(index, (realLen + lastchar.length)-coverlen, lastchar);
      }
        // 将 pwdCover 替换成 ●
        this.loginForm.pwdCover = val.replace(/\S/g, '●');
        this.loginForm.password = realarr.join('');
        this.password = realarr.join('');
    },

粘贴不可用版本（需要手工一个个字符键入）

javascript 复制代码

setPassword(val) {
        // let reg = /[0-9a-zA-Z]/g; // 只允许输入字母和数字
        let nDot = /[^●]/g; // 非圆点字符
        let index = -1; // 新输入的字符位置
        let lastChar = void 0; // 新输入的字符
        let realArr = this.password.split(''); // 真实密码数组
        let coverArr = val.split(''); // 文本框显示密码数组
        let coverLen = val.length; // 文本框字符串长度
        let realLen = this.password.length; // 真实密码长度
        // 找到新输入的字符及位置
        coverArr.forEach((el, idx) => {
            if(nDot.test(el)) {
                index = idx;
                lastChar = el;
            }
        });
        // 判断输入的字符是否符合规范，不符合的话去掉该字符
        // if(lastChar && !reg.test(lastChar)) {
        //     coverArr.splice(index, 1);
        //     this.loginForm.pwdCover = coverArr.join('');
        //     return;
        // }
        if (realLen < coverLen) {
            // 新增字符
            realArr.splice(index, 0, lastChar);
        } else if (coverLen <= realLen && index !== -1) {
            // 替换字符（选取一个或多个字符直接替换）
            realArr.splice(index, realLen - (coverLen - 1), lastChar);
        } else {
            // 删除字符，因为 val 全是 ● ，没有办法匹配，不知道是从末尾还是中间删除的字符，删除了几个，不好对 password 处理，所以可以通过光标的位置和 val 的长度来判断
            let pos = document.getElementById('pwd').selectionEnd; // 获取光标位置
            realArr.splice(pos, realLen - coverLen);
        }
        // 将 pwdCover 替换成 ●
        this.loginForm.pwdCover = val.replace(/\S/g, '●');
        this.loginForm.password = realArr.join('');
        this.password = realArr.join('');
    },

    getCode() {
      getCodeImg().then(res => {
        this.captchaOnOff = res.captchaOnOff === undefined ? true : res.captchaOnOff;
        if (this.captchaOnOff) {
          this.codeUrl = "data:image/gif;base64," + res.img;
          this.loginForm.uuid = res.uuid;
        }
      });
    },