vue实现姓名脱敏
实现姓名脱敏的方法
在Vue中实现姓名脱敏可以通过多种方式完成，以下是几种常见的方法：
方法一：使用计算属性
通过计算属性对原始姓名进行处理，返回脱敏后的结果。例如只显示姓，名字用星号代替：
computed: {
desensitizedName() {
if (!this.name) return '';
return this.name.charAt(0) + '*'.repeat(this.name.length - 1);
}
}方法二：创建过滤器
Vue 2.x中可以创建过滤器来实现姓名脱敏：
filters: {
desensitize(name) {
if (!name) return '';
const length = name.length;
if (length <= 1) return name;
return name.substring(0, 1) + '*'.repeat(length - 1);
}
}在模板中使用：
<p>{{ name | desensitize }}</p>方法三：自定义指令
创建自定义指令来处理姓名脱敏：
Vue.directive('desensitize', {
bind(el, binding) {
const name = binding.value;
if (!name) return;
const length = name.length;
if (length <= 1) {
el.textContent = name;
} else {
el.textContent = name.substring(0, 1) + '*'.repeat(length - 1);
}
}
});在模板中使用：
<p v-desensitize="name"></p>方法四：使用工具函数
创建通用的脱敏工具函数，可以在多处复用：
// utils/desensitize.js
export function desensitizeName(name) {
if (!name) return '';
const length = name.length;
if (length <= 1) return name;
return name.substring(0, 1) + '*'.repeat(length - 1);
}在组件中使用：
import { desensitizeName } from '@/utils/desensitize';
export default {
computed: {
desensitizedName() {
return desensitizeName(this.name);
}
}
}方法五：更复杂的脱敏规则
如果需要实现更复杂的脱敏规则，例如保留前两位和后一位：
function complexDesensitize(name) {
if (!name) return '';
const length = name.length;
if (length <= 3) return name;
return (
name.substring(0, 2) +
'*'.repeat(length - 3) +
name.substring(length - 1)
);
}注意事项
- 处理边界情况：空字符串、null或undefined值
- 考虑多字节字符（如中文）和单字节字符（如英文）的处理
- 根据业务需求调整脱敏规则，如保留前几位、中间几位或后几位
- 在Vue 3.x中，过滤器已被移除，建议使用方法一、三或四的实现方式
响应式更新
无论使用哪种方法，Vue的响应式系统都会确保当原始姓名变化时，脱敏后的结果自动更新。
