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

效果如图:
在这里插入图片描述在这里插入图片描述

实现思路:
拿到文字所在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宽度
}
Logo

前往低代码交流专区

更多推荐