de-net-official/components/FontAmount.vue

<template>
    <span :style="{ fontSize: amount_font_size + 'px' }">
        <a-tooltip :title="amount">
            {{ getBit(amount) }}
        </a-tooltip>
    </span>
</template>

<script>
export default {
    props: {
        amount: {
            type: String,
            default: ''
        },
        width: {
            type: Number,
            default: 360
        },
        fontSize: {
            type: Number,
            default: 56
        },
    },
    data() {
        return {
            amount_font_size: 60,
        }
    },
    watch: {
        amount(newV) {
            if (newV) {
                this.setFontSize()
            }
        },
        width(newV) {
            if (newV) {
                this.setFontSize()
            }
        },
        fontSize(newV) {
            if (newV) {
                this.setFontSize()
            }
        },
    },
    mounted() {
        this.setFontSize()
    },
    methods: {
        setFontSize() {
            let _num = parseInt(this.width / this.amount.length);
            this.amount_font_size = _num < this.fontSize ? _num : this.fontSize;
        },
        getBit (value) {
            const reg = /([0-9]+\.[0-9]{4})[0-9]*/;
            if(value) {
                let str = value.toString();
                str = str.replace(reg,"$1");
                return str;
            } else {
                return value;
            }
        }
    }
}
</script>

<style lang="scss" scoped>

</style>