de-net-official/components/FontZoomMobile.vue

<!-- 组件确定最大宽度时 可等比缩放组件 -->
<template>
    <div :style="{ width: `${zoomWidth}px` }">
        <span class="zoom-wrap" ref="zoomDom" :style="{ transform: `scale(${zoom})` }">
            <slot></slot>
        </span>
    </div>
</template>

<script>
export default {
    props: {
        width: {
            type: String,
            default: '375'
        },
        unColor: {
            type: Boolean,
            default: false
        },
    },
    data() {
        return {
            zoom: 1,
            zoomWidth: 375
        }
    },
    mounted() {
        this.setFontZoom()
    },
    methods: {
      setFontZoom() {
        this.$nextTick(() => {
          let offsetWidth = this.$refs.zoomDom.offsetWidth;
          console.log(this.$refs)
          console.log('refs', this.$refs.zoomDom.offsetWidth)
          this.zoom = offsetWidth > this.width ? +this.width / offsetWidth : 1
          this.zoomWidth = offsetWidth > this.width ? this.width : offsetWidth;
        })
      }
    }
}
</script>

<style lang="scss" scoped>
.zoom-wrap {
    white-space: nowrap;
    display: inline-block;
    transform-origin: left center;
}
</style>