Vue 3.0单文件组件实现手机号和身份证号加密显示功能

news/2024/5/25 3:06:45

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

问题背景

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

解决方案概述

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

技术实现

模板部分

我们的模板部分主要包含一个包裹加密信息的<p>标签,其中包含两个<span>标签用于显示加密前后的信息,以及一个眼睛图标,用于切换显示加密前后的信息。

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

脚本部分

在脚本部分,我们使用Vue 3.0提供的<script setup>语法,导入所需的图标组件和依赖项。然后定义组件的props和响应式数据,并实现一个方法用于替换加密文本。最后,我们将眼睛图标的点击事件绑定到切换显示加密前后信息的功能上。

<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);}} else {return '/'}
}
</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>

总结

通过本篇博客的介绍,我们学习了如何使用Vue 3.0单文件组件实现对手机号和身份证号部分数字进行加密处理的功能。这种方法可以有效保护用户的隐私信息,在Web应用程序中得到广泛应用。希望本文对你有所帮助,欢迎留言交流!


http://www.mrgr.cn/p/04508160

相关文章

实现iOS App代码混淆

简介 在开发iOS应用程序时,保护代码安全是至关重要的。代码混淆是一种常用的技术,可以增加逆向工程的难度,防止他人对代码的篡改和盗用。本文将介绍如何实现iOS App代码混淆的步骤和操作方法。 整体流程 下面是实现iOS App代码混淆的整体流程:接下来,我们将逐步介绍每个步…

13、BGP与BFD联动

