de-net-official/components/FontZoom.vue

<!-- 组件确定最大宽度时 可等比缩放组件 -->
<template>
  <span class="zoom-wrap" :class="{unColor: unColor}" ref="zoomDom" :style="{ zoom: zoom }">
    <slot></slot>
  </span>
</template>

<script>
export default {
    props: {
        width: {
            type: String,
            default: '375'
        },
        unColor: {
            type: Boolean,
            default: false
        },
    },
    data() {
        return {
            zoom: 1,
        }
    },
    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
        })
      }
    }
}
</script>

<style lang="scss" scoped>
.zoom-wrap {
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  &.unColor {
    color: unset;
  }
}
</style>