实战分享！基于 Vue3 + CSS3 + js-tool-big-box 打造超炫的字符串中间加星号效果

在前端开发开发中，一些关键字符串，为了隐藏用户的真实信息，我们往往会将中间的一部分做加星号显示，然后星号前后都会保留一部分内容。

为了能够更加愉悦的学习js-tool-big-box这个工具库里的功能呢，我们基于vue3项目和css3做了一个非常炫酷的效果出来，希望大家读完后，学到了使用方法，还可以很开心的掌握一种炫彩文字效果。

目录

1 Vue3模板设置

2  reactive依赖准备

3 js-tool-big-box字符串中间加星的方法学习 

3.2 安装引入npm工具库

3.2 前3后4的加星效果 

3.3 前2后3中间4个星号 

3.4 前3后4中间4个表情符号呢 

4 css3源码 

5  maskString方法总结

6 最后 

---

1 Vue3模板设置

模板中需要设置绑定数据依赖的DOM模板元素，同时添加数据依赖，用于显示，这里我们做的不是太复杂，主要还是为了学习工具库的方法，以及看CSS3效果，代码如下：

<template>
  <div class="home">
    <p class="title">js-tool-big-box</p>
    <p class="title title2">功能更丰富的前端JS库</p>
    <div class="result-box">
      {{ luckObj.phone }}
    </div>
  </div>
</template>

2  reactive依赖准备

Vue3与Vue2不同，大家需要慢慢习惯这个reactive的使用，根据上面的模板设置呢，我们添加了luckObj对象以及phone的属性，用于绑定数据

<script setup>
import { reactive } from "vue";

const luckObj = reactive({
  phone: '',
})

</script>

3 js-tool-big-box字符串中间加星的方法学习 

3.2 安装引入npm工具库

可以使用npm安装命令来安装

npm i js-tool-big-box

这里我们对外提供了stringBox做为宿主对象，代码如下：

import { stringBox } from 'js-tool-big-box';

3.2 前3后4的加星效果 

在js-tool-big-box工具库中，通过stringBox对象，提供了maskString方法，可以用来给字符串加星显示，不过非常灵活，不限于只是加星号。例如我们做一个前3后4中间3位星号效果：

<script setup>
    import { reactive } from "vue";
    import { stringBox } from 'js-tool-big-box';

    const myPhone = '13888812312';
    const luckObj = reactive({
      phone: '',
    })
    luckObj.phone = stringBox.maskString(myPhone, 3, 4, '*', 3);
</script>

 显示效果如下：

3.3 前2后3中间4个星号 

当然，这个方法非常灵活，我们可以控制前后的明文显示个数，还可以中间符号的个数，比如要展示一个前2后3，中间4个星号的效果：

<script setup>
import { reactive } from "vue";
import { stringBox } from 'js-tool-big-box';

const myPhone = '13888812312';
const luckObj = reactive({
  phone: '',
})
luckObj.phone = stringBox.maskString(myPhone, 2, 3, '*', 4);
</script>

3.4 前3后4中间4个表情符号呢 

比如来个更加个性的需求，希望前面3个明文显示，后面4个明文显示，中间也不是星号了，而是很特别的，我加上表情符号，那会是多么炫酷啊，来看一下实现代码：

<script setup>
import { reactive } from "vue";
import { stringBox } from 'js-tool-big-box';

const myPhone = '13888812312';
const luckObj = reactive({
  phone: '',
})
luckObj.phone = stringBox.maskString(myPhone, 3, 4, '☺', 4);
</script>

看一下实现效果：

4 css3源码 

你一定非常想知道这个炫彩的CSS3源码，是如何实现的吧，我们一起来看一下，如果你喜欢，可以直接保存起来，或者拿到自己的项目中去，让自己的项目也更加炫彩

<style lang="scss" scoped>
.home{
    width: 100%;
    height: 100vh;
    background: #10056e;
    .title {
      padding-top: 80px;
      font-size: 40px;
      font-family: '隶书';
      font-weight: bold;
      color: red;
      text-align: center;
    }
    .title2 {
      padding-top: 20px;
    }
    
    .result-box {
      margin-top: 20px;
      text-align: center;
      background: url(../../assets/xuancai.gif);
      background-size: cover;
      background-position: center;
      -webkit-background-clip: text;
      color: transparent;
      height: 150px;
      box-sizing: border-box;
      font-size: 128px;
      font-weight: bolder;
      text-align: center;
      line-height: 150px;
      flex-shrink: 0;
    }
}

</style>

5  maskString方法总结

我们刚才说，maskString的宿主对象是stringBox，那么这个maskString的使用方法是什么样子呢，我们一起来看一下：

方法名	返回值	入参
maskString	如果第2个入参和第3个入参加一起，大于等于字符串的长度，那么将返回第一个入参，也就是原始字符串； 正常情况下，返回示例：xxx***xxx	第一个入参必填，表示原始字符串； 第二个入参必填，表示前面明文展示的字符串长度，是个数值型； 第三个入参必填，表示后面明文展示的字符串长度，是个数值型； 第四个入参必填，表示中间的符号，是个字符串，比如星号啦，点号啦； 第五个入参必填，表示中间的符号的个数，是个数值型

6 最后 

这一小节就到这里了，上面的CSS3代码中有个背景炫彩图片，如果需要图片的可以告诉我哦，非常不错的。