BGP与BFD联动BGP协议通过周期性的向对等体发送报文来实现邻居检测机制。但这种机制检测到故障所需时间比较长,超过1秒钟。当数据的传输速度达到Gbit/s级别时,这种机制的检测时间将导致大量数据丢失,无法满足网络高可靠性的需求。BGP与BFD(Bidirectional Forwarding Detecti…

git 删除本地分支 删除远程仓库中的分支

语法&#xff1a; 删除本地分支 git branch -D <分支名>删除远程分支 git push <remote名称> <分支名> --delete 示例&#xff1a; 删除本地分支 git branch -D feature/test_listview删除远程分支 git push origin feature/test_listview --delete 两个…

AI自动生成绘画软件推荐,这3款,一键生成美照

AI自动生成绘画软件在近年来取得了显著的进步&#xff0c;它们巧妙地融合了人工智能技术与艺术创作&#xff0c;为我们带来了前所未有的体验。这些软件不仅拥有强大的生成能力&#xff0c;还能根据我们的输入或指示&#xff0c;创作出充满创意和艺术性的绘画作品。它们的出现不…

stable diffusion 艺术字生成 山水画

模型:locsChinaLandscapes_locsChinaLandscapes https://civitai.com/models/25086/locs-china-landscapes-v2?modelVersionId=30536 controlnet 插件: control_v11f1e_sd15_tile https://huggingface.co/lllyasviel/ControlNet-v1-1/tree/main控制强度决定控制网络的文字清…

IDEA @Autowired不显示红线

IDEA 中,@Autowired 显示红线一般情况是注入 Mapper 或者 Dao 时出现的,如下图:这个报错是因为 Mapper 或者 Dao 上没有加 @Repository 或者 @Mapper,@Autowired 注入时就判断为这不是一个 Bean。 不建议通过加上面两个注解的方式解决这个问题,因为没有必要。SpringBoot 启…

使用冒泡排序模拟实现qsort函数

目录 冒泡排序qsort函数的使用1.使用qsort函数排序整型数据2.使用qsort函数排序结构数据 冒泡排序模拟实现qsort函数今日题目1. 字符串旋转结果2.杨氏矩阵3.猜凶手4.杨辉三角 总结 冒泡排序 冒泡排序的核心思想是:两两相邻的元素进行比较 代码如下: //⽅法1 void bubble_so…

openGauss AI4DB-数据库自治运维

AI4DB: 数据库自治运维 如上文所述,AI4DB主要用于对数据库进行自治运维和管理,从而帮助数据库运维人员减少运维工作量。在实现上,DBMind的AI4DB框架具有监控和服务化的性质,同时也提供即时AI工具包,提供开箱即用的AI运维功能(如索引推荐)。AI4DB的监控平台以开源的Prome…

python怎么输出小数

先将整型转换成float型&#xff0c;再进行计算&#xff0c;结果就有小数了。 >>> a 10 >>> b 4 >>> c a/b >>> a,b,c (10, 4, 2) >>> a float(a) >>> d a/b >>> a,b,d (10.0, 4, 2.5) >>> 注意&…

01、BGP基本概念

BGP的基本概念本章节介绍了BGP的基本概念,理解这些基本概念后,您可以更好的理解BGP的其它功能。自治系统AS(Autonomous System) AS是指在一个实体管辖下的拥有相同选路策略的IP网络。BGP网络中的每个AS都被分配一个唯一的AS号,用于区分不同的AS。AS号分为2字节AS号和4字节…

Windows Edge 兼容性问题修复:提升用户体验的关键步骤

&#x1f31f; 前言 欢迎来到我的技术小宇宙&#xff01;&#x1f30c; 这里不仅是我记录技术点滴的后花园&#xff0c;也是我分享学习心得和项目经验的乐园。&#x1f4da; 无论你是技术小白还是资深大牛&#xff0c;这里总有一些内容能触动你的好奇心。&#x1f50d; &#x…

MySQL优化:索引

1、谈一下你对于mysql索引的理解?(为什么mysql要选择B+树来存储索引) ​ mysql的索引选择B+树作为数据结构来进行存储,使用B+树的本质原因在于可以减少IO次数,提高查询的效率,简单点来说就是可以保证在树的高度不变的情况下可以存储更多的数据: ​ 1、在MYSQL的数据库…

14、IS-IS TE

IS-IS TE传统的路由器选择最短的路径作为主路由,不考虑带宽等因素。这样,即使某条路径发生拥塞,也不会将流量切换到其他的路径上。MPLS TE(Multiprotocol Label Routering Traffic Engineering)解决网络拥塞问题有自己的优势。通过MPLS TE,用户可以精确地控制流量流经的路…

LeetCode 59.螺旋矩阵II

LeetCode 59.螺旋矩阵II 1、题目 力扣题目链接&#xff1a;59. 螺旋矩阵 II - 力扣&#xff08;LeetCode&#xff09; 给你一个正整数 n &#xff0c;生成一个包含 1 到 n2 所有元素&#xff0c;且元素按顺时针顺序螺旋排列的 n x n 正方形矩阵 matrix 。 示例 1&#xff1…

实习僧网站的实习岗位信息分析

目录 背景描述数据说明数据集来源问题描述分析目标以及导入模块1. 数据导入2. 数据基本信息和基本处理3. 数据处理3.1 新建data_clean数据框3.2 数值型数据处理3.2.1 “auth_capital”&#xff08;注册资本&#xff09;3.2.2 “day_per_week”&#xff08;每周工作天数&#xf…

$Oriental\,Leaves$

$Shuang$\(I\,\,enjoy\,\,drinking\,\,Oriental\,\,leaves\,\,very\,\,much,\,\,and\,\,OP\,\,is\,\,going\,\,to\,\,bring\,\,me\,\,one\,\,tonight.\)$\Huge{爽}$

04、IS-IS路由渗透

IS-IS路由渗透通常情况下,Level-1区域内的路由通过Level-1路由器进行管理。所有的Level-2和Level-1-2路由器构成一个连续的骨干区域。Level-1区域必须且只能与骨干区域相连,不同的Level-1区域之间并不相连。 Level-1-2路由器将学习到的Level-1路由信息装进Level-2 LSP,再泛洪…

05、IS-IS Overload

IS-IS OverloadIS-IS Overload使用IS-IS过载标记位来标识过载状态。IS-IS过载标志位是指IS-IS LSP报文中的OL字段。对设备设置过载标志位后,其它设备在进行SPF计算时不会使用这台设备做转发,只计算该设备上的直连路由。 图1 IS-IS过载示意图 如图1所示,RouterA到10.1.1.0/24…

【面试题】s += 1 和 s = s + 1的区别

文章目录 1.问题2.发现过程3.解析 1.问题 以下两个程序真的完全等同吗&#xff1f; short s 0; s 1; short s 0; s s 1; 2.发现过程 初看s 1 和 s s 1好像是等价的&#xff0c;没有什么区别。很长一段时间内我也是这么觉得&#xff0c;因为当时学习c语言的时候教科书…