vue实现姓名脱敏
Vue 实现姓名脱敏的方法
在 Vue 中实现姓名脱敏通常需要处理字符串的显示逻辑，以下是几种常见的方法：
方法一：使用计算属性脱敏
<template>
<div>{{ maskedName }}</div>
</template>
<script>
export default {
data() {
return {
name: '张三丰'
}
},
computed: {
maskedName() {
if (this.name.length <= 1) return '*';
return this.name.charAt(0) + '*'.repeat(this.name.length - 1);
}
}
}
</script>方法二：自定义过滤器脱敏
<template>
<div>{{ name | maskName }}</div>
</template>
<script>
export default {
data() {
return {
name: '李四'
}
},
filters: {
maskName(value) {
if (!value) return '';
return value.substring(0, 1) + '*'.repeat(value.length > 1 ? value.length - 1 : 1);
}
}
}
</script>方法三：使用指令实现脱敏
<template>
<div v-mask-name="name"></div>
</template>
<script>
export default {
data() {
return {
name: '王五'
}
},
directives: {
'mask-name': {
inserted(el, binding) {
const name = binding.value;
el.textContent = name.charAt(0) + '*'.repeat(name.length - 1);
}
}
}
}
</script>方法四：使用工具函数
// utils/mask.js
export function maskName(name) {
if (!name) return '';
return name[0] + '*'.repeat(Math.max(0, name.length - 1));
}
// 在组件中使用
<template>
<div>{{ maskedName }}</div>
</template>
<script>
import { maskName } from '@/utils/mask';
export default {
data() {
return {
name: '赵六'
}
},
computed: {
maskedName() {
return maskName(this.name);
}
}
}
</script>注意事项
- 对于单字姓名，通常显示为单个字符加星号（如"张*"）
- 考虑国际化场景，某些语言的姓名顺序可能需要特殊处理
- 空值或非法输入需要做防御性处理
- 移动端显示可能需要考虑不同屏幕尺寸下的显示效果
以上方法可以根据实际项目需求选择使用，计算属性方式最为常用且简单，工具函数方式更适合多组件复用场景。
