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

<!-- 组件确定最大宽度时 可等比缩放组件 -->
<template>
    <span class="zoom-wrap" ref="zoomDom" :style="{ zoom: zoom, 'font-size': props.fontSize + 'px' }">
        <slot></slot>
    </span>
</template>
<script setup>
import { ref, defineProps, onMounted, watch } from 'vue'

let props = defineProps({
    width: {
        type: [String, Number],
        default: '375'
    },
    fontSize: {
        type: String,
        default: '22'
    },
    txt: {
        type: String,
        default: ''
    }
})

watch(() => props.txt, (newVal) => {
    setFontZoom(300)
},
    {
        deep: true
    })

let zoom = ref(1);
let zoomDom = ref({});

const setFontZoom = (time = 600) => {
    setTimeout(() => {
        let offsetWidth = zoomDom.value && zoomDom.value.offsetWidth || props.width;
        zoom.value = offsetWidth > props.width ? +props.width / offsetWidth : 1
    }, time)
}

onMounted(() => {
    setFontZoom()
})

</script>
<style lang="scss" scoped>
.zoom-wrap {
    font-weight: 800;
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    width: fit-content;
}
</style>