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

随着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应用程序中得到广泛应用。希望本文对你有所帮助，欢迎留言交流！