银行卡卡号展示隐藏****

最新推荐文章于 2025-06-30 20:53:33 发布

38kcok9w2vHanx_

最新推荐文章于 2025-06-30 20:53:33 发布

阅读量179

点赞数 1

CC 4.0 BY-SA版权

文章标签： javascript 前端 css

本文链接：https://blog.csdn.net/Hanx_/article/details/145211010

方法写法

visibilityCardStar(val,starNum,beginNum,endNum){
    // 卡号中间用****拼接
    // val: 数值, starNum: 星星的个数 默认4, beginNum: 开头保留个数 默认0, endNum: 末尾保留个数 默认4
    val = val.toString()
    let _len = val.length
    return val.substring(0,beginNum||0)+'*'.repeat(starNum||4) + val.substring(_len - (endNum||4), _len)
}

整体写法

<template>
    <div class="chamber_com">
        <div class="chamber_item">
            <div>
                <img :src="'https://img0.baidu.com/it/u=1278932254,2658064360&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500'" alt="" />
                <div class=bigtitle>
                    <div class="">招商银行</div>
                </div>
            </div>
            <div style="justify-content: flex-end;">{{ifshow?cardCode:cardCodeHide}}<van-icon :name="ifshow?'eye-o':'closed-eye'" @click="showClick"/></div>
        </div>
    </div>
</template>
<script>
export default {
    name: "",
    components:{},
    props: {},
    data() {
        return {
            ifshow: false,
            cardCode: 12345878744547,
            cardCodeHide: ''
        };
    },
    created() {
        this.cardCodeHide = this.visibilityCardStar(this.cardCode);
    },
    methods: {
        showClick(){
            this.ifshow = !this.ifshow
            if(this.ifshow){

            }else{
                this.cardCodeHide = this.visibilityCardStar(this.cardCode);
            }
        },
        visibilityCardStar(val,starNum,beginNum,endNum){
            // 卡号中间用****拼接
            // val: 数值, starNum: 星星的个数 默认4, beginNum: 开头保留个数 默认0, endNum: 末尾保留个数 默认4
            val = val.toString()
            let _len = val.length
            return val.substring(0,beginNum||0)+'*'.repeat(starNum||4) + val.substring(_len - (endNum||4), _len)
        }
    },
    mounted() {},
};
</script>
<style lang="scss">
@media only screen and (max-width: 1000px) {
    .chamber_item {
        display: block;
        width: 90%;
        margin: (16rem /50) auto 0;
        padding: (8rem /50) (16rem /50);
        background-color: #ff4949;
        border-radius: (4rem /50);
        color: #fff;
        div {
            display: flex;
            align-items: center;
            font-size: (16rem /50);
        }
        img {
            margin-right: (8rem /50);
            width: (60rem /50);
            height: (60rem /50);
            flex: none;
            border-radius: 50%;
        }
    }
}
</style>