vue实现姓名脱敏
Vue 实现姓名脱敏的方法
在 Vue 中实现姓名脱敏可以通过多种方式，以下是几种常见的方法：
使用计算属性
通过计算属性对姓名进行处理，保留首尾字符，中间用星号替代：
computed: {
desensitizedName() {
if (this.name && this.name.length > 1) {
const firstChar = this.name.charAt(0)
const lastChar = this.name.charAt(this.name.length - 1)
return `${firstChar}${'*'.repeat(this.name.length - 2)}${lastChar}`
}
return this.name || ''
}
}自定义过滤器
创建一个全局过滤器来处理姓名脱敏：
Vue.filter('desensitize', function(value) {
if (!value) return ''
if (value.length <= 2) return value.charAt(0) + '*'
return value.charAt(0) + '*'.repeat(value.length - 2) + value.slice(-1)
})使用方式：
<p>{{ name | desensitize }}</p>使用指令方式
创建一个自定义指令来实现脱敏效果：
Vue.directive('desensitize', {
bind(el, binding) {
const value = binding.value
if (value && value.length > 1) {
const firstChar = value.charAt(0)
const lastChar = value.charAt(value.length - 1)
el.textContent = `${firstChar}${'*'.repeat(value.length - 2)}${lastChar}`
} else {
el.textContent = value || ''
}
}
})使用方式：
<p v-desensitize="name"></p>使用工具函数
创建一个单独的工具函数来处理脱敏逻辑：
// utils/desensitize.js
export function desensitizeName(name) {
if (!name) return ''
if (name.length <= 2) return name.charAt(0) + '*'
return name.charAt(0) + '*'.repeat(name.length - 2) + name.slice(-1)
}在组件中使用：
import { desensitizeName } from '@/utils/desensitize'
export default {
computed: {
desensitizedName() {
return desensitizeName(this.name)
}
}
}处理不同长度的姓名
针对不同长度的姓名可以有不同的脱敏策略：
function desensitizeName(name) {
if (!name) return ''
const length = name.length
if (length === 1) return name
if (length === 2) return `${name[0]}*`
if (length === 3) return `${name[0]}*${name[2]}`
return `${name[0]}${'*'.repeat(length - 2)}${name[length - 1]}`
}注意事项
- 对于复姓或多字姓名，可能需要特殊处理
- 考虑国际化需求，不同语言环境下的姓名格式可能不同
- 性能考虑，避免在大量数据时频繁调用脱敏函数
- 可配置性，允许自定义脱敏规则和替换字符
以上方法可以根据实际项目需求选择使用，计算属性和过滤器方式较为简单，而指令和工具函数方式则更具复用性和灵活性。
