de-net/src/view/components/font-zoom.vue

<template>
    <span class="zoom-text" :style="{ fontSize: amount_font_size + 'px' }">{{ amount }}</span>
</template>
<script setup>
import { ref, defineProps, onMounted, watch } from 'vue'
import { getBit } from "@/uilts/help";

let props = defineProps({
    amount: {
        type: String,
        default: ''
    },
    width: {
        type: Number,
        default: 360
    },
    fontSize: {
        type: Number,
        default: 56
    },

})

let amount_font_size = ref(props.fontSize);
watch(props, () => {
    setFontSize()
})
function setFontSize(){
    let amount = getBit(props.amount);
    let _num = parseInt(props.width / amount.length);
    amount_font_size.value = _num < props.fontSize ? _num : props.fontSize;
}

onMounted(() => {
    setFontSize()
})

</script>
<style lang="scss" scoped>
.zoom-text {
    word-break: break-all;
    font-weight: 800;
    font-size: 22px;
    color: #FFFFFF;
}
</style>