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><inputtype="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>