登录页隐藏密码位数(Vue)

需求：用户输入密码时所展示的密码长度和实际输入位数长度不同。

解决思路：每当输入一位时，随机生成1~5位的字符串加入之前所输入值后面，并且记录所产生的随机字符串长度，以便删除时使用。

解决方式：

1. input 加入on-change事件（iview写法）

<Input type="password" v-model.trim="form.password"  @on-change="passwordChange"  :placeholder="请输入密码"/>

2.当输入值变化时进行数据处理

data(){
    return {
        form: {
            password: ''  // HTML绑定的值
        },
        passwordCover: [], // 插入值的长度
        passwordReal: '', // 实际的密码
        oldPassword: '', // 旧假密码
    }
},
 methods: {    
           passwordChange () {
                // 通过新旧密码长度，判断是删除还是增加
                if (this.oldPassword.length < this.form.password.length) { // 新增
                    if (this.form.password.length < 2) { // 防止用户通过选择全部替换内容
                        this.passwordCover = [];
                        this.passwordReal = '';
                    }
                    this.passwordReal += this.form.password.slice(-1); // j将最后一位值（新输入的值）加入实际密码中
                    // 随机生成1~5位·
                    let result = '';
                    let length = Math.ceil(Math.random() * 5);
                    this.passwordCover.push(length);
                    while (length + 1 > 0) {
                        result += '·'; // 这里我添加的是·,也可以用别的代替
                        length -= 1;
                    }
                    // 删除form.password中新输入的密码 （也可以不删除，这么写是因为我有特殊需要）
                    this.form.password = this.form.password.slice(0, -1);
                    this.form.password += result; // 将刚刚随机生成的字符串添加到form.password中
                    this.oldPassword = this.form.password; // 更换新的旧密码值
                } else {
                    this.deleteData();  // 删除一位数据
                }
            },
            deleteData () {
                // 在实际密码中删除一位
                this.passwordReal = this.passwordReal.slice(0, -1);
                // 取出最后一位所添入的字符串长度
                let len = this.passwordCover.pop();
                // 从后删除对应长度
                this.form.password = this.form.password.slice(0, -len);
                // 更换新的旧密码值
                this.oldPassword = this.form.password;
            },
}

保存时，只需要保存this.passwordReal 便可

 下一篇记录在此基础上如何让浏览器不保存密码。