vue 里使用数字滚动插件 vue-count-to 时出现文本抖动？

问题

在使用组件 ​​vue-count-to​​ 时，数字是从 0 开始滚动的，就会导致这一块区域的宽度自动变化，导致一些不必要动的文字也跟着一起变化。

解决

我的解决方案是，一开始就计算出数字的位数，然后通过位数去固定数字的宽度，然后把数字跟单位分开，这样就能达到数字滚动不影响周围文本区域的变化。

代码实现

1、安装 ​​vue-count-to​​

npm install

2、使用 ​​vue-count-to​​

// 数字滚动
import CountTo from 'vue-count-to';

<div class="volume-count-unit" :numberDigits="num.toString().length">
  <spanclass="volume-count">
    <count-to :startVal='0' :endVal='num' :duration='3000'></count-to>
  </span>
  <span class="volume-unit">人次</span>
</div>
<script>export default {
  data() {
    return {
      num: 88888888
    }
  },
  components: { CountTo }
}</script>

3、样式编写：我用了定位的方式定住单位，位数就单独处理，通过属性 numberDigits 知道位数控制宽度，这里有千分位就需要加逗号，所以需要处理一下逗号的宽度。

@import '@/assets/scss/utils.scss';
@import '@/assets/scss/mixin.scss';
.volume-count-unit {
  position: relative;
  padding-right: p2r(54);
  display: inline-block;
  // 位数处理
  @include number-digits;

  .volume-count {
    font-size: p2r(64);
    font-weight: bold;
    line-height: p2r(64);
    ::v-deep span {
      font-family: DS-DIGIB;
    }
  }

  .volume-unit {
    position: absolute;
    bottom: p2r(8);
    right: 0;
    font-size: p2r(24);
  }
}

编写 ​​mixin.scss​​

// 位数处理器
@mixin {
  // 个、十、百、千、万、十万、百万、千万、亿
  $number-arr: 1, 2, 3, 4, 5, 6, 7, 8, 9;
  @each {
    @if  {
      &[numberDigits="#{$number}"] {
        // 数字的宽度(32.6) + 逗号的宽度（11.5） + 单位宽度（54）
        width: p2r($number*32.6 + 54);
      }
    }
    @if $number > 3 and {
      &[numberDigits="#{$number}"] {
        // 数字的宽度(32.6) + 逗号的宽度（11.5） + 单位宽度（54）
        width: p2r($number*32.6 + 11.5 + 54);
      }
    }
    @if $number > 6 and {
      &[numberDigits="#{$number}"] {
        // 数字的宽度(32.6) + 逗号的宽度（11.5） + 单位宽度（54）
        width: p2r($number*32.6 + 2*11.5 + 54);
      }
    }
  }
}