前端输入框脱敏（vue）

1.组件

<script lang="tsx">
import type { PropType } from 'vue';
import { type InputProps, Input } from 'ant-design-vue';
import { EyeInvisibleOutlined, EyeTwoTone } from '@ant-design/icons-vue';
import { isNil } from 'lodash-es';
// 通用脱敏
export function desensitizeString(str: string) {
  //姓名脱敏
  let returnStr = '';
  if (str && str != undefined && str != '') {
	str = `${str}`;
	if (str.length == 2) {
	  returnStr = str.substring(0, 1) + '*';
	}
	if (str.length > 2) {
	  returnStr += str.substring(0, 1);
	  for (let i = 0; i < str.length - 2; i++) {
		returnStr += '*';
	  }

	  returnStr += str.charAt(str.length - 1);
	}
	return returnStr;
  } else {
	return returnStr;
  }
}
//电话号码脱敏
export function desensitizePhoneNumber(phoneNumber: string) {
  if (isNil(phoneNumber)) {
	return phoneNumber;
  }
  return phoneNumber.toString().replace(/(\d{3})\d{4}(\d{4})/, '$1****$2');
}

export default defineComponent({
  name: 'XDesensitizationInput',
  props: {
	inputProps: { type: Object as PropType<InputProps> },
	modelValue: {
	  type: String,
	  default: ''
	},
	type: {
	  type: String as PropType<'mobile' | 'default'>,
	  default: 'default'
	},
	//未添加逻辑
	desensitizationValue: {
	  type: String
	},
	//是否需要脱敏desensitization
	isShowDesensitization: { type: Boolean, default: true },
	isDesensitizationDefaultValue: { type: Boolean, default: true }
  },
  data() {
	const { isShowDesensitization } = this;
	let isDesensitization = true;
	if (isShowDesensitization) {
	  isDesensitization = this.isDesensitizationDefaultValue;
	} else {
	  isDesensitization = false;
	}
	return {
	  thatValue: '',
	  oldThatValue: '',
	  isDesensitization
	};
  },
  created() {
	this.setThatValue(this.modelValue);
  },
  emits: ['update:modelValue'],

  watch: {
	modelValue: {
	  handler(newValue) {
		if (this.isDesensitization) {
		  if (this.oldThatValue == newValue) {
			return;
		  }
		} else {
		  if (this.thatValue == newValue) {
			return;
		  }
		}

		this.setThatValue(newValue);
	  },
	  deep: true,
	  immediate: true
	}
  },
  computed: {
	trimmedThatValue: {
	  get() {
		return this.thatValue;
	  },
	  set(value: any) {
		this.thatValue = value.trim();
	  }
	}
  },

  methods: {
	handleEyeClick() {
	  this.isDesensitization = !this.isDesensitization;

	  if (!this.isDesensitization) {
		this.setThatValue(this.oldThatValue);
	  } else {
		this.setThatValue(this.thatValue);
	  }
	},
	handelInputChange() {
	  this.$emit('update:modelValue', this.thatValue);
	},
	setThatValue(value: string) {
	  if (this.isDesensitization) {
		this.oldThatValue = value;

		if (this.type == 'mobile') {
		  this.thatValue = desensitizePhoneNumber(this.oldThatValue);
		} else {
		  this.thatValue = desensitizeString(this.oldThatValue);
		}
	  } else {
		this.thatValue = value;
		this.oldThatValue = value;
	  }
	},

	renderEyeTwoTone() {
	  const { isDesensitization } = this.$data;
	  if (!this.isShowDesensitization) {
		return null;
	  }
	  if (!isDesensitization) {
		return <EyeTwoTone onClick={this.handleEyeClick} />;
	  } else {
		return <EyeInvisibleOutlined onClick={this.handleEyeClick} />;
	  }
	}
  },

  render() {
	const { inputProps } = this.$props;
	const { isDesensitization } = this.$data;

	return (
	  <>
		<Input
		  {...(inputProps || {})}
		  v-model:value={this.trimmedThatValue}
		  onChange={this.handelInputChange}
		  disabled={isDesensitization || inputProps?.disabled}
		>
		  {{ suffix: this.renderEyeTwoTone }}
		</Input>
	  </>
	);
  }
});
</script>

2.注册

import XDesensitizationInput from '@/components/xDesensitizationInput/index.vue';
app.component('XDesensitizationInput', XDesensitizationInput);

3.使用

 <a-form-item
    name="name"
    :rules="[{ required: isEdit ? true : false, message: '请输入姓名' }]"
    label="姓名"
  >
    <XDesensitizationInput
      :inputProps="{ maxlength: 20, placeholder: '请输入', disabled: false }"
      v-model="userInfo.name"
      :is-desensitization-default-value="true"
      :is-show-desensitization="true"
      v-if="isEdit"
    />
    <XDesensitizationInput
      :inputProps="{ placeholder: '请输入', disabled: true }"
      v-model="userInfo.name"
      :is-desensitization-default-value="true"
      :is-show-desensitization="true"
      v-else
    />
</a-form-item>