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, getCurrentInstance } from 'vue'

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

let zoom = ref(1);
let currentInstance;

const setFontZoom = () => {
    const currentInstance = getCurrentInstance()
    let offsetWidth = currentInstance.ctx.$refs.zoomDom.offsetWidth;
    zoom.value = offsetWidth > props.width ? +props.width / offsetWidth : 1
}

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;
}
</style>