MTP2.0_WEB/src/common/components/font-adaption.vue

<template>
    <span :style="{ color, fontSize }">{{ font }}</span>
</template>

<script lang="ts">
    import { defineComponent, computed } from 'vue';
    export default defineComponent({
        name: 'font-adaption',
        props: {
            font: {
                type: String,
                defaule: '',
            },
            color: {
                type: String,
                defaule: '#2D6783',
            },
            section: {
                type: Array,
                defaule: [[0, , '12px']], // [[区间开始长度,区间结束长度,字体大小]]
            },
        },
        setup(props) {
            const fontSize = computed(() => {
                return (props.section?.length && ((props.section as [[number, number | undefined, string]])?.find((ary) => (props.font as String).toString().length >= ary[0] && (ary[1] === undefined || (props.font as String).toString().length <= ary[1])) as [number, number | undefined, string])[2]) || '12px';
            });
            return {
                fontSize,
            };
        },
    });
</script>

<style lang="scss" scoped></style>