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

Posted 2022-03-30 凯小默

问题

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

解决

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

代码实现

1、安装 vue-count-to

npm install vue-count-to -s

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