字体大小随容器宽度自适应变化 - vue

效果如图：

代码：

<li v-for="(item, index) in siderNavs" :key="item+index">
    <p :ref="`txtRef-${index}`" :style="`${styleFormate(index)}`">{{ item.name }}</p>
</li>

// 字体大小按照外层box自动缩放
styleFormate(index) {
  this.$nextTick(() => {
    const refObj = `txtRef-${index}`;
    const dom = (this.$refs[refObj] as any); // js可直接使用：this.$refs[refObj]
    const width = dom[0].clientWidth;
    const parentWidth = dom[0].parentNode.clientWidth;
    const multNum = parentWidth / width;
    if (multNum < 1) {
      const num = Math.floor(multNum*100) / 100;
      const style = `transform:scale(${num});`;
      dom[0].style = style;
    }
  });
}

li {
  width: 64px;
  height: 64px;
}
p {
  font-size: 98%;
  white-space: nowrap; // 禁止文字换行，以取到正确的dom宽度
}