实现VUE input新增输入时用户敏感信息脱敏

近日接到需要输入用户信息的同时进行信息脱敏的需求，平时的脱敏只在展示时用到过，边输入边脱敏，本小白直接蒙了。难点在于，vue动态绑定的值不能脱敏后传给后端，需要传输客户填写的真实数据。研究一番最后决定采用“双input框”方法，通过区分展示值和真实值的方式，让接口传真实值，而页面展示脱敏后的数据。

第一部分 脱敏JS方法

这里利用了vue的mixin混入策略，将脱敏的方法写成公共的，方便其他模块公用。

export const mixins = {
    //身份证脱敏
	methods: {
   
	//身份证号脱敏
		setCertNo(certNo) {
   
			if (certNo && certNo.length >= 10) {
   
				var certNo = certNo.trim();
				// let cert1 = certNo.substring(0, certNo.length-4);
				// let cert2 = cert1 + "****";
				// return cert2;
				// let cert1 = certNo.replace(/(\w{6})\w{2}(\w{6})\w{4}/, '$1**$2****');
				let cert1 = certNo.substring(0, 6) + '**' + certNo.substring(8, certNo.length - 4) + '****';
				return cert1;
			}else{
   
				return certNo;
			}
		},
		//手机脱敏
		setTel(tel) {
   
			if (tel && tel.length >= 11) {
   
				var pat = /(\d{3})\d*(\d{4})/
				let telFinal = tel.replace(pat, '$1****$2');
				return telFinal
			}else{
   
				return tel;
			}
		},
		//脱敏姓名 方式一，根据性别变成某女士或者某先生
		setName(str, sex) {
   
			if (str && sex) {
   
			  let str1 = str.substr(0, 1);