de-net-official/components/FontAmount.vue

<template>
    <span :style="{ fontSize: amount_font_size + 'px' }">{{ amount }}</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;
        }
    }
}
</script>

<style lang="scss" scoped>

</style>