vue3【实战】可编辑的脱敏信息
<script lang="ts" setup>
import { ref, onMounted } from "vue";
let real_name = ref("朝阳");
let name = ref("");
onMounted(() => {
name.value = des_name(real_name.value);
});
function focusing() {
name.value = real_name.value;
// 若不想对外展示脱敏信息,则清空
// name.value = "";
}
function nameChange(e: Event) {
real_name.value = (e.target as HTMLInputElement).value;
}
function loseFocus() {
name.value = des_name(real_name.value);
}
function submit() {
alert(real_name.value);
}
</script>
<template>
<div>
<input
type="text"
v-model="name"
@focus="focusing"
@blur="loseFocus"
@change="nameChange"
/>
<button @click="submit">提交</button>
</div>
</template>
<script lang="ts">
/**
* 脱敏处理字符串中的名字
*
* @param content 待脱敏的字符串
* @param fillChar 用于脱敏的填充字符,默认为 "*"
* @returns 脱敏后的字符串
*/
function des_name(content: string, fillChar = "*") {
if (!content) {
return "";
}
let index = 1;
let result = "";
for (let char of content) {
if (index === 1 || (index === content.length && index !== 2)) {
result += char;
} else {
result += fillChar;
}
index++;
}
return result;
}
</script>
原文地址:https://blog.csdn.net/weixin_41192489/article/details/140688520
免责声明:本站文章内容转载自网络资源,如本站内容侵犯了原著者的合法权益,可联系本站删除。更多内容请关注自学内容网(zxcms.com)!