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

需求：固定宽高的容器，内部文字长度不固定，字号大小需要随着文字数量的变化而变化，使得文字始终以一行撑满容器。

效果如图：

实现思路：
拿到文字所在dom的水平宽度 childWidth，并取得其父级dom的水平宽度 parentWidth。
这里需要对超出父级容器的部分缩小，所以可以用:
parentWidth / childWidth = scalcVal
如果文字长度超出父容器，则会得到一个介于0 ~ 1之间的值，这个值可以直接作为缩放比例使用，再结合css3的transform:scale(x)就能达到我们需要的效果；
tip: transform:scale(x)中，x介于0 ~ 1为缩小，> 1为放大。

代码：

<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宽度
}