提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  Javascript

当前栏目

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

Vue 插件
2023-03-14 22:41:44 时间

问题


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

358edccc5440480a92c34097a482575c.png



解决


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


代码实现


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);
      }
    }
  }
}




相关文章