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）！