更新记录

1.0.0（2023-06-27） 下载此版本

组件初始化

平台兼容性

uni-app

其他

cc-format-card

使用方法

<!-- cardNo:银行卡号 isStar: 是否转星号 -->
<cc-format-card :cardNo="4304231999012014" :isStar="false"></cc-format-card>

HTML代码实现部分

<template>
    <view class="content">

        <view style="margin: 30px 20px;">
            {{"不带星号银行卡号: "}}
            <!-- cardNo:银行卡号 isStar: 是否转星号 -->
            <cc-format-card :cardNo="4304231999012014" :isStar="false"></cc-format-card>

        </view>

        <view style="margin: 10px 20px;">
            {{"带星号银行卡号: "}}
            <!-- cardNo:银行卡号 isStar: 是否转星号 -->
            <cc-format-card :cardNo="4304231999012014" :isStar="true"></cc-format-card>

        </view>

    </view>
</template>

<script>
    export default {

        data() {
            return {

            }
        },
        methods: {

        }
    }
</script>

<style>
    .content {
        display: flex;
        flex-direction: column;
        background-color: white;
        height: 100vh;

    }
</style>

组件实现代码

<template>
    <text>{{value}}</text>
</template>

<script>
    export default {
        props: {
            cardNo: {
                type: [String, Number],
                default: ""
            },

            isStar: Boolean
        },
        computed: {
            value() {
                let cardNo = this.cardNo + "";
                if (this.isStar) {
                    return `${cardNo.slice(0,4)}******${cardNo.slice(cardNo.length-4,cardNo.length)}`
                } else {
                    return cardNo.replace(/\s/g, '').replace(/[^\d]/g, '').replace(/(\d{4})(?=\d)/g, '$1 ');
                }
            }
        },
    }
</script>

<style>
</style>