vue3+ts+vite的项目实现带星号的人名？

Question

vue3+ts+vite的项目实现带星号的人名？

摇摆123

3513120

发布于
12 月 13 日广东

根据上图实现带星号的人名，vue3+ts+vite的项目

我想要的是封装一个方法，在某个组件都能用到这个方法，大佬们这个怎么实现呢

前端 typescript css3 vite

阅读 488

AI BotBETA

在 Vue 3 + TypeScript + Vite 项目中，你可以通过创建一个工具函数并在组件中调用它来实现带星号的人名。以下是一个简单的实现方法：

1. **创建一个工具函数**：
   你可以在项目的 `src` 目录下创建一个新的文件夹，例如 `utils`，并在其中创建一个 `maskName.ts` 文件。在这个文件中，你可以定义一个函数来添加星号到人名中。

// src/utils/maskName.ts

export function maskName(name: string, revealLength: number = 1): string {

 if (name.length <= revealLength) {
   return name.split('').map(() => '*').join('');
 }
 const maskedName = name.split('').map(() => '*').join('');
 return name.slice(0, revealLength) + maskedName.slice(revealLength, -name.length + revealLength);

}


这个函数接受两个参数：`name`（要处理的人名）和 `revealLength`（保留的字符数，默认为1）。它将人名中除了前几个字符外的其余部分替换为星号。

2. **在组件中使用该函数**：
然后，你可以在你的 Vue 组件中导入并使用这个函数。

<template>

 <div>
   <p>Original Name: {{ originalName }}</p>
   <p>Masked Name: {{ maskedName }}</p>
 </div>

</template>

export default defineComponent({

 name: 'ExampleComponent',
 data() {
   return {
     originalName: 'John Doe',
   };
 },
 computed: {
   maskedName(): string {
     return maskName(this.originalName, 1); // 这里你可以根据需要调整保留的字符数
   },
 },

});
</script>


在这个例子中，`ExampleComponent` 组件使用 `maskName` 函数来生成带星号的名字，并将其显示在页面上。

3. **确保项目结构正确**：
确保你的项目结构类似于以下形式，以便 TypeScript 和 Vite 能够正确解析模块路径。

your-project/
├── node_modules/
├── public/
├── src/
│ ├── assets/
│ ├── components/
│ │ └── ExampleComponent.vue
│ ├── utils/
│ │ └── maskName.ts
│ ├── App.vue
│ ├── main.ts
├── vite.config.ts
├── tsconfig.json
├── package.json
└── ...


通过这种方式，你可以在一个 Vue 3 + TypeScript + Vite 项目中封装一个工具函数，并在任何组件中重复使用它来实现带星号的人名。

1 个回答

得票最新

Siesta

925

发布于
12 月 25 日浙江

我这边是后端直接返回来前端做的话应该是正则去处理数据吧

撰写回答

你尚未登录，登录后可以

和开发者交流问题的细节
关注并接收问题和回答的更新提醒
参与内容的编辑和改进，让解决方法与时俱进

推荐问题

Microsoft

子站问答

访问

vue3+ts+vite的项目实现带星号的人名？

你尚未登录，登录后可以

扁平化数组转换成树形?

js 如何将Key属性相同的放在同一个数组？

省市区街道数据在哪里可以下载？

纯css怎么搞出这么个圆环渐变效果呢？再进一步可以搞成圆边是虚线么？

在Electron中，我们想要创建特定的BrowserWindow，想要使用react组件作为BrowserWindow的内容，请问如何实现呢？

怎么识别手机号的主人变更了？

Vue项目一个报错无法找到原因?

Microsoft