网上找的要不就是缺少方法要不就是不好用,故发一个完整的
粘贴可用版本
<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>
loginForm: {username: "",password: "",pwdCover:"",},password: "",
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('');},
粘贴不可用版本（需要手工一个个字符键入）
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;}});},
)
)
