组件库标题Desensitization 脱敏
基本使用
默认******字符
默认******字符
基本使用
<template>
<www-desensitization>默认保留前后2个字符</www-desensitization>
<www-desensitization value="默认保留前后2个字符" />
</template>
<script lang="ts" setup>
</script>
<style scoped lang="scss">
</style>
<template>
<www-desensitization>默认保留前后2个字符</www-desensitization>
<www-desensitization value="默认保留前后2个字符" />
</template>
<script lang="ts" setup>
</script>
<style scoped lang="scss">
</style>
带有label字段
张三******张三
带有label字段
<template>
<www-desensitization label="姓名：">张三</www-desensitization>
</template>
<script lang="ts" setup>
</script>
<style scoped lang="scss">
</style>
<template>
<www-desensitization label="姓名：">张三</www-desensitization>
</template>
<script lang="ts" setup>
</script>
<style scoped lang="scss">
</style>
预设类型
| 字段 | 说明 | 类型 | 描述 |
|---|---|---|---|
| idCard | 身份证号 | string | 前四后二脱敏 |
| phone | 手机号 | string | 前三后二脱敏 |
| number | 编号 | string | 前二后二脱敏 |
| password | 密码 | string | 全脱敏 |
132******22
1301******333
10******40
******
预设类型
<template>
<www-desensitization type="phone" label="手机号：">13260462222</www-desensitization>
<www-desensitization type="idCard" label="身份证号：">130121111111113333</www-desensitization>
<www-desensitization type="number" label="编码：">1001494100983152640</www-desensitization>
<www-desensitization type="password" label="密码：">1001494100983152640</www-desensitization>
</template>
<script lang="ts" setup>
</script>
<style scoped lang="scss">
</style>
<template>
<www-desensitization type="phone" label="手机号：">13260462222</www-desensitization>
<www-desensitization type="idCard" label="身份证号：">130121111111113333</www-desensitization>
<www-desensitization type="number" label="编码：">1001494100983152640</www-desensitization>
<www-desensitization type="password" label="密码：">1001494100983152640</www-desensitization>
</template>
<script lang="ts" setup>
</script>
<style scoped lang="scss">
</style>
12******33
预设类型
<template>
<www-desensitization>
<div><div>1233</div><div>123</div></div>
</www-desensitization>
</template>
<script lang="ts" setup>
</script>
<style scoped lang="scss">
</style>
<template>
<www-desensitization>
<div><div>1233</div><div>123</div></div>
</www-desensitization>
</template>
<script lang="ts" setup>
</script>
<style scoped lang="scss">
</style>
自定义显示位数
******
自定义显示位数
TODO：未实现
<template>
<www-desensitization
type="1"
label="手机号："
value="13812345678"
beforLen="2"
afterLen="-1"
/>
</template>
<script lang="ts" setup>
</script>
<style scoped lang="scss">
</style>
<template>
<www-desensitization
type="1"
label="手机号："
value="13812345678"
beforLen="2"
afterLen="-1"
/>
</template>
<script lang="ts" setup>
</script>
<style scoped lang="scss">
</style>
组件 API
Attributes 属性
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| label | label字段 | string | string | null |
| type | 类型 | string | idCard phone number password | password |
| length | 长度 | number | number | 6 |
| iconSize | 字体 | number | number | 16(rpx) |
| dot | 占位 | string | string | '*' |
| value | 正文 | string | string | 空 |
| beforLen | 显示字符个数 | number | number | 0 |
| afterLen | 显示字符个数 | number | number | 0 |
Methods 方法
| 方法名 | 说明 | 参数 | 返回值 |
|---|---|---|---|
Events 事件
| 事件名 | 说明 | 参数 | 返回值 |
|---|---|---|---|
Slots 插槽
| 插槽名 | 说明 | 参数 |
|---|---|---|