实战分享!基于 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代码中有个背景炫彩图片,如果需要图片的可以告诉我哦,非常不错的。

  • 69
    点赞
  • 24
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 13
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 13
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

经海路大白狗

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值