打造你的专属Vue组件:超实用“手机号、邮箱、身份证号加密显示组件“实战

随着Web应用程序的发展,我们经常需要处理用户敏感信息,如手机号码和身份证号码。为了保护用户隐私,我们需要在前端对这些信息进行加密处理,以避免直接暴露在页面上。在这篇博客中,我们将介绍如何使用Vue 3.0单文件组件实现对手机号和身份证号部分数字进行加密处理的功能。

问题背景

在许多Web应用程序中,我们需要展示用户的个人信息,如手机号和身份证号。然而,直接将这些信息展示在页面上可能存在安全风险,因此我们需要对其进行加密处理,以保护用户隐私。

组件效果

在这里插入图片描述

解决方案概述

我们将通过Vue 3.0单文件组件实现对手机号和身份证号部分数字进行加密处理的功能。具体来说,我们将创建一个组件,接受用户传入的手机号或身份证号,然后根据类型进行加密处理,最终显示加密后的信息。同时,我们还将提供一个眼睛图标,允许用户在需要时切换查看加密前后的信息。

代码展示

<template><p class="show-box" :class="{ 'center': center }"><span class="text" v-show="!showText">{{ replaceText(text) }}</span><span class="text" v-show="showText">{{ text }}</span><el-icon class="eye" v-if="text" @click="showText = !showText"><Hide v-show="showText" /><View v-show="!showText" /></el-icon></p>
</template>
<script setup>
import { View, Hide } from '@element-plus/icons-vue'
const props = defineProps({type: {type: String,default: 'phone'},text: {type: String,default: ''},center: {type: Boolean,default: true},
})
const showText = ref(false)
const replaceText = (v) => {if (v) {if (props.type === 'phone') {return v?.replace(/^(\d{3})\d{4}(\d{4})$/, '$1****$2')}if (props.type === 'identificationNo') {return '***************' + v.slice(-4);}if (props.type === 'email') {return  v.replace(/^(.*@)/, function(match) {return match.replace(/./g, '*');});}} else {return '/'}
}
</script>
</script>
<style scoped lang="scss">
.center {justify-content: center;
}.show-box {width: 100%;display: flex;align-items: center;.eye {color: #006ef0;cursor: pointer;margin-left: 4px;}
}
</style>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/20296.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

CATO原理中的数学与魔术(十一)——Parity Principle及其应用二:集合的可视化...

早点关注我&#xff0c;精彩不错过&#xff01; 上篇文章中&#xff0c;我们已经进入了CATO原理魔术介绍的深水区&#xff0c;是第3个系列Parity Principle中集合性质的章节&#xff0c;聊到了关于张数和求和集合性质&#xff0c;并对性质之间的偏序关系&#xff0c;性质之间的…

USB - Linux Drivers介绍

在 Linux 中&#xff0c;USB 驱动程序子系统负责管理 USB 设备与操作系统之间的通信。下面概述了 Linux 中 USB 驱动程序子系统的组件和功能&#xff1a; USB 核心&#xff1a; USB 内核是 USB 驱动程序子系统的核心&#xff0c;它为 USB 通信提供了基本的基础设施。它负责设备…

three.js官方案例(animation / keyframes)webgl_animation_keyframes.html学习

目录 ​编辑 1 PMREMenerator 1.1 构造函数 1.2 fromScene方法 2 AnimationMixer 3 animal1.html全部 4 animal1.js全部 1 PMREMenerator 此类生成预过滤的 Mipmapped 辐射环境贴图 &#xff08;PMREM&#xff09; 来自 cubeMap 环境纹理。这允许不同的级别 的模糊&…

GPTQ 量化大模型

GPTQ 量化大模型 GPTQ 算法 GPTQ 算法由 Frantar 等人 (2023) 提出&#xff0c;它从 OBQ 方法中汲取灵感&#xff0c;但进行了重大改进&#xff0c;可以将其扩展到&#xff08;非常&#xff09;大型的语言模型。 步骤 1&#xff1a;任意顺序量化 OBQ 方法选择权重按特定顺序…

桶形畸变和枕形畸变

桶形畸变和枕形畸变是两种常见的光学畸变现象&#xff0c;主要发生在使用广角镜头或远摄镜头拍摄时。这些畸变是因为镜头的光学特性不能完美地将光线汇聚到一个共同的焦点上&#xff0c;导致图像的不同部分在形状上发生扭曲。下面分别对这两种畸变进行详细描述&#xff1a; 桶…

快手万合通脚本,磁力广告挂机变现项目,号称单窗口日收益10+(教程+软件)

在这个项目中&#xff0c;我们采用一种简便的方法来获取额外收入。比如&#xff1a; 1. 主账号准备&#xff1a;首先&#xff0c;确保拥有一个已开通磁力万合功能的快手主账号。账号需拥有至少一万粉丝&#xff0c;以确保广告收益。 2. 创建快手小号&#xff1a;无需粉丝基础…

每日一题《leetcode--LCR 021.删除链表的倒数第N个结点》

https://leetcode.cn/problems/SLwz0R/ 这道题我们可以设一个哨兵位&#xff0c;然后把要遍历链表的结点指向该哨兵位。最后用for循环将指针指向要删除结点的前一个。 struct ListNode* removeNthFromEnd(struct ListNode* head, int n){struct ListNode* dummy malloc(sizeof…

什么是成就动机?如何判断人的成就动机?

什么是成就动机&#xff1f; 成就动机指的是一个人追求成就的心理&#xff0c;对成就&#xff08;成绩&#xff0c;目标&#xff09;的渴望心理&#xff0c;成就动机促进我们实现个人价值&#xff0c;完成工作当中的任务&#xff0c;始终被成就动机驱使的人往往懂得吃苦耐劳&a…

通过强化学习策略进行特征选择

特征选择是构建机器学习模型过程中的决定性步骤。为模型和我们想要完成的任务选择好的特征&#xff0c;可以提高性能。 如果我们处理的是高维数据集&#xff0c;那么选择特征就显得尤为重要。它使模型能够更快更好地学习。我们的想法是找到最优数量的特征和最有意义的特征。 …

Spring概念学习

概述 在此记录spring的学习内容。 概念 从前&#xff0c;在Java的大森林中&#xff0c;有一片神奇的土地&#xff0c;名叫"Spring"。这片土地上生长着各种美丽而强大的植物&#xff0c;它们分别象征着Spring框架中的各种功能和特性。 在这片土地上&#xff0c;有…

wampserver安装与汉化

wampserver安装与汉化 文章目录 wampserver安装与汉化一、安装二、汉化1.升级软件并安装补丁 介绍&#xff1a; WampServer是一款由法国人开发的Apache Web服务器、PHP解释器以及MySQL数据库的整合软件包。免去了开发人员将时间花费在繁琐的配置环境过程&#xff0c;从而腾出更…

【Linux-GDB 调试】

Linux-GDB 调试 ■ scp 命令■ ubuntu 下通过 ssh 命令登录开发板■■■■■■ ■ scp 命令 scp 命令向其他主机发送文件。 ubuntu中向开发板发送文件 scp seriaApp sshd192.168.1.251 将 seriaApp 文件发送到开发板中&#xff0c;发送完成以后就会在开发板的根目录下看到…

每日一题——Python实现PAT甲级1042 Shuffling Machine(举一反三+思想解读+逐步优化)

一个认为一切根源都是“自己不够强”的INTJ 个人主页&#xff1a;用哲学编程-CSDN博客专栏&#xff1a;每日一题——举一反三Python编程学习Python内置函数 Python-3.12.0文档解读 目录 我的写法 功能分析 时间复杂度 空间复杂度 总结 代码点评 我要更强 优化方向 …

stm32F4的时钟树

时钟其实就是单片机的心脏。首先我们的高速外部时钟&#xff08;HES&#xff09;&#xff0c;看名字就可知道外部高速时钟是由外部所提供的其是高速的&#xff0c;其具体可以是有源晶振或者无源晶振所提供的时钟。而在时钟树图中我们从OSC_IN、OSC_OUT进入&#xff0c;然后经过…

Vue:现代前端开发的首选框架-【高级特性篇】

引言 在本篇博文中&#xff0c;我们将深入探索Vue.js框架的高级特性&#xff0c;包括路由管理、状态管理、表单处理、动画与过渡&#xff0c;以及服务端渲染&#xff08;SSR&#xff09;。这些进阶实践将帮助你提升Vue应用的架构和性能。 路由管理 Vue Router 介绍 Vue Rou…

【项目管理知识】项目质量管理措施

1、持续改进&#xff08;PDCA&#xff09; 戴明循环或称PDCA循环、PDSA循环。戴明循环的研究起源于20世纪20年代&#xff0c;先是有着“统计质量控制之父”之称的著名的统计学家沃特阿曼德休哈特&#xff08;Walter A. Shewhart&#xff09;在当时引入了“计划-执行-检查&…

低代码平台:教育机构数字化转型的技术新引擎

在数字化浪潮汹涌而来的今天&#xff0c;教育行业正迎来前所未有的变革。随着技术的不断进步和教育理念的更新&#xff0c;越来越多的教育机构开始意识到数字化转型的重要性。而在这场转型的浪潮中&#xff0c;低代码平台以其独特的优势&#xff0c;正成为教育机构实现数字化转…

7-13 字节解析(parse_byte)--PTA实验C++

一、题目描述 字节有几位都没个标准&#xff0c;古代程序员过的什么日子啊&#xff1f;还好现在字节统一成8位了。 鉴于我对C已有相当牢固的基础&#xff0c;可以探索底层开发了&#xff0c;先做个解析十六进制字节数据的功能吧。 输入规格 每项待读入的字节数据由两个非空白…

virtualbox识别windows上usb设备

当你插入 USB 时&#xff0c;你的宿主操作系统可以轻松访问它并使用其中的文件。如果需要VirtualBox 的虚拟机也能访问物理机的 USB设备&#xff0c;需要安装安装扩展包管理器。 第一步&#xff1a; 要安装 VirtualBox 扩展包&#xff0c;只需访问 VirtualBox 官方下载页面&a…

2024华为OD机试真题-出租车计费-C++(C卷D卷)

题目描述: 程序员小明打了一辆出租车去上班。出于职业敏感,他注意到这辆出租车的计费表有点问题,总是偏大。 出租车司机解释说他不喜欢数字4,所以改装了计费表,任何数字位置遇到数字4就直接跳过,其余功能都正常。 比如: 23再多一块钱就变为25;39再多一块钱变为50;399再…