问题
在使用组件 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); } } } }
